@charset "UTF-8";
@font-face {
  font-display: swap;
  font-family: "Source Serif";
  font-weight: 200 900;
  font-style: normal;
  font-stretch: normal;
  src: url("../type/source-serif.var.woff2") format("woff2-variations");
}
@font-face {
  font-display: swap;
  font-family: "Source Serif";
  font-weight: 200 900;
  font-style: italic;
  font-stretch: normal;
  src: url("../type/source-serif-italic.var.woff2") format("woff2-variations");
}
@font-face {
  font-display: swap;
  font-family: "Rubik";
  font-weight: 200 900;
  font-style: normal;
  font-stretch: normal;
  src: url("../type/rubik.var.woff2") format("woff2-variations");
}
@font-face {
  font-display: swap;
  font-family: "Rubik";
  font-weight: 200 900;
  font-style: italic;
  font-stretch: normal;
  src: url("../type/rubik-italic.var.woff2") format("woff2-variations");
}
:root {
  --theme-radius: 0.125rem;
  /* General control for vertical flow between elements */
  --gap-flow: 1em;
  --gap-flow-least: calc( var(--gap-flow) * 0.5 );
  --gap-flow-less: calc( var(--gap-flow) * 0.75 );
  --gap-flow-more: calc( var(--gap-flow) * 1.5 );
  --gap-flow-most: calc( var(--gap-flow) * 3.5 );
  --content-linelength: 45rem;
  /* Tokens */
  --color-black: #303030;
  --color-black-deep: #222;
  --color-blue: #18278A;
  --color-blue-light: #B8E0FF;
  --color-gray: #999;
  --color-gray-dark: #595959;
  --color-gray-light: #CCC;
  --color-orange: #E94A29;
  --color-orange-mid: #D73717;
  --color-orange-faded: #FFF8F7;
  --color-orange-rusted: #B93C22;
  --color-tan: #F6F5F0;
  --color-white: #FFF;
  --color-yellow: #FFF4E0;
  --theme-bg-default: var(--color-white);
  --theme-color-border: var(--color-gray-light);
  --theme-color-brand-faded: var(--color-orange-faded);
  --theme-color-brand: var(--color-orange);
  --theme-color-accent: var(--color-yellow);
  --theme-color-document: var(--color-tan);
  --theme-color-footer: var(--color-black);
  --theme-color-info: var(--color-blue-light);
  --theme-color-link: var(--color-orange-rusted);
  --theme-color-link-nav: var(--color-orange-mid);
  --theme-color-link-info: var(--color-blue);
  --theme-color-page: var(--color-white);
  --theme-color-text-faded: var(--color-gray);
  --theme-color-text-ink: var(--color-black);
  --theme-color-text-light: var(--color-gray-dark);
  --theme-color-text-emphasis: var(--color-black-deep);
  --theme-font-sans: 'Rubik', system-ui, sans-serif;
  --theme-font-serif: 'DejaVu Serif', 'Source Serif', Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif;
}

@view-transition {
  navigation: auto;
}
html,
body {
  margin: 0;
  min-height: 100vh;
}

@media (prefers-reduced-motion: no-preference) {
  html,
  body {
    scroll-behavior: smooth;
  }
}
html {
  font-size: 100%;
  scroll-padding-top: 2rem;
}

@media (min-width: 70em) {
  html:has(table.table-timeline),
  html:has(body.issue-multipage) {
    scroll-padding-top: 9rem;
  }
}
body {
  color: var(--theme-color-text-ink);
  font: normal 100%/1.5 var(--theme-font-serif);
}

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

a:hover,
a:focus {
  color: var(--theme-color-brand);
  text-decoration: none;
}

:focus-visible {
  outline: 2px solid var(--focus-color, currentColor);
  outline-offset: 0.25em;
}

button {
  background-color: #C13214;
  color: #FFF;
  cursor: pointer;
  border: none;
}

fieldset,
input[type=text],
button {
  appearance: none;
  font-family: var(--theme-font-sans);
  font-size: inherit;
  border: none;
}

[hidden],
template {
  display: none;
}

/*

Utility classes

*/
.squelch {
  display: none;
}

.sr-only:not(:focus):not(:active) {
  clip: rect(0 0 0 0);
  clip-path: inset(100%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.flow > *,
.flow-more > *,
.flow-most > *,
blockquote > * {
  margin-bottom: 0;
  margin-top: 0;
}

.flow > * + *,
blockquote > * + * {
  margin-top: var(--gap-flow);
}

.flow-less > * + * {
  margin-top: var(--gap-flow-less);
}

.flow-least > * + * {
  margin-top: var(--gap-flow-least);
}

.flow-more > * + * {
  margin-top: var(--gap-flow-more);
}

.flow-most > * + * {
  margin-top: var(--gap-flow-most);
}

/*

Link styles

*/
.link-more {
  font-weight: 600;
}

.link-more::after {
  content: " →";
}

.link-footnote {
  font-family: var(--theme-font-sans);
  font-size: 0.9em;
  font-weight: bold;
  text-decoration: none;
}

.link-skipnav {
  background: var(--theme-color-text-ink);
  background: oklch(from var(--theme-color-text-ink) l c h/0.85);
  font-size: 1.5em;
  font-style: italic;
  font-weight: 500;
  left: 0;
  outline-offset: 0;
  padding: 1em;
  position: absolute;
  right: 0;
  text-align: center;
  top: 0;
  z-index: 1000;
}

.link-skipnav,
.link-skipnav:focus {
  color: var(--theme-color-page);
}

.link-skipnav:focus-visible {
  outline: none;
}

/*

List styles

*/
.list-plain,
.list-plain-inline {
  list-style: none;
  padding-left: 0;
}

.list-plain-inline li {
  display: inline-block;
}

/*

Layout

*/
:root {
  --gutter-left: 1rem;
}

@media (min-width: 70em) {
  :root {
    --gutter-left: 3.125rem;
  }
}
html {
  background-color: var(--theme-color-document);
  padding: 1rem 0 0 1rem;
}

@media (min-width: 50em) {
  html {
    padding: 20px 0 0 35px;
  }
}
body {
  background: var(--theme-color-page);
  box-shadow: -20px 20px 0 rgba(48, 48, 48, 0.2);
  padding-top: 20px;
}

main {
  margin: clamp(1.25rem, -0.7955rem + 9.0909vw, 6.25rem) 0; /* 20px / 100px */
}

.stage {
  display: grid;
  grid-template-columns: [full-start content-start aside-start] 1fr [content-end aside-end full-end];
  column-gap: 5%;
  max-width: 81rem;
  padding-left: var(--gutter-left);
  padding-right: 1rem;
}

@media (min-width: 60em) {
  .stage {
    grid-template-columns: [full-start content-start] 2.5fr [content-end aside-start] 1fr [aside-end full-end];
  }
}
@media (min-width: 70em) {
  .stage {
    grid-template-columns: [full-start content-start] 1fr 1fr [content-end aside-start] 1fr [aside-end full-end];
  }
}
.page-full,
.page-main,
.page-secondary {
  margin-top: 1.5rem;
}

.page-full,
.page-main {
  font-size: 1.125rem;
  font-size: clamp(0.9375rem, 0.8723rem + 0.3261vw, 1.125rem); /* 15px–18px */
}

.page-full {
  grid-column: full;
}

.page-main {
  grid-column: content;
  max-width: 38em;
}

.tmpl-home .page-main {
  line-height: 1.3;
  font-size: 2rem;
  font-size: clamp(1.25rem, 0.9891rem + 1.3043vw, 2rem); /* 18px–32px */
}

.tmpl-home .page-main > *:not([class]) {
  max-width: 50rem;
}

.whomst {
  font-size: 1.5rem;
  font-size: clamp(1.125rem, 0.9946rem + 0.6522vw, 1.5rem); /* 18px–24px */
  line-height: 1.5;
  margin: var(--gap-flow-most) 0;
  text-wrap: balance;
}

/*

Content styles

*/
hr {
  border: none;
  height: 1px;
  background-color: var(--theme-color-text-faded);
}

h1 strong,
h2 strong,
h3 strong,
h4 strong,
h5 strong,
h6 strong {
  font-weight: inherit;
}

h2,
h3,
h4,
h5,
h6 {
  font-family: var(--theme-font-sans);
}

h2,
h3,
h4 {
  line-height: 1.3;
}

h2 {
  font-size: 1.875rem;
  font-size: clamp(1.25rem, 1.0326rem + 1.087vw, 1.875rem);
  font-weight: 400;
}

h2:not([class]):not(:first-child) {
  margin-top: var(--gap-flow-more);
}

main h2 + :not([class]) {
  margin-top: var(--gap-flow);
}

h3 {
  font-size: 1.25rem;
  font-weight: 500;
}

h4,
h5,
h6 {
  font-weight: 400;
}

h4 {
  font-size: 1.25rem;
}

main h4 + :not([class]) {
  margin-top: var(--gap-flow-least);
}

h5 {
  font-size: 1.1rem;
}

main h5 + :not([class]) {
  margin-top: var(--gap-flow-least);
}

.tmpl-issue h3:not([class]) {
  margin-top: var(--gap-flow-more);
  text-transform: uppercase;
  text-wrap: balance;
  text-wrap: pretty;
}

.tmpl-issue h3 + p:has(em:first-child:last-child) {
  margin-top: var(--gap-flow-least);
}

.tmpl-issue h4,
.tmpl-issue h5,
.tmpl-issue h6 {
  font-weight: 450;
}

[data-hed-linked] {
  align-items: baseline;
  display: flex;
  justify-content: space-between;
}

.hed-link {
  background-color: var(--theme-color-text-faded);
  border-radius: 50%;
  display: inline-flex;
  flex-shrink: 0;
  height: 1.1rem;
  justify-content: center;
  margin-left: var(--gap-flow-least);
  margin-top: 0.2em;
  padding: 0.2rem;
  transition: background-color 0.2s;
  width: 1.1rem;
}

.hed-link:hover,
.hed-link:focus {
  background-color: var(--theme-color-link);
}

.hed-link-icon {
  display: inline-block;
  height: auto;
  max-width: 100%;
  width: 1.2rem;
}

.link-read-more {
  display: inline-block;
  font-style: italic;
}

.link-read-more::after {
  content: " »";
  display: inline-block;
  font-weight: normal;
}

a[href^="#"] strong {
  font-weight: inherit;
}

.page-main ul:not([class]) {
  padding-left: 1em;
}

.page-main ul:not([class]) ul,
.page-main ul:not([class]) li + li {
  margin-top: calc(0.25 * var(--gap-flow));
}

.page-main ul:not([class]) li::marker {
  font-size: 0.8em;
}

.page-main ul:not([class]) li {
  padding-left: 0.5em;
}

.promo-subscribe {
  background-blend-mode: soft-light;
  background: #304357 url("../img/aperture.svg") no-repeat 20% 75%/auto clamp(700px, 60vw, 1200px) fixed;
  border-radius: var(--theme-radius);
  color: #FFF;
  font-size: 1.5rem;
  margin-top: var(--gap-flow-most);
  padding-left: calc(var(--gap-flow) + var(--gutter-left));
  padding: var(--gap-flow);
}

@media (min-width: 50em) {
  .promo-subscribe {
    padding-left: var(--gap-flow);
  }
}
.subscribe-intro {
  font-style: italic;
}

.promo-subscribe fieldset {
  border: none;
  padding: 0;
  font-size: 1rem;
}

.promo-subscribe label {
  display: block;
  margin-bottom: 0.5em;
}

.promo-subscribe input,
.promo-subscribe button {
  --focus-color: var(--theme-color-accent);
}

.group-inset-button {
  display: flex;
  flex-wrap: wrap;
  row-gap: var(--gap-flow-least);
}

.group-inset-button > * {
  padding: 0.75em;
}

.group-inset-button > :first-child {
  border-radius: var(--theme-radius) 0 0 var(--theme-radius);
  flex: 1;
}

.group-inset-button > :last-child {
  border-radius: 0 var(--theme-radius) var(--theme-radius) 0;
}

.group-inset-button button {
  padding-left: 1em;
  padding-right: 1em;
}

table {
  font-family: var(--theme-font-sans);
  border-collapse: collapse;
  font-size: 0.9em;
}

table,
th,
td {
  border: 1px solid var(--theme-color-border);
}

th,
td {
  padding: var(--gap-flow-least);
  text-align: left;
  vertical-align: top;
}

/*

Timeline styles

*/
.timeline-filters {
  background: var(--theme-bg-default);
  border-bottom: 1px solid var(--theme-color-border);
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-flow-least);
  justify-content: space-between;
  padding: var(--gap-flow-least) 0 var(--gap-flow);
  position: sticky;
  top: 0;
  z-index: 10;
}

.filter-menu-outer {
  flex: 1;
  position: relative;
}

.timeline-filters button {
  align-self: start;
  margin: 0.35em;
}

.filter-menu {
  background: var(--theme-bg-default);
  border-radius: 0.25em;
  border: 1px solid var(--theme-color-border);
  box-shadow: 0 0.25em 0.25em rgba(0, 0, 0, 0.25);
  font-size: 1rem;
  max-height: 25em;
  max-width: 30em;
  overflow: auto;
  padding: 0 var(--gap-flow) var(--gap-flow-least);
  position: absolute;
  top: 100%;
  width: 70vw;
  z-index: 10;
}

.hed-submenu {
  background: var(--theme-bg-default);
  border-bottom: 1px solid var(--theme-color-border);
  font-size: 1em;
  padding-block: var(--gap-flow-less) var(--gap-flow-least);
  margin-block: 0 var(--gap-flow-least);
  position: sticky;
  top: 0;
}

.btn-icon {
  background-color: #EEE;
  background-position: calc(100% - 0.75em) 50%;
  background-repeat: no-repeat;
  background-size: 24px auto;
  border-radius: 0.25em;
  font-size: 1rem;
  padding: 0.75em 3em 0.75em 0.75em;
  color: var(--theme-color-text-ink);
}

.btn-icon:hover,
.btn-icon:focus {
  background-color: var(--theme-color-border);
}

.icon-cancel {
  background-image: url("../img/icon-cancel.svg");
}

.icon-filtermenu {
  background-image: url("../img/icon-filter.svg");
}

.status-timeline {
  flex: 1 0 100%;
  font-family: var(--theme-font-sans);
  font-size: 1rem;
  padding-top: 0.75em;
}

.btn-timeline-filter {
  background: inherit;
  border: 1px solid var(--theme-color-border);
  border-radius: 0.15em;
  color: var(--theme-color-text-light);
  cursor: pointer;
  padding: 0.35em;
  text-align: left;
}

.btn-timeline-filter:hover,
.btn-timeline-filter:focus {
  color: var(--theme-color-text-emphasis);
  text-decoration: underline;
  text-underline-offset: 0.1em;
}

.btn-timeline-filter:focus {
  outline: 1px solid;
}

.btn-timeline-filter[aria-pressed=true] {
  background-color: var(--theme-color-text-light);
  color: #FFF;
  border-color: transparent;
}

.case-filter:before,
.tag-filter:before {
  margin-right: 0.15em;
}

.tag-filter:before {
  content: "#";
}

.case-filter:before {
  content: "§";
}

.table-timeline,
.table-timeline th,
.table-timeline td {
  border: none;
  padding: 0;
}

.table-timeline {
  margin: var(--gap-flow-most) 0;
  max-width: 40em;
  width: 100%;
}

.table-timeline th {
  font-weight: 500;
  padding-right: 1.5em;
  text-align: right;
  white-space: nowrap;
}

.table-timeline td:first-of-type {
  padding-bottom: 2.25em;
  padding-left: 1.5em;
  position: relative;
}

.table-timeline tr:last-child td {
  padding-bottom: 0;
}

.table-timeline td:before {
  border: 3px solid var(--theme-color-text-ink);
  background-color: var(--theme-color-page);
  border-radius: 50%;
  content: "";
  position: absolute;
  left: -6px;
  top: 0.35em;
  width: 6px;
  height: 6px;
  z-index: 1;
}

.table-timeline tr:not(:last-child):not(.timeline-last) td:after {
  background-color: var(--theme-color-text-ink);
  content: "";
  position: absolute;
  left: -3px;
  top: 0.4em;
  bottom: -0.4em;
  width: 6px;
}

.row-filters {
  margin-top: var(--gap-flow-less);
  display: flex;
  flex-wrap: wrap;
  gap: 0.35em;
}

@media (max-width: 30em) {
  .table-timeline tr:not(.squelch),
  .table-timeline th,
  .table-timeline td {
    display: block;
  }
  .table-timeline th {
    text-align: left;
    padding-right: 0;
    padding-left: 1.5em;
  }
  .table-timeline th:not(.sr-only) + td:before {
    top: -1.2em;
  }
  .table-timeline tr:not(:last-child) td:after {
    top: -0.5em;
  }
  .table-timeline td:before {
    left: 0;
  }
  .table-timeline tr:not(:last-child):not(.timeline-last) td:after {
    left: 3px;
  }
  .table-timeline tr:not(:last-child) th:not(.sr-only) + td:after {
    top: -0.75em;
  }
}
/*

Issue listing

*/
.issue-list {
  list-style: none;
  padding-left: 0;
}

.issue-item {
  padding: var(--gap-flow-less) 0;
}

.issue-item + .issue-item {
  border-top: 1px solid var(--theme-color-text-faded);
}

.issue-link {
  display: block;
  font-size: 1.15em;
  line-height: 1.2;
  max-width: 20em;
  text-wrap: balance;
  text-wrap: pretty;
}

/*

Non-issue pages

*/
.page-title,
.issue-title {
  display: flex;
  flex-direction: column;
  font-size: 4.5rem;
  font-size: clamp(2.25rem, 1.4674rem + 3.913vw, 4.5rem);
  font-weight: normal;
  grid-column: content;
  line-height: 1;
  margin: 0;
  text-wrap: balance;
}

.tmpl-home .page-title {
  font-size: 3rem;
  font-size: clamp(1.5rem, 0.9783rem + 2.6087vw, 3rem);
  height: auto;
  line-height: 1.15;
  margin: 0;
}

.page-subtitle {
  grid-column: content;
  font-size: 2rem;
  font-style: italic;
  line-height: 1.3;
  margin: 1rem 0 0;
}

/*

Issue pages

*/
@media (min-width: 70em) {
  .tmpl-issue main.stage {
    grid-auto-flow: dense;
    grid-template-columns: [full-start aside-start] 1fr [aside-end content-start] 1fr 1fr [content-end full-end];
  }
  .tmpl-issue .page-main {
    grid-row: span 3;
    max-width: inherit;
    padding-top: var(--gap-flow);
  }
  .tmpl-issue .page-main > :not(h2, h3, h4, h5, h6, .issue-summary) {
    max-width: 38em;
  }
}
.issue-title {
  font-weight: bold;
}

@media (min-width: 70em) {
  .issue-title {
    align-self: start;
    display: block;
    font-size: 2.5rem;
    font-size: clamp(1.25rem, 0.7386rem + 2.2727vw, 2.5rem);
    grid-column: aside;
    grid-row: 1;
    line-height: 1.2;
    min-height: 3.5em;
  }
  .issue-multipage .issue-title {
    grid-row-end: span 2;
  }
}
.issue-subtitle {
  font-weight: normal;
}

.hed-subsection {
  border-bottom: 1px solid var(--theme-color-border);
  font-size: 0.875em; /* 14/16 */
  font-weight: 500;
  margin: 0;
  padding-bottom: var(--gap-flow-less);
  text-transform: uppercase;
}

/*
Page intro
*/
.issue-summary {
  margin: 0 0 var(--gap-flow-more);
  border-bottom: 1px solid var(--theme-color-border);
  padding-bottom: var(--gap-flow-most);
}

.hed-summary {
  font-family: var(--theme-font-serif);
  font-weight: bold;
  font-size: 2em;
}

.issue-summary > :not(.hed-summary) {
  font-size: 1.35rem;
  font-size: clamp(1.125rem, 1.0598rem + 0.3261vw, 1.3125rem);
}

/*
Meta block
*/
.issue-meta {
  column-gap: var(--gap-flow);
  row-gap: var(--gap-flow-least);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.tmpl-issue .issue-meta {
  grid-column: content;
  margin-bottom: var(--gap-flow-more);
  padding-bottom: var(--gap-flow-more);
}

@media (min-width: 70em) {
  .tmpl-issue .issue-meta {
    align-self: start;
    border-top: none;
    margin-bottom: 0;
    margin-top: 0;
    padding-top: var(--gap-flow-more);
  }
  .issue-single .issue-meta {
    border-bottom: 1px solid var(--theme-color-border);
  }
}
.issue-meta-item,
.issue-meta-item > * {
  margin: 0;
}

.issue-meta-item {
  display: flex;
  font-family: var(--theme-font-sans);
  font-size: 0.875rem;
  gap: var(--gap-flow-more);
}

.issue-meta-item:first-child {
  flex: 1 0 20em;
}

.issue-status .issue-meta-value {
  font-weight: 600;
  text-transform: uppercase;
}

.issue-status-badge {
  background-color: var(--theme-color-text-faded);
  border-radius: 50%;
  display: inline-block;
  height: 1.2em;
  width: 1.2em;
  vertical-align: -0.25em;
  margin-right: 0.25em;
}

.status-stub[class] {
  background: url("/static/img/soon.svg") no-repeat;
}

.status-threatened {
  background-color: #F9D313;
}

.status-endangered {
  background-color: #FFA629;
}

.status-critically-endangered {
  background-color: #E94A29;
}

.issue-nav {
  font-family: var(--theme-font-sans);
  grid-column: content;
}

@media (min-width: 70em) {
  .issue-nav {
    padding-top: var(--gap-flow-more);
    margin-top: 0;
  }
}
.issue-nav .hed-subsection {
  margin-top: var(--gap-flow-more);
}

.issue-nav-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-flow-less) var(--gap-flow-more);
  font-size: 1.25em;
  margin: var(--gap-flow-less) 0;
}

.issue-nav-link {
  display: block;
  padding: 0;
}

.issue-nav-link[aria-current=page] {
  color: var(--theme-color-text-ink);
  font-weight: 500;
  text-decoration: none;
}

.nav-section {
  align-items: baseline;
  flex-wrap: wrap;
  font-size: 0.875em;
  grid-column: content;
  margin-bottom: var(--gap-flow-most);
}

.nav-section-hed {
  font-family: var(--theme-font-serif);
  font-size: inherit;
  font-weight: normal;
  font-style: italic;
}

.nav-section,
.nav-section-hed,
.nav-section-list {
  display: flex;
}

.nav-section {
  gap: var(--gap-flow-more) var(--gap-flow-most);
}

.nav-section-hed {
  gap: var(--gap-flow-most);
}

.nav-section-list {
  gap: var(--gap-flow-more);
  flex-wrap: wrap;
}

.nav-section > * {
  margin: 0;
}

.nav-section-hed:after {
  align-self: center;
  background: var(--theme-color-text-ink);
  content: "";
  display: block;
  height: 3px;
  width: 90px;
}

.nav-section-list {
  font-family: var(--theme-font-sans);
}

.nav-section-link[aria-current=page] {
  color: var(--theme-color-text-ink);
  font-weight: bold;
  text-decoration: none;
}

/*

Header

*/
.site-header {
  background-color: var(--theme-color-brand-faded);
  padding: var(--gap-flow-less) 0 0;
}

@media (min-width: 60em) {
  .site-header {
    padding-bottom: var(--gap-flow-less);
  }
}
.site-header .stage {
  align-items: center;
}

.site-logo {
  color: var(--theme-color-brand);
  display: block;
  width: 175px;
}

@media (min-width: 60em) {
  .site-nav {
    grid-column-end: span 2;
  }
}
.site-nav-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-flow) var(--gap-flow-more);
  font-family: var(--theme-font-sans);
  text-transform: uppercase;
  padding: 0;
}

.site-nav-link {
  color: var(--theme-color-text-ink);
  font-size: 0.875rem;
  text-decoration: none;
}

.site-nav-link[aria-current] {
  color: var(--theme-color-link-nav);
  font-weight: 600;
}

/*

“What is this?” promo blocks

*/
.about-unbreaking {
  background-color: var(--theme-color-accent);
  font-size: 1rem;
  padding: 1.5em;
}

@media (min-width: 40em) {
  .about-unbreaking {
    padding: 2em;
  }
}
.about-unbreaking--lead {
  grid-column: content;
}

.about-unbreaking > * {
  max-width: var(--content-linelength);
}

.about-unbreaking h2 {
  font-size: inherit;
  font-weight: 600;
  text-transform: uppercase;
  margin: 0;
}

.about-unbreaking h2 + * {
  margin-top: 0;
}

@media (min-width: 70em) {
  .about-unbreaking {
    margin-left: -2em;
  }
}
@media (min-width: 90em) {
  .about-unbreaking {
    margin-right: -2em;
  }
}
/*

Blog

*/
.blog-list {
  margin: var(--gap-flow-most) 0;
}

.blog-list > * + * {
  border-top: 1px solid var(--theme-color-border);
  padding-top: var(--gap-flow-more);
  margin-top: var(--gap-flow-more);
}

.blog-date {
  font-family: var(--theme-font-sans);
  font-size: 0.875rem;
}

.blog-title {
  font-family: inherit;
  font-weight: normal;
  margin: 0;
}

.blog-date,
.blog-byline {
  font-family: var(--theme-font-sans);
  font-size: 0.875rem;
}

.blog-preview {
  margin-top: 0.25em;
}

.blog-byline,
.blog-nav {
  border-top: 1px solid var(--theme-color-border);
  padding: var(--gap-flow) 0;
}

.blog-nav {
  font-family: var(--theme-font-sans);
  margin-top: var(--gap-flow-most);
}

.nav-posts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-flow);
  justify-content: space-between;
}

/*

Contributors list

*/
.contributors-list {
  --content-linelength: 30em;
  display: grid;
  gap: var(--gap-flow-most);
  grid-template-columns: repeat(auto-fit, minmax(18em, 1fr));
  margin: var(--gap-flow-most) 0;
}

.contributor {
  max-width: var(--content-linelength);
}

.contributor-meta {
  align-items: flex-end;
  display: flex;
  gap: var(--gap-flow);
  justify-content: space-between;
  min-height: 85px;
}

.contributor-avatar {
  object-fit: cover;
}

.contributor-name {
  font-weight: 500;
  margin: 0;
}

.contributor-bio {
  font-family: var(--theme-font-sans);
  font-size: 0.9em;
}

/*

QR CODE — PRINT ONLY

*/
.qr-code {
  display: none;
}

/*

Footnotes

*/
.footnote-ref {
  font-weight: normal;
  line-height: 1;
  margin: 0 0.2em;
}

.link-footnote {
  font-weight: normal;
}

.link-footnote:before,
.link-footnote:after {
  color: var(--theme-color-text-faded);
}

.link-footnote:before {
  content: "[";
}

.link-footnote:after {
  content: "]";
}

.link-footnote:focus-within:before,
.link-footnote:focus-within:after {
  color: var(--theme-color-link);
}

.link-footnote:focus-within:before {
  content: "[ ";
}

.link-footnote:focus-within:after {
  content: " ]";
}

.footnotes {
  border-top: 1px solid var(--theme-color-text-faded);
  margin: var(--gap-flow-most) 0;
  padding-top: var(--gap-flow-most);
}

.footnotes-hed {
  font-family: var(--theme-font-serif);
  font-size: 1.4rem;
  font-weight: normal;
}

.page-main .footnotes-hed {
  margin-top: 0;
}

.footnotes-list {
  counter-reset: footnotes;
  font-family: var(--theme-font-sans);
  font-size: 0.9em;
  line-height: 1.4;
  list-style: none;
  padding-left: 0;
  max-width: 40em;
}

.footnotes-item {
  counter-increment: footnotes;
  display: grid;
  grid-template-columns: [bullet-start] 2rem [bullet-end content-start] 1fr [content-end];
  gap: 0.75em;
  padding: var(--gap-flow-least) 0;
}

.footnotes-item:before {
  content: counter(footnotes) ".";
  grid-column: bullet;
  text-align: right;
}

.footnotes-item:target {
  background-color: var(--theme-color-accent);
}

.footnotes-item > * {
  grid-column: content;
}

.reversefootnote {
  color: var(--theme-color-text-faded);
  font-family: var(--theme-font-serif);
  font-style: italic;
  text-decoration: none;
}

.reversefootnote:hover,
.reversefootnote:focus {
  color: var(--theme-color-link);
}

/*

Page preferences
(Currently just for toggling footnotes, but might expand!)

NB: Much of this work references Kitty Giraudel’s in-depth https://kittygiraudel.com/2021/04/05/an-accessible-toggle/

*/
.page-preferences {
  align-items: center;
  column-gap: var(--gap-flow);
  display: flex;
  grid-column: aside;
  flex-wrap: wrap;
  font-family: var(--theme-font-sans);
  font-size: 0.875em; /* 14/16 */
  grid-column: content;
  padding-bottom: var(--gap-flow);
  margin-bottom: var(--gap-flow);
}

@media (min-width: 60em) {
  .page-preferences {
    background: linear-gradient(var(--theme-color-page), var(--theme-color-page) 90%, rgba(255, 255, 255, 0) 100%);
    align-items: flex-start;
    border-bottom: none;
    flex-direction: column;
    gap: var(--gap-flow);
    grid-column: aside;
    margin-top: 0;
    padding-top: var(--gap-flow-most);
    position: sticky;
    top: 0;
    z-index: 10;
  }
}
.hed-preferences {
  font-size: inherit;
  font-weight: 500;
  margin: 0;
}

.preferences-group {
  margin: 0;
}

.toggle {
  align-items: center;
  background-color: inherit;
  display: flex;
  gap: var(--gap-flow);
}

button.toggle {
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  font: inherit;
  padding: 0;
}

button.toggle:focus {
  outline: 0;
}

.toggle-display {
  --offset: 0.25em;
  --diameter: 1.5em;
  align-items: center;
  background-color: #fbe2ee;
  border-radius: 100vw;
  border: 1px solid rgba(0, 0, 0, 0.3);
  box-sizing: content-box;
  cursor: pointer;
  display: inline-flex;
  height: calc(var(--diameter) + var(--offset) * 2);
  justify-content: space-around;
  position: relative;
  width: calc(var(--diameter) * 2 + var(--offset) * 2);
}

.toggle:focus .toggle-display,
.toggle:focus .toggle-display::before {
  border-color: rgba(0, 0, 0, 0.6);
}

@media (prefers-reduced-motion: no-preference) {
  .toggle-display {
    transition: 250ms;
  }
}
.toggle-display::before {
  background-color: #fff;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.3);
  box-sizing: border-box;
  content: "";
  height: var(--diameter);
  left: var(--offset);
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  transition: inherit;
  width: var(--diameter);
  z-index: 2;
}

.toggle[aria-pressed=true] .toggle-display {
  background-color: #E2F9FB;
}

.toggle[aria-pressed=true] .toggle-display::before {
  background-color: #F7FAF9;
  transform: translate(100%, -50%);
}

.toggle-icon {
  width: 20px;
}

.toggle-icon--cross {
  color: var(--theme-color-brand);
}

.toggle-icon--checkbox {
  color: #1FB978;
}

[data-user-pref--footnote-visibility=false] .footnote-ref,
[data-user-pref--footnote-visibility=false] .reversefootnote {
  display: none;
}

/*

Footer

*/
footer {
  background-color: var(--theme-color-footer);
  color: var(--theme-color-page);
  font-size: 0.875em;
  margin-top: calc(2 * var(--gap-flow-most));
  outline: 20px solid rgba(48, 48, 48, 0.2);
}

footer a {
  color: inherit;
}

footer a:hover,
footer a:focus {
  color: var(--theme-color-accent);
}

.footer-nav {
  align-self: end;
}

.back-top {
  align-self: end;
  font-style: italic;
  text-align: right;
}

footer .stage {
  padding-bottom: var(--gap-flow-most);
  padding-top: var(--gap-flow-most);
}

footer .site-logo {
  color: currentColor;
  width: 130px;
}

.footer-about > :not(.footer-logo) {
  margin-left: 32px;
  max-width: 30em;
}

.footer-secondary {
  background-color: var(--color-black-deep);
  max-width: inherit;
}

.footer-secondary.stage {
  padding-bottom: var(--gap-flow-less);
  padding-top: var(--gap-flow-less);
}

/*# sourceMappingURL=main.css.map */