@import url("https://assets.waag.org/fonts/maax/font.css");

/* Document
 * ========================================================================== */

/**
 * Add border box sizing in all browsers (opinionated).
 */

 *,
 ::before,
 ::after {
   box-sizing: border-box;
 }
 
 /**
  * 1. Add text decoration inheritance in all browsers (opinionated).
  * 2. Add vertical alignment inheritance in all browsers (opinionated).
  */
 
 ::before,
 ::after {
   text-decoration: inherit; /* 1 */
   vertical-align: inherit; /* 2 */
 }
 
 /**
  * 1. Use the default cursor in all browsers (opinionated).
  * 2. Change the line height in all browsers (opinionated).
  * 3. Use a 4-space tab width in all browsers (opinionated).
  * 4. Remove the grey highlight on links in iOS (opinionated).
  * 5. Prevent adjustments of font size after orientation changes in
  *    IE on Windows Phone and in iOS.
  * 6. Breaks words to prevent overflow in all browsers (opinionated).
  */
 
 html {
   cursor: default; /* 1 */
   line-height: 1.5; /* 2 */
   -moz-tab-size: 4; /* 3 */
   -o-tab-size: 4;
      tab-size: 4; /* 3 */
   -webkit-tap-highlight-color: transparent /* 4 */;
   -ms-text-size-adjust: 100%; /* 5 */
   -webkit-text-size-adjust: 100%; /* 5 */
   word-break: break-word; /* 6 */
 }
 
 /* Sections
  * ========================================================================== */
 
 /**
  * Remove the margin in all browsers (opinionated).
  */
 
 body {
   margin: 0;
 }
 
 /* Grouping content
  * ========================================================================== */
 
 /**
  * Remove the margin on nested lists in Chrome, Edge, IE, and Safari.
  */
 
 dl dl,
 dl ol,
 dl ul,
 ol dl,
 ul dl {
   margin: 0;
 }
 
 /**
  * Remove the margin on nested lists in Edge 18- and IE.
  */
 
 ol ol,
 ol ul,
 ul ol,
 ul ul {
   margin: 0;
 }
 
 /**
  * 1. Add the correct sizing in Firefox.
  * 2. Show the overflow in Edge 18- and IE.
  */
 
 hr {
   height: 0; /* 1 */
   overflow: visible; /* 2 */
 }
 
 /**
  * Add the correct display in IE.
  */
 
 main {
   display: block;
 }
 
 /**
  * Remove the list style on navigation lists in all browsers (opinionated).
  */
 
 nav ol,
 nav ul {
   list-style: none;
   padding: 0;
 }
 
 /**
  * 1. Correct the inheritance and scaling of font size in all browsers.
  * 2. Correct the odd `em` font sizing in all browsers.
  */
 
 pre {
   font-family: monospace, monospace; /* 1 */
   font-size: 1em; /* 2 */
 }
 
 /* Text-level semantics
  * ========================================================================== */
 
 /**
  * Remove the gray background on active links in IE 10.
  */
 
 a {
   background-color: transparent;
 }
 
 /**
  * Add the correct text decoration in Edge 18-, IE, and Safari.
  */
 
 abbr[title] {
   text-decoration: underline;
   text-decoration: underline;
   -webkit-text-decoration: underline dotted;
           text-decoration: underline dotted;
 }
 
 /**
  * Add the correct font weight in Chrome, Edge, and Safari.
  */
 
 b,
 strong {
   font-weight: bolder;
 }
 
 /**
  * 1. Correct the inheritance and scaling of font size in all browsers.
  * 2. Correct the odd `em` font sizing in all browsers.
  */
 
 code,
 kbd,
 samp {
   font-family: monospace, monospace; /* 1 */
   font-size: 1em; /* 2 */
 }
 
 /**
  * Add the correct font size in all browsers.
  */
 
 small {
   font-size: 80%;
 }
 
 /* Embedded content
  * ========================================================================== */
 
 /*
  * Change the alignment on media elements in all browsers (opinionated).
  */
 
 audio,
 canvas,
 iframe,
 img,
 svg,
 video {
   vertical-align: middle;
 }
 
 /**
  * Add the correct display in IE 9-.
  */
 
 audio,
 video {
   display: inline-block;
 }
 
 /**
  * Add the correct display in iOS 4-7.
  */
 
 audio:not([controls]) {
   display: none;
   height: 0;
 }
 
 /**
  * Remove the border on iframes in all browsers (opinionated).
  */
 
 iframe {
   border-style: none;
 }
 
 /**
  * Remove the border on images within links in IE 10-.
  */
 
 img {
   border-style: none;
 }
 
 /**
  * Change the fill color to match the text color in all browsers (opinionated).
  */
 
 svg:not([fill]) {
   fill: currentColor;
 }
 
 /**
  * Hide the overflow in IE.
  */
 
 svg:not(:root) {
   overflow: hidden;
 }
 
 /* Tabular data
  * ========================================================================== */
 
 /**
  * Collapse border spacing in all browsers (opinionated).
  */
 
 table {
   border-collapse: collapse;
 }
 
 /* Forms
  * ========================================================================== */
 
 /**
  * Remove the margin on controls in Safari.
  */
 
 button,
 input,
 select {
   margin: 0;
 }
 
 /**
  * 1. Show the overflow in IE.
  * 2. Remove the inheritance of text transform in Edge 18-, Firefox, and IE.
  */
 
 button {
   overflow: visible; /* 1 */
   text-transform: none; /* 2 */
 }
 
 /**
  * Correct the inability to style buttons in iOS and Safari.
  */
 
 button,
 [type="button"],
 [type="reset"],
 [type="submit"] {
   -webkit-appearance: button;
 }
 
 /**
  * 1. Change the inconsistent appearance in all browsers (opinionated).
  * 2. Correct the padding in Firefox.
  */
 
 fieldset {
   border: 1px solid #a0a0a0; /* 1 */
   padding: 0.35em 0.75em 0.625em; /* 2 */
 }
 
 /**
  * Show the overflow in Edge 18- and IE.
  */
 
 input {
   overflow: visible;
 }
 
 /**
  * 1. Correct the text wrapping in Edge 18- and IE.
  * 2. Correct the color inheritance from `fieldset` elements in IE.
  */
 
 legend {
   color: inherit; /* 2 */
   display: table; /* 1 */
   max-width: 100%; /* 1 */
   white-space: normal; /* 1 */
 }
 
 /**
  * 1. Add the correct display in Edge 18- and IE.
  * 2. Add the correct vertical alignment in Chrome, Edge, and Firefox.
  */
 
 progress {
   display: inline-block; /* 1 */
   vertical-align: baseline; /* 2 */
 }
 
 /**
  * Remove the inheritance of text transform in Firefox.
  */
 
 select {
   text-transform: none;
 }
 
 /**
  * 1. Remove the margin in Firefox and Safari.
  * 2. Remove the default vertical scrollbar in IE.
  * 3. Change the resize direction in all browsers (opinionated).
  */
 
 textarea {
   margin: 0; /* 1 */
   overflow: auto; /* 2 */
   resize: vertical; /* 3 */
 }
 
 /**
  * Remove the padding in IE 10-.
  */
 
 [type="checkbox"],
 [type="radio"] {
   padding: 0;
 }
 
 /**
  * 1. Correct the odd appearance in Chrome, Edge, and Safari.
  * 2. Correct the outline style in Safari.
  */
 
 [type="search"] {
   -webkit-appearance: textfield; /* 1 */
   outline-offset: -2px; /* 2 */
 }
 
 /**
  * Correct the cursor style of increment and decrement buttons in Safari.
  */
 
 ::-webkit-inner-spin-button,
 ::-webkit-outer-spin-button {
   height: auto;
 }
 
 /**
  * Correct the text style of placeholders in Chrome, Edge, and Safari.
  */
 
 ::-webkit-input-placeholder {
   color: inherit;
   opacity: 0.54;
 }
 
 /**
  * Remove the inner padding in Chrome, Edge, and Safari on macOS.
  */
 
 ::-webkit-search-decoration {
   -webkit-appearance: none;
 }
 
 /**
  * 1. Correct the inability to style upload buttons in iOS and Safari.
  * 2. Change font properties to `inherit` in Safari.
  */
 
 ::-webkit-file-upload-button {
   -webkit-appearance: button; /* 1 */
   font: inherit; /* 2 */
 }
 
 /**
  * Remove the inner border and padding of focus outlines in Firefox.
  */
 
 ::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
 /**
  * Restore the focus outline styles unset by the previous rule in Firefox.
  */
 
 :-moz-focusring {
   outline: 1px dotted ButtonText;
 }
 
 /**
  * Remove the additional :invalid styles in Firefox.
  */
 
 :-moz-ui-invalid {
   box-shadow: none;
 }
 
 /* Interactive
  * ========================================================================== */
 
 /*
  * Add the correct display in Edge 18- and IE.
  */
 
 details {
   display: block;
 }
 
 /*
  * Add the correct styles in Edge 18-, IE, and Safari.
  */
 
 dialog {
   background-color: white;
   border: solid;
   color: black;
   display: block;
   height: -moz-fit-content;
   height: fit-content;
   left: 0;
   margin: auto;
   padding: 1em;
   position: absolute;
   right: 0;
   width: -moz-fit-content;
   width: fit-content;
 }
 
 dialog:not([open]) {
   display: none;
 }
 
 /*
  * Add the correct display in all browsers.
  */
 
 summary {
   display: list-item;
 }
 
 /* Scripting
  * ========================================================================== */
 
 /**
  * Add the correct display in IE 9-.
  */
 
 canvas {
   display: inline-block;
 }
 
 /**
  * Add the correct display in IE.
  */
 
 template {
   display: none;
 }
 
 /* User interaction
  * ========================================================================== */
 
 /*
  * 1. Remove the tapping delay in IE 10.
  * 2. Remove the tapping delay on clickable elements
       in all browsers (opinionated).
  */
 
 a,
 area,
 button,
 input,
 label,
 select,
 summary,
 textarea,
 [tabindex] { /* 1 */
   touch-action: manipulation; /* 2 */
 }
 
 /**
  * Add the correct display in IE 10-.
  */
 
 [hidden] {
   display: none;
 }
 
 /* Accessibility
  * ========================================================================== */
 
 /**
  * Change the cursor on busy elements in all browsers (opinionated).
  */
 
 [aria-busy="true"] {
   cursor: progress;
 }
 
 /*
  * Change the cursor on control elements in all browsers (opinionated).
  */
 
 [aria-controls] {
   cursor: pointer;
 }
 
 /*
  * Change the cursor on disabled, not-editable, or otherwise
  * inoperable elements in all browsers (opinionated).
  */
 
 [aria-disabled="true"],
 [disabled] {
   cursor: not-allowed;
 }
 
 /*
  * Change the display on visually hidden accessible elements
  * in all browsers (opinionated).
  */
 
 [aria-hidden="false"][hidden] {
   display: inline;
   display: initial;
 }
 
 [aria-hidden="false"][hidden]:not(:focus) {
   clip: rect(0, 0, 0, 0);
   position: absolute;
 }

 [role="button"]:focus {
   outline: none;
 }

 /* The site's colours and its vertical rhythm. The other measurements that
   used to be Sass variables are inlined in the partials: they were only ever
   multiplied by constants. */
:root {
  --color-red: #DA0812;
  --color-turquoise: #2FB6BC;
  --color-yellow: #f6a500;
  --color-purple: #522e90;
  --button-color: var(--color-turquoise);
  --box-color: rgba(222, 222, 222, 0.4);
  --box-title-color: rgba(47, 182, 188, 0.5);

  /* The vertical rhythm. --leading is one line of body text; every gap in
     the flow rules is a whole number of them, so a paragraph, a list and a
     heading all take up a round number of lines and text in columns side by
     side keeps landing on the same baselines. As a length rather than a
     ratio it stays one line whatever the font-size of the element it spaces. */
  --font-size: max(1.6rem, min(calc(1.6rem + (18 - 16) * ((100vw - 360px) / 960)), 1.8rem));
  --line-height: 1.5;
  --leading: calc(var(--font-size) * var(--line-height));
}
:root {
  scrollbar-gutter: stable;
}

body {
  padding: 0;
  overflow-y: auto;
  overflow-x: hidden;
  width: 100%;
}

body::-webkit-scrollbar { width: 0.5rem; }

body::-webkit-scrollbar-track { background-color: rgba(0,0,0,0.025); }

body::-webkit-scrollbar-thumb { background:rgba(0,0,0,0.15); }

body::-webkit-scrollbar-track:hover { background-color: rgba(0,0,0,0.05); }

body::-webkit-scrollbar-thumb:hover { background:rgba(0,0,0,0.25); }

.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  max-width: 100vw;
  /* overflow-x: hidden; */
}

#blob {
  position: absolute;
  z-index: -1;
  width: 75vw;
  min-width: 768px;
  top: 0;
  right: 0;
  /*transform: translate(35%, -25%); */
}

#blob path {
    stroke-width: 0.8;
  }

main {
  flex: 1 0 auto;
  width: 100%;
}

@media screen {

main {
    margin: 3rem auto;
    padding-top: 5rem;
}
  }

@media (max-width: 680px) {

main {
    padding-top: 3rem;
}
  }

footer {
  flex-shrink: 0;
}

section {
  min-height: 70vh;
  margin-bottom: 4rem;
}

section.no-min-height {
    min-height: 0;
  }

.row {
  margin: 0 auto;
  max-width: 1320px;
  padding: 1rem;
}

@media (min-width: 680px) {

.row {
    padding: 2rem;
}
  }

.columns-1, .columns-2 {
  display: flex;
  flex-direction: row;
  margin: 0 -1rem;
}

.columns-1 .column,.columns-2 .column {
    margin: 0 1rem;
    max-width: 94vw;
  }

.columns-1 .column {
  width: 100%;
}

.columns-2 .column {
  width: 50%;
}

@media (max-width: 680px) {
  .columns-1, .columns-2 { 
    flex-direction: column;
    align-items: center;
  }

  .s-column-reverse {
    flex-direction: column-reverse;
  }

  .columns-2 .column {
    width: 100%;
    /* Stacked, one column carries on where the last left off, so the gap
       between them is counted in lines like the ones inside them. */
    margin-bottom: var(--leading);
  }
}

.grid-columns-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* The row gap counts in lines: it separates one grid row from the next, so
     off the grid it would take every row below the first with it. The column
     gap is horizontal and has no such duty. */
  grid-gap: calc(2 * var(--leading)) 4rem;
  gap: calc(2 * var(--leading)) 4rem;

}

@media (max-width: 680px) {

.grid-columns-2 {
    grid-template-columns: 1fr;

}
  }

.item {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-bottom: 2rem;
}

.items {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -1rem;
}

.items .item {
    width: calc(50% - 2rem);
    margin: 0 1rem 2rem;
  }

.items a.item {
    -webkit-text-decoration: none;
    text-decoration: none;
    color: #000;
  }

.items a.item:hover {
      transition: all 200ms ease;
      transform: translateY(2px);
    }

.v-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media (max-width: 680px) {

.s-disable {
    display: none;
}
  }

@media (min-width: 681px) {

.l-disable {
    display: none; 
}
  }

.box {
  background: var(--box-color);
  position: relative;
  padding: 1.6rem;
}

.box:before,.box:after {
    content: '';
    position: absolute;
  }

.box:before {
    height: 100%;
    width: 0.8rem;
    top: 0.4rem;
    right: 0;
    background: rgba(209, 209, 209, 0.4);
    transform: translateX(100%) skewY(45deg);
  }

.box:after {
    width: 100%;
    height: 0.8rem;
    left: 0.4rem;
    bottom: 0;
    background: rgba(171, 171, 171, 0.4);
    transform: translateY(100%) skewX(45deg);
  }

.box .box-title {
    border-bottom: 2px solid var(--color-turquoise);
  }

.responsive-image {
  width: 100%;
  height: auto;
}

img.with-shadow {
  box-shadow: 0 0 1rem 0 rgba(0,0,0,0.15);
}

img.tilted {
  transform: scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(1deg) translate3d(0px, 0px, 0px) skew(-1deg, 0deg);
}


.logo-link {
  display: block;
  max-width: 300px;
  margin-bottom: 4rem;
}


.center .logo-link {
    margin-left: auto;
    margin-right: auto;
  }


::-moz-selection { background: var(--color-purple); color: #FFF; }
     ::selection { background: var(--color-purple); ; color: #FFF; }

html {
  font-size: 62.5%;
}

body {
  font-family: maax, sans-serif;
  font-size: 1.7rem;
  font-size: var(--font-size);
  line-height: var(--line-height);
}

h1, h2, h3, h4 {
  max-width: 720px;
}

h1 a,h2 a,h3 a,h4 a {
    -webkit-text-decoration: none;
    text-decoration: none;
  }

h1 a:hover,h2 a:hover,h3 a:hover,h4 a:hover {
      -webkit-text-decoration: underline;
      text-decoration: underline;
    }

.center h1,.center h2,.center h3,.center h4 {
    margin-left: auto;
    margin-right: auto;
  }

h1, .h1 {
  font-size: 3rem;
  font-size: max(2.8rem, min(calc(2.8rem + (32 - 28) * ((100vw - 360px) / 960)), 3.2rem));
  margin: 0 0 3rem 0;
  line-height: 1.1em;
}

h1.page-title:not(.does-not-exist),.page-title.h1 {
    margin-top: 4rem;
  }

h1.with-subtitle:not(.does-not-exist),.with-subtitle.h1 {
    margin-bottom: 0;
  }

h1.with-subtitle:not(.does-not-exist)  + *,.with-subtitle.h1  + * {
      font-style: italic;
      margin-bottom: 3rem;
    }

h1.bigger:not(.does-not-exist),.bigger.h1 {
    font-size: 4.2rem;
  font-size: max(3.6rem, min(calc(3.6rem + (48 - 36) * ((100vw - 360px) / 960)), 4.8rem));
  }

h2, .h2 {
  font-size: 2.2rem;
  font-size: max(2rem, min(calc(2rem + (24 - 20) * ((100vw - 360px) / 960)), 2.4rem));
  margin: 0;
  line-height: var(--leading);
}

p + h2:not(.does-not-exist),p + .h2 {
    margin-top: 4rem;
  }

h2.thin:not(.does-not-exist),.thin.h2,h1 + .content h2:not(.does-not-exist),h1 + .content .h2 {
    font-weight: 400;
  }

h3 {
  font-size: 1.9rem;
  font-size: max(1.8rem, min(calc(1.8rem + (20 - 18) * ((100vw - 360px) / 960)), 2rem));
  margin: 0;
  line-height: var(--leading);
}

h4 {
  margin: 0;
  line-height: var(--leading);
}

p {
  margin: 0;
}

/*
 * Vertical rhythm, owned by the container rather than by the elements inside
 * it: every child is pushed away from the one above, and the first is left
 * alone because nothing precedes it. One place to read the whole scale,
 * instead of a top margin on <p> and a reset for every element that must not
 * have one.
 *
 * Put `flow` on anything that holds running text — the content wrappers, the
 * card bodies, the columns. One class rather than a list of container names
 * keeps the compiled selectors short: the nesting below is flattened at build
 * time, so every extra name in this list would multiply every rule under it.
 *
 * The gaps are whole multiples of --leading, one line of body text, and the
 * headings are a line tall as well, so everything here advances by a round
 * number of lines. That is what keeps two columns of text beside each other
 * on the same baselines however differently they are built. A gap in `em`
 * would not: it would scale with the font-size of the element it precedes,
 * and a heading would push the column below it off the grid.
 *
 * The selectors are spelled out rather than folded into :is(). Mixing element
 * and class selectors in one :is() makes it as specific as the class, and the
 * exceptions further down would then lose to the rules they are meant to
 * override.
 */
.flow > * + * {
    margin-top: var(--leading);
  }
/* A new stretch of prose wants air. */
.flow > p + h2,.flow > p + .h2,.flow > * + h3 {
    margin-top: calc(2 * var(--leading));
  }
/* A heading belongs to what follows it, and a list continues the sentence
     that introduces it. A page title carries its own margin below, so the
     element after it adds none of its own. */
.flow > h1 + *,.flow > .h1 + *,.flow > h3 + *,.flow > h4 + *,.flow > * + ul,.flow > * + ol {
    margin-top: 0;
  }
/* Except that two headings in a row are not a heading and its text. */
.flow > h3 + h4 {
    margin-top: var(--leading);
  }
/* A date line or a byline reads as part of the title under it, and an
     initiative's URL as part of its name. */
.flow > .meta + *,.flow > .publication-meta + *,.flow > * + .url {
    margin-top: 0;
  }
/* An introduction carries its own generous margin below it. */
.flow > h2 + .page-introduction {
    margin-top: var(--leading);
  }
.flow > .page-introduction + * {
    margin-top: 0;
  }
/* Something switched off should not leave a gap behind. */
.flow > [hidden] + * {
    margin-top: 0;
  }
.flow > * + .buttons {
    margin-top: var(--leading);
  }
/* These two separate the blocks of a publication, which is one column of
     text with nothing beside it to line up with, so they are sized for the
     break they mark rather than counted in lines. */
.flow > * + .publication-extra {
    margin-top: 6rem;
  }
/* Resource cards keep their own spacing, heading above them or not. */
.flow > * + .publication-link {
    margin-top: 4rem;
  }
/* Full-height blocks on the front page, spaced by their own min-height. */
.flow > * + .text-part {
    margin-top: 0;
  }
/* A "back to the list" link trails the content above it. */
.flow > * + .back {
    margin-top: 0;
  }

/* A loose list item holds paragraphs; the rest of a list item is inline. */
li > * + p {
  margin-top: var(--leading);
}

/* The previous and next links sit side by side. */
.publication-nav-links > * + * {
  margin-top: 0;
}

sup {
  font-size: 0.7em;
}

ul, ol {
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 1.5em;
}

a {
  color: var(--color-turquoise);
  -webkit-text-decoration: underline;
  text-decoration: underline;
}

a:hover {
    -webkit-text-decoration: none;
    text-decoration: none;
  }

a.back {
  display: inline-block;
  -webkit-text-decoration: none;
  text-decoration: none;
}

a.back:hover {
    transition: all 200ms ease;
    transform: translateX(-2px);
  }

a.button, button.button, button {
  display: inline-block;
  background: var(--button-color);
  position: relative;
  padding: 0.6rem 1rem 0.45rem;
  -webkit-text-decoration: none;
  text-decoration: none;
  color: #FFF !important;
  font-size: 1.5rem;
  cursor: pointer;
  border: none;
  font-family: inherit;
}

h2 + a.button,h2 + button.button,h2 + button:not(.does-not-exist) {
    margin-top: 2rem;
  }

a.button:before {
    content: '';
    position: absolute;
  }

button.button:before {
    content: '';
    position: absolute;
  }

button:not(.does-not-exist):before {
    content: '';
    position: absolute;
  }

a.button:after {
    content: '';
    position: absolute;
  }

button.button:after {
    content: '';
    position: absolute;
  }

button:not(.does-not-exist):after {
    content: '';
    position: absolute;
  }

a.button:before {
    height: 100%;
    width: 0.3rem;
    top: 0.15rem;
    right: 0;
    background: #2aa2a8;
    transform: translateX(100%) skewY(45deg);
  }

button.button:before {
    height: 100%;
    width: 0.3rem;
    top: 0.15rem;
    right: 0;
    background: #2aa2a8;
    transform: translateX(100%) skewY(45deg);
  }

button:not(.does-not-exist):before {
    height: 100%;
    width: 0.3rem;
    top: 0.15rem;
    right: 0;
    background: #2aa2a8;
    transform: translateX(100%) skewY(45deg);
  }

a.button:after {
    width: 100%;
    height: 0.3rem;
    left: 0.15rem;
    bottom: 0;
    background: #1b676a;
    transform: translateY(100%) skewX(45deg);
  }

button.button:after {
    width: 100%;
    height: 0.3rem;
    left: 0.15rem;
    bottom: 0;
    background: #1b676a;
    transform: translateY(100%) skewX(45deg);
  }

button:not(.does-not-exist):after {
    width: 100%;
    height: 0.3rem;
    left: 0.15rem;
    bottom: 0;
    background: #1b676a;
    transform: translateY(100%) skewX(45deg);
  }

a.button:hover,button.button:hover,button:not(.does-not-exist):hover {
    top: 0.075rem;
    left: 0.075rem;
    -webkit-text-decoration: none;
    text-decoration: none;
  }

a.button:hover:before {
      width: 0.225rem;
      top: 0.15rem;
    }

button.button:hover:before {
      width: 0.225rem;
      top: 0.15rem;
    }

button:not(.does-not-exist):hover:before {
      width: 0.225rem;
      top: 0.15rem;
    }

a.button:hover:after {
      height: 0.225rem;
      left: 0.15rem;
    }

button.button:hover:after {
      height: 0.225rem;
      left: 0.15rem;
    }

button:not(.does-not-exist):hover:after {
      height: 0.225rem;
      left: 0.15rem;
    }

button {
  cursor: pointer;
}

button.nb {
  background: transparent none repeat 0 0 / auto auto padding-box border-box scroll;
  background: initial;
  border: medium none currentcolor;
  border: initial;
  font-size: inherit;
  padding: 0;
  padding: initial;
  font-family: inherit;
  font-weight: inherit;
  text-align: inherit;
  line-height: inherit;
  color: inherit;
}

.page-introduction {
  max-width: 720px;
  font-size: 1.1em;
  line-height: var(--leading);
  margin-bottom: 6rem;
}

h2 + .page-introduction {
    margin-top: 2rem;
  }

.content {
  max-width: 720px;
  margin-bottom: 6rem;
}

.content img {
    max-width: 100%;
    height: auto;
  }

.text {
  margin-bottom: 1.6rem;
}

h2 + .text {
    margin-top: 2rem;
  }

.meta {
  font-size: 1.4rem;
  font-size: max(1.3rem, min(calc(1.3rem + (15 - 13) * ((100vw - 360px) / 960)), 1.5rem));
}

.buttons {
  display: flex;
  justify-content: flex-end;
  /* The gap above comes from the flow rules, so it is stated once. */
  margin: 0;
}

.center {
  text-align: center;
}

#site-header {
  position: fixed;
  width: 100vw;
  color: #000;
  padding: 1rem 1rem 1rem 2rem;
  z-index: 1;
  -webkit-user-select: none;
  -moz-user-select: none;
       user-select: none;
}

@media print {

#site-header {
    display: none;
}
  }

#site-header #site-header-bg {
    position: absolute;
    top: 0%;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #FFF;
    z-index: -1;
    transform: translateY(-111%);
    box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, 0.2);
    transition: all 100ms ease;
  }

#site-header #site-header-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
  }

#site-header.scrolled:not(.nav-active) #site-header-bg {
    transform: translateY(0%);
  }

#site-header a {
    display: block;
    -webkit-text-decoration: none;
    text-decoration: none;
    text-transform: lowercase;
    color: #000;
  }

#site-titles #site-title {
    font-family: waax;
    font-weight: 400;
    font-size: 3.8rem;
  font-size: max(3.6rem, min(calc(3.6rem + (40 - 36) * ((100vw - 360px) / 960)), 4rem));
    margin: 0;
    line-height: 3.2rem;
    white-space: nowrap;
    transition: all 100ms ease;
  }

#site-titles #site-title a:hover {
      -webkit-text-decoration: underline;
      text-decoration: underline;
    }

.scrolled :is(#site-titles #site-title) {
      font-size: 3rem;
  font-size: max(2.8rem, min(calc(2.8rem + (32 - 28) * ((100vw - 360px) / 960)), 3.2rem));
    }

.nav-active :is(#site-titles #site-title) {
      opacity: 0;
    }

#nav {
  margin: 0;
}

#nav-container {
  position: relative;
}

#nav-container input {
    position: absolute;
    top: -0.5rem;
    right: -0.3rem;
    width: 2rem;
    height: 2rem;
    margin: 0;
    cursor: pointer;
    opacity: 0; /* hide this */
    z-index: 2; /* and place it over the hamburger */
    -webkit-touch-callout: none;
  }

#nav-container .hamburger-bar {
    display: block;
    width: 14px;
    height: 2px;
    margin-bottom: 2px;
    position: relative;
    background: #000;
    border-radius: 2px;
    z-index: 1;
    transform-origin: 3px 0px;
    transition: all 100ms ease;
  }

#nav-container .hamburger-bar:first-child { transform-origin: 0% 0%; }

#nav-container .hamburger-bar:nth-child(3) { transform-origin: 0% 100%; }

#nav-container input:checked ~ .hamburger-bar {
    opacity: 1;
    transform: rotate(45deg) translate(3px,-1px);
  }

#nav-container input:checked ~ .hamburger-bar:nth-child(4) {
    opacity: 0;
    transform: rotate(0deg) scale(0.1, 0.1);
  }

#nav-container input:checked ~ .hamburger-bar:nth-child(3) {
    transform: rotate(-45deg) translate(-1px, 6px);
  }

#nav a .nav-item-title {
    font-size: 1.9rem;
  font-size: max(1.8rem, min(calc(1.8rem + (20 - 18) * ((100vw - 360px) / 960)), 2rem));
    line-height: 2.2rem;
    font-weight: 700;
  }

#nav a:hover .nav-item-title {
    -webkit-text-decoration: underline;
    text-decoration: underline;
  }

#nav a .nav-item-subtitle {
    font-size: 1.4rem;
  font-size: max(1.3rem, min(calc(1.3rem + (15 - 13) * ((100vw - 360px) / 960)), 1.5rem));
    line-height: 1.6rem;
    max-width: 280px;
    overflow: hidden;
    white-space: nowrap;
    transition: max-width 200ms ease;
  }

/* NARROW SCREEN */
@media only screen and (max-width: 1100px) {
  #nav-container {
    flex-direction: column;
    align-items: flex-end;
    margin: 1.2rem 1.6rem 0.8rem;
  }

    #nav-container input:checked ~ #nav {
      transform: translateX(-100%);
    }

  #nav {
    position: absolute;
    width: 300px;
    right: -305px;
    top: 0;
    margin: -2.5rem;
    padding: 3.5rem 2.5rem 2.5rem;
    background: #fff;
    box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, 0.2);
    -webkit-font-smoothing: antialiased;
    /* to stop flickering of text in safari */
    transform-origin: 0% 0%;
    transform: translateX(0%);
    transition: transform 0.1s cubic-bezier(0.77,0.2,0.05,1.0);
  }

    #nav li {
      padding: 1rem 0;
    }

}

/* WIDE SCREEN */
@media only screen and (min-width: 1101px) { 
  #nav-container {
    width: 100%;
  }

    #nav-container input {
      display: none;
    }

    #nav-container .hamburger-bar {
      display: none;
    }

  #nav {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: flex-end;
  }
      .scrolled :is(#nav a .nav-item-subtitle) {
        max-width: 1px;
        max-height: 1px;
        overflow: hidden;
      }

    #nav ul {
      display: flex;
      padding: 0;
    }

    #nav li {
      padding: 0.8rem 2rem 0;
      transition: all 100ms ease;
    }

      .scrolled :is(#nav li) {
        padding-top: 0.6rem;
      }
}
footer {
  text-align: center;
  font-size: 1.3rem;
  font-size: max(1.2rem, min(calc(1.2rem + (14 - 12) * ((100vw - 360px) / 960)), 1.4rem));
}
@media print {
footer {
    display: none;
}
  }
#front-introduction .row {
    min-height: 80vh;
  }
#front-introduction h1 {
    font-size: 4.7rem;
  font-size: max(3rem, min(calc(3rem + (64 - 30) * ((100vw - 360px) / 960)), 6.4rem));
    line-height: 1em;
    word-break: keep-all;
  }
#front-introduction h2 {
    font-size: 2.7rem;
  font-size: max(2.4rem, min(calc(2.4rem + (30 - 24) * ((100vw - 360px) / 960)), 3rem));
    font-weight: 400;
    line-height: 1.25em;
    font-style: italic;
  }
#front-introduction #toaster {
    max-width: 70vw;
    margin: 0 auto;
  }
@media (max-width: 480px) {
    #front-introduction .column {
      text-align: center;
    }
  }

#front-page section {
    overflow: hidden;
  }

#front-page #phone {
    max-height: 70vh;
  }

#front-page #stack {
    max-height: 50vh;
  }

#front-page .text-part {
    min-height: 80vh;
  }

@media (max-width: 480px) {
      #front-page .text-part svg {
        margin: 1rem auto;
        max-width: 60vw;
      }
    }

#front-page #next-actions {
    text-align: center;
  }

#colofon-items {
  display: flex;
  justify-content: center;
  align-items: center;
}

#colofon-items .colofon-item {
    text-align: center;
    -webkit-text-decoration: none;
    text-decoration: none;
    margin: 2rem;
  }

#colofon-items .colofon-item .logo {
      width: 200px;
      margin-bottom: 1rem;
    }

@media (min-width: 681px) {
    #layers .column:last-child {
      padding-top: 5rem;
    }
  }

#layers svg {
    display: block;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    /*pointer-events: none; */
  }

#layers g {
    pointer-events: none;
  }

#layers path,#layers polygon {
    pointer-events: auto;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 0.75px;
  }

#layers path.stroked,#layers polygon.stroked { stroke: #000; fill: none; }

#layers path.dotted,#layers polygon.dotted { stroke: #000; stroke-dasharray: 12; }

#layers text {
    pointer-events: auto;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
  }

#layers text.strong {
      font-weight: 700;
    }

#layers [role="button"]:not(.idle) > text {
    font-weight: 700;
  }

#layers .clickable {
    cursor: pointer;
  }

#layers .inactive {
    opacity: 0;
  }

#layers .inactive path,#layers .inactive polygon,#layers .inactive text {
      pointer-events: none;
    }

#layers .idle {
    opacity: 0.6;
  }

#layers .idle:hover {
      opacity: 0.8;
    }

#layers .active .idle {
    opacity: 0.7;
  }

#layers .active .idle:hover {
      opacity: 0.9;
    }

#layers #layer-list {
    list-style: none;
    margin: 0 -5rem 0 1rem;
    padding: 0 0 0 0.5rem;
    float: right;
    border-left: 0.25rem solid black;
  }

#layers #layer-list li:hover { -webkit-text-decoration: underline; text-decoration: underline; }

#layers #layer-list li.current { font-weight: 700; }

#layers #layer-list li.depth-1 { padding-left: 0; }

#layers #layer-list li.depth-3 { padding-left: 0.5rem; }

#layers #layer-list li.depth-5 { padding-left: 1rem; }

#layers g {
    transition: all 100ms ease;
  }

#layers g.down {
    transform: translateY(120px);
  }

#layers g.up {
    transform: translateY(-120px);
  }

.w-u { fill: #b5b5b5; stroke: #b5b5b5; }
.w-r { fill: #e3e3e3; stroke: #e3e3e3; }
.w-l { fill: #828282; stroke: #828282; }

.y-u { fill: #e6982d; stroke: #e6982d; }
.y-r { fill: #db912a; stroke: #db912a; }
.y-l { fill: #bd7e23; stroke: #bd7e23; }

.t-u { fill: #27afae; stroke: #27afae; }
.t-r { fill: #25a8a7; stroke: #25a8a7; }
.t-l { fill: #1a9392; stroke: #1a9392; }

.p-u { fill: #49378d; stroke: #49378d; }
.p-r { fill: #463387; stroke: #463387; }
.p-l { fill: #3d2976; stroke: #3d2976; }

.r-u { fill: #d6262c; stroke: #d6272b; }
.r-r { fill: #cc2429; stroke: #cc2429; }
.r-l { fill: #b11d21; stroke: #b11d21; }

#context-layers-active.active  > g:nth-child(1) { transform: translateY(60px); }

#context-layers-active.active  > g:nth-child(2) { transform: translateY(20px); }

#context-layers-active.active  > g:nth-child(3) { transform: translateY(-20px); }

#context-layers-active.active  > g:nth-child(4) { transform: translateY(-60px); }

#context-layers-active.active  > g:nth-child(5) { transform: translateY(-90px); }

#tech-layers-active.active  > g:nth-child(1) { transform: translateY(60px); }

#tech-layers-active.active  > g:nth-child(2) { transform: translateY(30px); }

#tech-layers-active.active  > g:nth-child(3) { transform: translateY(0px); }

#tech-layers-active.active  > g:nth-child(4) { transform: translateY(-30px); }

#tech-layers-active.active  > g:nth-child(5) { transform: translateY(-60px); }

#tech-layers-active.active  > g:nth-child(6) { transform: translateY(-80px); }

.domains a.domain {
    display: flex;
    align-items: center;
    -webkit-text-decoration: none;
    text-decoration: none;
    margin-bottom: 2rem;
    padding: 1rem 2rem;
    color: #000;
  }

@media (max-width: 480px) {

.domains a.domain {
      flex-direction: column;
  }
    }

.domains a.domain .image {
      width: 120px;
      flex-shrink: 0;
    }

.domains a.domain .content {
      margin-bottom: 0rem;
      margin-top: 2rem;
    }

.domains a.domain .text {
      padding: 0 2rem;
    }

.alternatives {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -1rem;
}

.alternatives .alternative {
    display: flex;
    width: calc(100% - 2rem);
    margin: 1rem;
  }

@media (min-width: 1024px) {

.alternatives .alternative {
      width: calc(50% - 2rem);
  }
    }

.alternatives .alternative .logo {
      width: 200px;
      flex-shrink: 0;
      padding: 2px 0;
    }

.alternatives .alternative .text {
      padding-left: 3rem;
    }

.alternatives .alternative h2 {
      margin-bottom: 0;
    }

.alternatives .alternative .url {
      display: inline-block;
      margin-bottom: 2rem;
    }

.alternatives .alternative .meta {
      margin-bottom: 0;
      font-size: 1.7rem;
  font-size: max(1.6rem, min(calc(1.6rem + (18 - 16) * ((100vw - 360px) / 960)), 1.8rem));
      font-weight: 700;
    }

.alternatives .alternative .meta + .meta {
        margin-top: 0;
      }

#publication-wrapper {
  width: 100%;
  max-width: 1320px;
  margin: 5rem auto;
  padding: 0 1.5rem;
}

@media screen and (min-width: 780px) {

#publication-wrapper {
    display: flex;
    align-items: flex-start;
}
  }

#publication-toc {
  padding: 2rem;
}

@media print {

#publication-toc {
    display: none;
}
  }

@media screen and (max-width: 779px) {

#publication-toc {
    position: fixed;
    right: 0;
    bottom: 0;
    background-color: var(--color-turquoise);
    z-index: 1;
    transform: translateY(100%);
    transition: all 150ms ease;
    color: white;
}

    #publication-toc .box-title {
      padding-right: 3rem;
    }

    #publication-toc .toggle {
      position: absolute !important;
      right: 1.5rem;
      bottom: calc(100% + 1.5rem);
      left: auto;
      top: auto;
      width: 35px;
      height: 35px;
      cursor: pointer;
      border: none;
      transition: all 0ms ease;
      z-index: 2;
    }

      #publication-toc .toggle:hover {
        transform: translate(0.075rem, 0.075rem);
      }

    #publication-toc .toggle-icon,#publication-toc .toggle-icon::after,#publication-toc .toggle-icon::before {
      box-sizing: border-box;
      position: relative;
      display: block;
      width: 20px;
      height: 2px;
      background: white;
    }

    #publication-toc .toggle-icon::after,#publication-toc .toggle-icon::before {
      content: "";
      position: absolute;
      top: -6px
    }

    #publication-toc .toggle-icon::after {
      top: 6px
    }

    #publication-toc.toc-open {
      transform: translateY(0);
    }

      #publication-toc.toc-open .toggle {
        top: 1.75rem;
      }

        #publication-toc.toc-open .toggle::after {
          display: none;
        }

        #publication-toc.toc-open .toggle::before {
          display: none;
        }

      #publication-toc.toc-open .toggle-icon {
        box-sizing: border-box;
        position: relative;
        display: block;
        transform: scale(var(--ggs,1));
        width: 22px;
        height: 22px;
        background-color: transparent;
      }
      #publication-toc.toc-open .toggle-icon::after,#publication-toc.toc-open .toggle-icon::before {
        position: absolute;
        bottom: 4px;
        top: auto;
      }

      #publication-toc.toc-open .toggle-icon::after {
        width: 8px;
        height: 8px;
        border-bottom: 2px solid white;
        border-left: 2px solid white;
        transform: rotate(-45deg);
        left: 7px;
        background: transparent;
        top: auto;
      }

      #publication-toc.toc-open .toggle-icon::before {
        width: 2px;
        height: 16px;
        left: 10px;
      }
  }

@media screen and (min-width: 780px) {

#publication-toc {
    position: sticky;
    align-self: flex-start;
    top: 100px;
    width: 440px;
    max-width: 40%;
}

    #publication-toc .toggle {
      display: none;
    }
  }

#publication-toc li {
    position: relative;
  }

#publication-toc li.current::before {
      content: "→";
      position: absolute;
      right: calc(100% + 0.25rem);
    }

#publication-toc li button {
      position: relative;
      left: 0;
    }

#publication-toc li button:hover {
        left: 0.5rem;
        transition: all 200ms ease;
      }

#publication-toc li.current button:hover {
      left: 0;
    }

#publication-toc h3 {
    margin-bottom: 1rem;
  }

#publication-toc li {
    margin-top: 0.75rem;
  }

#publication-toc ul ul {
    margin-left: 0.5rem;
  }

/* position: relative; */

/* height: 80vh; */

/* //background-color: $color-turquoise; */

/* @media print { */

/*   height: 40vh; */

/* } */

/* h1 { */

/*   position: absolute; */

/*   top: 50%; */

/*   left: 50%; */

/*   transform: translate(-50%, -50%); */

/*   max-width: 80%; */

/*   text-align: center; */

/*   @include font-size-clamp(3.3, 5.7); */

/* } */

#publication-header svg {
    display: block;
    margin: 0 auto;
    width: Min(80vw, 80vh);
    max-width: 860px;
  }

@media print {

#publication-header svg {
      margin: 0 0 0 5rem;
  }
    }

@media screen and (min-width: 680px) {

#publication-main {
    flex-grow: 1.6;
    padding: 0 3rem;
}
  }

@media (min-width: 960px) {

#publication-main {
    padding: 0 6rem 0 3rem;
}
  }

#publication-content {
  width: calc(100% - 3rem);
  margin: 0 auto;
}

@media screen {

#publication-content {
    max-width: 580px;
}
  }

.publication-page {
  margin-bottom: 4rem;
  min-height: 70vh;
}

@media screen {
    .publication-page.hidden {
      display: none;
    }
  }

.publication-page a {
    color: var(--color-turquoise);
  }

.publication-meta {
  font-style: italic;
}

.publication-extra {
  /* The gap above comes from the flow rules. */
  padding-top: 6rem;
  border-top: 1px solid #ccc;
}

.publication-extra > h4 {
    margin-bottom: 1em;
  }

.publication-link {
  margin-bottom: 4rem;
}

.publication-references {
  font-size: 0.85em;
}

.publication-references p {
    padding-left: 1.5em;
    text-indent: -1.5em;
  }

.publication-notes {
  font-size: 0.85em;
}

a[href="#notes"] {
  color: var(--color-turquoise);
  -webkit-text-decoration: none;
  text-decoration: none;
}

a[href="#notes"]:hover sup {
    -webkit-text-decoration: underline;
    text-decoration: underline;
  }

.publication-nav-links {
  display: flex;
  justify-content: space-between;
  
}

.publication-nav-links .prev,.publication-nav-links .next {
    position: relative;
    -webkit-text-decoration: none;
    text-decoration: none;
  }

.publication-nav-links .prev::after {
      position: absolute;
      top: 0;
    }

.publication-nav-links .next::after {
      position: absolute;
      top: 0;
    }

.publication-nav-links .prev:hover::after {
      transition: all 150ms ease;
    }

.publication-nav-links .next:hover::after {
      transition: all 150ms ease;
    }

.publication-nav-links .prev {
    padding-left: 1em;
  }

.publication-nav-links .prev::after {
      left: 0;
      content: "←";
    }

.publication-nav-links .prev:hover::after {
      left: -0.25em;
    }

.publication-nav-links .next {
    padding-right: 1em;
  }

.publication-nav-links .next::after {
      right: 0;
      content: "→";
    }

.publication-nav-links .next:hover::after {
      right: -0.25em;
    }

/*
 * /guide-for-co-creation-of-ethical-software/ — one long document with a
 * contents beside it.
 *
 * Spacing inside the text comes from `flow`, as everywhere else; what is here
 * is the two-column frame and the components the guide adds: part banners,
 * Mobifree callouts, value tables, the cycle diagram.
 *
 * The three parts are told apart by the colour of the rule above them: the
 * theory purple, the steps turquoise, the questions yellow. The callouts are
 * turquoise as well, as they are in the PDF, but they are a tinted block
 * rather than a rule, so the two do not read as the same thing.
 */

/* The text column, left-aligned on the same edge as the contents below. */

.guide-header > * {
    max-width: 820px;
  }

/* In the flow of the header the introduction is one paragraph among
     several; the 6rem it carries elsewhere would strand the byline. */

.guide-header .page-introduction {
    margin-bottom: 0;
  }

/* The byline is a block of its own under the lead, with the download
     button reading as part of it. */

.guide-header > .meta {
    margin-top: calc(2 * var(--leading));
    font-style: italic;
  }

#guide-wrapper {
  align-items: flex-start;
}

@media screen and (min-width: 900px) {

#guide-wrapper {
    display: flex;
    gap: 4rem;
}
  }

/* Holds the contents' height in the flow while the nav is pinned. Above the
   breakpoint it is not wanted at all: the nav has to be #guide-wrapper's own
   flex item, and its own sticky containing block. */
#guide-toc-slot {
  /* The gap under the contents belongs to the slot, not to the nav. On the
     nav it collapses through the slot and leaves with it when the nav pins,
     taking a line and a half of the page with it. */
  margin-bottom: calc(2 * var(--leading));
}
@media screen and (min-width: 900px) {
#guide-toc-slot {
    display: contents;
}
  }

#guide-toc {
  padding: 2rem;
  font-size: 1.5rem;
}

@media print {

#guide-toc {
    display: none;
}
  }

@media screen and (min-width: 900px) {

#guide-toc {
    position: sticky;
    /* Clear of the fixed site header. */
    top: 100px;
    flex: 0 0 300px;
}

    #guide-toc  > input {
      display: none;
    }
  }

/* Narrow screens: open at the head of the page, and pinned under the site
     header as a bar once you have scrolled past it. src/js/guide.js sets
     is-stuck; without it the contents simply stays open where it is. */

@media screen and (max-width: 899px) {
    #guide-toc.is-stuck {
      position: fixed;
      /* The site header is 5.2rem tall, in both its states. */
      top: 5.2rem;
      left: 0;
      right: 0;
      /* Under the header, over the text that runs beneath it. */
      z-index: 0;
      margin: 0;
      /* Aligned with the text column it sits above. */
      padding: 1.2rem 1rem;
      /* --box-color flattened: the page passes under, so it cannot be the
         translucent grey the boxes use elsewhere. */
      background: #f2f2f2;
      box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, 0.2);
    }

      @media (min-width: 680px) {
    #guide-toc.is-stuck {
        padding: 1.2rem 2rem;
    }
      }

      /* The box's skewed shadow is for a block sitting on the page, not for a
         bar with text moving beneath it. */
      #guide-toc.is-stuck::before,#guide-toc.is-stuck::after {
        display: none;
      }

      /* Invisible, over the bar, and the only thing that opens it — the same
         trick as the site header's menu. */
      #guide-toc.is-stuck  > input {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4.4rem;
        margin: 0;
        opacity: 0;
        cursor: pointer;
        z-index: 2;
      }

      #guide-toc.is-stuck .box-title {
        position: relative;
        padding-right: 2.5rem;
      }

      /* A chevron, down when shut and up when open. */
      #guide-toc.is-stuck .box-title::after {
        content: "";
        position: absolute;
        right: 0.5rem;
        top: 0.5rem;
        width: 0.9rem;
        height: 0.9rem;
        border-right: 2px solid var(--color-turquoise);
        border-bottom: 2px solid var(--color-turquoise);
        transform: rotate(45deg);
        transition: transform 150ms ease;
      }

      #guide-toc.is-stuck  > input:checked ~ .box-title::after {
        transform: rotate(-135deg);
      }

      #guide-toc.is-stuck  > ul {
        display: none;
      }

      #guide-toc.is-stuck  > input:checked ~ ul {
        display: block;
        /* The list is longer than a short screen, so opened it scrolls. */
        max-height: 60vh;
        overflow-y: auto;
      }

    /* Unpinned there is nothing to toggle: the list is simply open. */
    #guide-toc:not(.is-stuck) > input {
      display: none;
    }
  }

#guide-toc .box-title {
    font-size: 1.6rem;
    text-transform: lowercase;
    padding-bottom: 0.5rem;
  }

/* Two group titles, named for what is in them; the rule above each part
     carries the same colour. */

#guide-toc .guide-toc-part > a {
    font-weight: 700;
  }

#guide-toc ul {
    list-style: none;
    padding-left: 0;
    margin-top: var(--leading);
  }

#guide-toc ul ul {
    margin-top: 0.5rem;
    margin-left: 1rem;
    font-size: 0.95em;
  }

#guide-toc li {
    margin-top: 0.5rem;
    position: relative;
  }

#guide-toc a {
    color: #000;
    -webkit-text-decoration: none;
    text-decoration: none;
    display: block;
  }

#guide-toc a:hover {
      -webkit-text-decoration: underline;
      text-decoration: underline;
    }

/* The entry you are reading, and the part it belongs to. */

#guide-toc .current > a {
    font-weight: 700;
    color: var(--color-purple);
  }

#guide-toc .current > a::before {
    content: "→";
    position: absolute;
    right: calc(100% + 0.4rem);
  }

#guide-toc .current-part > a {
    color: var(--color-purple);
  }

.guide-toc-part {
  margin-top: var(--leading) !important;
}

#guide-main {
  max-width: 720px;
  /* Room for the contents to sit beside, once there is room for it. */
  min-width: 0;
}

.guide-section,
.guide-part {
  /* Anchors land clear of the fixed header. */
  scroll-margin-top: 10rem;
  /* The stylesheet gives a bare <section> most of a screen; these are the
     parts of one document, not the slides of a front page. */
  min-height: 0;
  margin-bottom: calc(4 * var(--leading));
}

@media print {

.guide-section,
.guide-part {
    page-break-inside: auto;
}
  }

/* The contents is a bar above the text here, not a column beside it, so an
     anchor has both it and the site header to clear. */

@media screen and (max-width: 899px) {

.guide-section,
.guide-part {
    scroll-margin-top: 12rem;
}
  }

/* The seam between theory and practice, and the title page of each. */
.guide-part {
  border-top: 0.6rem solid var(--guide-part-color, var(--color-purple));
  padding-top: var(--leading);
  margin-top: calc(5 * var(--leading));
}

.guide-part-practice {
  --guide-part-color: var(--color-turquoise);
}

/* The questions are a part in their own right rather than a seventh step, so
   they open the same way and carry the third colour of the palette. */
.guide-part-faq {
  --guide-part-color: var(--color-yellow);
}
.guide-part-faq > .guide-part-intro + * {
    margin-top: calc(3 * var(--leading));
  }

.guide-step-number {
  --guide-part-color: var(--color-turquoise);

  font-size: 1.6rem;
  font-weight: 700;
  color: var(--guide-part-color);
}

.guide-part-intro {
  font-size: 1.1em;
  max-width: 560px;
}

/* "step 5": the heading belongs to the label above it. */
.guide-step-number + * {
  margin-top: 0 !important;
}

/* "As a project manager…": the heading of the passage and the opening of its
   sentence at the same time, so it is set inline. */
.guide-role h4 {
    display: inline;
    color: var(--color-purple);
  }
.guide-role p {
    display: inline;
  }

/* "In Mobifree" — the worked example beside the instruction, turquoise as in
   the PDF. */
.guide-callout {
  background: rgba(47, 182, 188, 0.12);
  /* On the right, the side the label sits on. */
  border-right: 0.5rem solid var(--color-turquoise);
  padding: 2rem 2rem 3rem;
}
.guide-callout h5 {
    margin: 0;
    line-height: var(--leading);
    text-transform: lowercase;
  }
/* A sub-heading inside the callout opens a new stretch, like h3 does in
     running text. */
.guide-callout > * + h5 {
    margin-top: calc(2 * var(--leading));
  }

/* The project's own mark, signing off the box that introduces it. It carries
   its own air above, so it reads as a sign-off rather than as another block
   of the text. */
.guide-callout-logo {
  margin-top: calc(2 * var(--leading)) !important;
}
.guide-callout-logo a {
    display: inline-block;
  }
.guide-callout-logo img {
    display: block;
    width: 200px;
  }

/* The label is parked in the top right corner and the text sets around it, so
   the box reads from its own top edge rather than from under a heading. */
.guide-callout-title {
  float: right;
  margin-left: 2rem;
  margin-bottom: 2rem;
  text-transform: lowercase;
  color: var(--color-turquoise);
}

/* The flow rules would start the text a line below the label; floated, it
   belongs beside it. */
.guide-callout > .guide-callout-title + * {
  margin-top: 0;
}

/* In a column this narrow the label takes most of the first line, so it keeps
   the corner but gives up the wrap. */
@media (max-width: 560px) {
  .guide-callout-title {
    float: none;
    margin-left: 0;
    margin-bottom: 0;
    text-align: right;
  }

  .guide-callout > .guide-callout-title + * {
    margin-top: var(--leading);
  }
}

/* Named things with an explanation under them: the three development phases,
   the two kinds of stakeholder, exploratory versus focused. */
.guide-phases {
  /* Only the bottom: the gap above is the flow's to give, as for any other
     block in the running text. */
  margin-bottom: 0;
}
.guide-phases dt {
    font-weight: 700;
  }
.guide-phases dd {
    margin-left: 0;
  }
.guide-phases dt + dd {
    margin-top: 0;
  }
.guide-phases dd + dt {
    margin-top: var(--leading);
  }

.guide-framework {
  border: 1px solid #ccc;
  padding: calc(1.5 * var(--leading)) 2rem;
}

.guide-framework h4 {
    text-transform: lowercase;
    margin-bottom: var(--leading);
  }

.guide-framework ol > li + li {
    margin-top: var(--leading);
  }

.guide-framework ul {
    margin-top: 0.25rem;
  }

/* The value tables are read a row at a time — value, definition, quote,
   requirement — so the labels are row headings rather than a header row, and
   they keep working at any width. */
.guide-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95em;
  text-align: left;
}
.guide-table th,.guide-table td {
    padding: 0.75rem 0;
    vertical-align: top;
    border-top: 1px solid rgba(0, 0, 0, 0.15);
  }
.guide-table th {
    width: 10em;
    padding-right: 2rem;
    font-weight: 700;
  }
.guide-table q {
    font-style: italic;
  }
.guide-table p + p {
    margin-top: var(--leading);
  }
@media (max-width: 560px) {
    .guide-table th,.guide-table td {
      display: block;
      width: auto;
      padding-right: 0;
    }

    .guide-table td {
      border-top: 0;
      padding-top: 0;
    }
  }

.guide-pull {
  font-size: 1.25em;
  line-height: 1.35;
  color: var(--color-purple);
  border-left: 0.5rem solid var(--color-purple);
  padding-left: 2rem;
  max-width: 600px;
}

/* The questions are a <details> each, so they open and close on their own and
   any number can be open at once — no `name`, which would make them
   exclusive, and no script. */
.guide-faq {
  border-top: 1px solid #ccc;
  padding-top: var(--leading);
  padding-bottom: var(--leading);

  /* A list of rules, so the rows meet rather than float apart. */
}
.guide-faq + .guide-faq {
    margin-top: 0;
  }
.guide-faq:last-of-type {
    border-bottom: 1px solid #ccc;
  }
.guide-faq h3 {
    color: var(--color-purple);
  }
.guide-faq > summary {
    position: relative;
    /* Room for the chevron. */
    padding-right: 3rem;
    cursor: pointer;
    /* The browser's own disclosure triangle, twice: `list-style` is the
       standard spelling, the pseudo-element is Safari's. */
    list-style: none;
  }
.guide-faq > summary::-webkit-details-marker {
      display: none;
    }
/* A chevron, down when shut and up when open, as on the contents. */
.guide-faq > summary::after {
      content: "";
      position: absolute;
      right: 0.5rem;
      top: 0.55em;
      width: 0.9rem;
      height: 0.9rem;
      border-right: 2px solid var(--color-purple);
      border-bottom: 2px solid var(--color-purple);
      transform: rotate(45deg);
      transition: transform 150ms ease;
    }
.guide-faq > summary:hover h3 {
      -webkit-text-decoration: underline;
      text-decoration: underline;
    }
.guide-faq[open] > summary::after {
    transform: rotate(-135deg);
  }
.guide-faq > .guide-faq-answer {
    margin-top: var(--leading);
  }

.guide-colophon {
  border-top: 1px solid #ccc;
  padding-top: calc(2 * var(--leading));
  font-size: 0.9em;
}

/* ------------------------------------------------------- the cycle diagram */

.guide-figure {
  margin: 0;
}

.guide-figure figcaption {
    font-size: 0.85em;
    color: #555;
    margin-top: var(--leading);
  }

/* Shrunk to the width of a phone the labels become unreadable, so below
   that the drawing keeps a legible size and is panned instead. */
.guide-figure-scroll {
  overflow-x: auto;
}
.guide-figure-scroll:focus-visible {
    outline-offset: 4px;
  }

.vsd-cycle {
  display: block;
  width: 100%;
  height: auto;
  min-width: 580px;
}

.vsd-cycle .vsd-flows {
    stroke: #c4c4c4;
    stroke-width: 8;
    stroke-linejoin: miter;
  }

/* The caret is stroked, not filled, and at the weight of the line it ends. */

.vsd-cycle #vsd-arrowhead path {
    fill: none;
    stroke: #c4c4c4;
    stroke-width: 8;
  }

.vsd-cycle .vsd-node rect {
    fill: var(--vsd-node-color, #000);
  }

.vsd-cycle .vsd-node text {
    font-family: inherit;
    font-size: 19px;
    font-weight: 700;
    fill: #fff;
  }

/* The steps value sensitive design adds to the cycle. Recolouring the
     diagram is these two declarations. */

.vsd-cycle .vsd-node[data-phase="value-sensitive-design"] {
    --vsd-node-color: var(--color-purple);
  }

/* The development sprint has no box, so its label is drawn on the page. */

.vsd-cycle .vsd-node-open text {
    fill: #000;
  }

/* The guide's card on /public-stack-tools/, where the other tools show a
   photograph. */
.item-figure {
  background: #fff;
  padding: 1.5rem;
}
/*
 * Rules added after the port. The other partials are a faithful conversion of
 * the previous site's Sass and are best left that way, so anything new belongs
 * in this file. See MIGRATION.md.
 */

/* The front page's phone and stack columns stay put while you scroll past
 * them.
 *
 * overflow: clip rather than the `overflow: hidden` these sections inherit
 * from #front-page: `hidden` makes an ancestor a scroll container, which
 * leaves a sticky descendant with nothing to stick to. `clip` still clips.
 * The selector has to out-specify `#front-page section` to win.
 */
#front-page #front-layer-explanation,
#front-page #front-stacks {
  overflow: clip;
}

[data-scroll-pin] {
  position: sticky;
  /* 66px, where the animation starts relative to the section, plus the 20px
   * of padding .row puts above the column. */
  top: 86px;
  align-self: flex-start;
}

/* Below 480px three stills replace the animated phone. */
.small-screen-only {
  display: none;
}

/* The stills precede the text, so the paragraph after them stops being
 * :first-child and picks up the 1em top margin that p carries. While the
 * stills are hidden the paragraph really is the first thing in the block. */
.small-screen-only + p {
  margin-top: 0;
}

@media (max-width: 480px) {
  /* contents, not block: the stylesheet centres the stills as flex children
   * of .text-part, so the wrapper has to get out of the layout's way. */
  .small-screen-only {
    display: contents;
  }

  .small-screen-only + p {
    margin-top: var(--leading);
  }

  [data-scroll-pin] {
    display: none;
  }
}

/* Without this the domain illustrations and the initiative logos overflow the
 * fixed-width boxes the layout sizes for them. */
img {
  max-width: 100%;
  height: auto;
}

/* Footnotes.
 *
 * A marker in the text links to its note and the note links back. The marker
 * borrows the styling the stylesheet already had waiting for a[href="#notes"]:
 * turquoise, and underlined only on hover, so a page of citations does not
 * turn into a page of underlines.
 */
.note-ref,
.note-backlink {
  color: var(--color-turquoise);
  -webkit-text-decoration: none;
  text-decoration: none;
}

.note-ref:hover,
.note-backlink:hover {
  -webkit-text-decoration: underline;
  text-decoration: underline;
}

.note-backlink {
  /* Large enough to be a comfortable target, without disturbing the line. */
  padding: 0 0.25em;
  font-size: 1.1em;
  line-height: 1;
}

/* Following a footnote link moves focus to its target. On something as small
 * as a superscript digit the ring lands on top of the glyph, so push it off. */
.note-ref:focus-visible,
.note-backlink:focus-visible {
  outline-offset: 3px;
  border-radius: 2px;
}

/* Landing in a list of fifty-odd notes, it helps to see which one. A wash of
 * --color-turquoise, faint enough that the links inside stay legible. */
.publication-notes li:target {
  background: rgba(47, 182, 188, 0.14);
  box-shadow: 0 0 0 0.3em rgba(47, 182, 188, 0.14);
  border-radius: 1px;
}

/* The notes are a tight list, so the breathing room between them comes from
 * here rather than from paragraph margins. */
.publication-notes li + li {
  margin-top: 0.75em;
}

/* Jumping to a footnote should not leave it tucked under the fixed header.
 * The script does its own offsetting; this covers the browser's, and the
 * no-JavaScript case. */
.publication-notes li:target {
  scroll-margin-top: 7rem;
}

.note-ref:target {
  scroll-margin-top: 14rem;
}

/* The canvas page stacks download buttons as paragraphs, so the first one
 * wants the gap after a heading that a paragraph of prose would not. */
.row.center.flow > h3 + p {
  margin-top: var(--leading);
}

/* Every tool page opens by saying what it is, and linking back to the rest.
 *
 * It sits where the title's own top margin would be, and the title then adds
 * none of its own, so the pair reads as one block wherever it is used.
 */
.page-eyebrow {
  margin: 4rem 0 0;
  font-size: 1.4rem;
  text-transform: lowercase;
}
.page-eyebrow a {
    color: var(--color-purple);
    -webkit-text-decoration: none;
    text-decoration: none;
  }
.page-eyebrow a:hover {
      -webkit-text-decoration: underline;
      text-decoration: underline;
    }

.page-eyebrow + .page-title {
  margin-top: 0;
}

@media print {
  .no-print {
    display: none;
  }

  body {
    font-size: 14px;
  }

  section {
    margin-bottom: 2rem;

    page-break-inside: avoid;
  }

  h1 {
    max-width: none;
    font-size: 4rem !important;
  }

  h2 {
    font-size: 3.4rem !important;
  }

  .page-introduction {
    font-size: 1em;
    margin-bottom: 2rem;
  }

}