/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ /* colors */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

:root {
  --color-neutral-dark: #202020;
  --color-neutral-light: rgb(245, 245, 245);

  --glow-light: rgba(100, 100, 100, 0.4);
  --glow-medium: rgba(100, 100, 100, 0.5);
  --glow-heavy: rgba(100, 100, 100, 0.6);

  --color-accent-light: rgb(247, 255, 255);
  --color-accent-medium: rgb(0, 0, 180);
  --color-accent-dark: orchid;
}

html,
body {
  background-color: var(--color-neutral-light);
  color: var(--color-neutral-dark);
  text-shadow: 0px 0px 0.5em var(--glow-light);
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ /* sizes */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

html {
  font-size: 19px; /* for REM sizes */
}

:root {
  --font-small: 0.8rem;
  --font-medium: 1rem;
  --font-large: 1.8rem;
  --font-sup-size: 0.7rem;
  --font-sup-offset: -0.8rem;
  --font-sup-margin: 0.2rem;

  --header-height: 3rem;
  --mini-distance: 0.3rem;
  --small-distance: 1rem;
  --medium-distance: 2rem;
  --large-distance: 3rem;
}

body {
  font-family: system-ui;
  line-height: 1.3em;
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ /* basics */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

* {
  text-decoration: none;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

i {
  font-style: italic;
}

a,
a:visited {
  color: currentColor;
  border-bottom: 1px solid currentcolor;
}

a:hover {
  border-bottom: 1px solid transparent;
}

.unselectable {
  user-select: none; /* standard syntax */
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE/Edge */
}

p:not(:last-child),
ul:not(:last-child),
ol:not(:last-child),
dl:not(:last-child) {
  margin-bottom: var(--medium-distance);
}

h2 {
  width: auto;
  margin: 0px var(--medium-distance) var(--medium-distance) 0px;
  font-size: var(--font-large);
  line-height: normal;
  text-shadow: 0px 0px 8px var(--glow-heavy);
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ /* container */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

section,
aside {
  min-height: 100vh;
  padding: var(--header-height) var(--medium-distance) var(--medium-distance)
    var(--medium-distance);
}

.columns {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

.columns > * {
  flex: 0 0 50%; /* Each column takes up 50% of the width */
}

.verticalCenter {
  display: flex;
  align-content: flex-start;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: var(--medium-distance);
  margin-top: -5vh; /* optical */
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ /* lists */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.columnList li {
  line-height: 2.4em;
  display: inline-block;
  width: 14em;
}

/* Aggressive breaking for long links */
.indentList {
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

.indentList li {
  margin-left: 1em;
  text-indent: -1em;
}

.collapseList li {
  display: block;
}

.footnote {
  font-size: var(--font-small);
  line-height: normal;
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ /* card */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.card {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr; /* left column (auto) will take the width of the content (image) and right column (1fr) will occupy the remaining space */
  align-items: start; /* to align content at the top of the section */
  padding: var(--header-height) 0px 0px 0px;
  margin-bottom: var(--large-distance);
}

.card img {
  display: block; /* removes any default margins and makes it a block-level element */
  max-width: 50vw;
  width: 50vw; /* this will be overridden in JS but it needs to be there to ensure large enough images on slow networks */
  height: auto;
  pointer-events: none;
}

.card .textContainer {
  display: block; /* allows the <h2> and <p> to stack vertically as default block-level elements */
  padding: 0 1em 0 var(--mini-distance);
}

.card .textContainer a,
.card .textContainer a:hover {
  border: unset;
}

.card .textContainer .imageCredits {
  font-size: var(--font-small);
  line-height: normal;
}

.card .textContainer .imageCredits * {
  display: inline;
}

.card .textContainer .imageCredits dt,
.card .textContainer .imageCredits dd {
  display: inline;
}

.card .textContainer .imageCredits dt::after,
.card .textContainer .imageCredits dd::after,
.card .textContainer .imageCredits h3::after {
  content: ",";
}

.card .textContainer .imageCredits dt:last-child::after,
.card .textContainer .imageCredits dd:last-child::after {
  content: "";
}

.card .textContainer .indentBox {
  margin-left: var(--medium-distance);
  margin-top: var(--large-distance);
  margin-bottom: var(--small-distance);
  margin-right: var(--large-distance);
  position: relative;
}

.card .textContainer .indentBox .fact {
  font-size: var(--font-large);
  line-height: 1.2em;
  max-width: 24em;
  margin-bottom: var(--small-distance);
  position: relative;
}

.card .textContainer .indentBox .fact sup {
  font-size: var(--font-sup-size);
  top: var(--font-sup-offset);
  margin-left: var(--font-sup-margin);
  display: inline;
  position: relative;
  line-height: initial;
}

.card .textContainer .indentBox .fact::before {
  content: ""; /* Necessary for pseudo-elements */
  position: absolute; /* Position relative to the parent element */
  top: 15%;
  left: -10%;
  width: 100%;
  height: 50%;
  background-color: var(--color-neutral-dark);
  pointer-events: none;
  border-radius: 50%;
  filter: blur(100px);
  mix-blend-mode: multiply;
  opacity: 0.3;
  z-index: 9;
}

.card .textContainer .indentBox .footnote li {
  display: block;
  line-height: 1.4em;
  margin-bottom: 0.2em;
}

.card .textContainer .indentBox .footnote li::before {
  content: attr(data-footnote) ": ";
}

.card .textContainer .indentBox .permalinkBottom {
  margin-left: var(--medium-distance);
  margin-top: var(--large-distance);
  padding: 1em;
  display: inline-block;
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ /* header */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

header {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: var(--header-height);
  z-index: 2;
  opacity: 0.98;
  background-color: var(--color-neutral-light);
}

header a,
header a:hover {
  border: unset;
}

header .flexWrap {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0;
  margin: 0;
  justify-content: space-between;
}

header h1 {
  padding: var(--medium-distance);
  text-shadow: 0px 0px 8px var(--glow-medium);
}

header h1::after {
  content: "";
  display: none;
}

header h1:hover::after {
  content: " ↑";
  display: inline;
}

header nav {
  height: 100vh;
  display: none; /* slide toggle via js */
  background-color: var(--color-neutral-light);
}

header nav li {
  text-align: right;
  margin-right: var(--medium-distance);
  letter-spacing: 0.05em;
  font-size: var(--font-large);
}

header nav li a,
header nav li .inactive {
  padding: 1em 0em 1em 0em;
  display: block;
  width: 100%;
}

header nav li .inactive {
  color: var(--glow-light);
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ /* hamburger */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

header .hamburgerIconWrap {
  margin-right: var(--medium-distance);
}

header .hamburgerIcon {
  width: 24px;
  height: 24px;
  position: relative;
  cursor: pointer;
  will-change: transform;
}

header .hamburgerIcon span {
  display: block;
  position: absolute;
  height: 2px;
  width: 100%;
  background: currentColor;
  left: 0;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: center;
  will-change: transform, opacity;
}

header .hamburgerIcon span:nth-child(1) {
  top: 4px;
}

header .hamburgerIcon span:nth-child(2) {
  top: 11px;
}

header .hamburgerIcon span:nth-child(3) {
  top: 18px;
}

header .hamburgerIcon.open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

header .hamburgerIcon.open span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

header .hamburgerIcon.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ /* buy box */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.buyBox {
  text-align: center;
  margin-top: var(--medium-distance);
  margin-bottom: var(--medium-distance);
  line-height: normal;
}

.buyBox > * {
  border-radius: var(--small-distance);
}

.buyBox a {
  font-size: var(--font-large);
  display: block;
  width: auto;
  box-shadow: 0px 0px 1em var(--glow-light);
  text-shadow: 0px 0px 0.5em var(--glow-heavy);
  background-color: var(--color-neutral-dark);
  color: var(--color-neutral-light);
  padding: var(--medium-distance);
  margin-bottom: var(--medium-distance);
}

.buyBox a:hover,
.buyBox a:focus {
  text-shadow: unset;
  background-color: var(--color-accent-dark);
  color: var(--color-accent-light);
  box-shadow: 0em 0em var(--large-distance) var(--color-accent-dark);
}

.buyBox .shippingInfo {
  color: var(--color-accent-dark);
  background-color: var(--color-accent-light);
  font-size: var(--font-small);
  line-height: normal;
  padding: var(--small-distance) var(--medium-distance) var(--small-distance)
    var(--medium-distance);
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ /* footer */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

footer {
  color: var(--color-accent-dark);
  background-color: var(--color-accent-light);
  font-size: var(--font-small);
  line-height: normal;
  padding: 0px var(--medium-distance) var(--small-distance)
    var(--medium-distance);
  position: relative;
}

footer span {
  display: inline-block;
  margin-top: var(--small-distance);
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ /* responsive */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

@media (max-width: 800px) {
  /* mirror this breakpoint in the resizeImages class in JS*/

  .card {
    grid-template-columns: 1fr; /* Make it a single column layout */
    height: auto; /* Adjusts height based on content */
    min-height: unset;
  }

  .card .textContainer {
    width: unset; /* remove the hard coded width */
  }

  .card img {
    max-height: unset; /* Allow the image to take its natural height */
    max-width: unset;
    height: auto; /* Preserve the image's aspect ratio */
    width: 100%; /* Let the image take the full width */
    margin-bottom: var(--mini-distance); /* make space for image credit */
  }

  .columns {
    display: block; /* single column layout for the vanilla pages*/
    align-items: unset;
  }

  .collapseList li {
    display: inline; /* make the conservation tips more readable on mobile */
  }
}

@media (min-width: 2000px) {
  body {
    width: 2000px;
  }
}

@media (max-width: 800px) {
  :root {
    --font-large: 1.7rem;
    --font-sup-offset: -0.7rem;
  }

  html {
    font-size: 18px;
  }
}

@media (max-width: 500px) {
  :root {
    --font-large: 1.6rem;
    --font-sup-offset: -0.5rem;
  }

  html {
    font-size: 17px;
  }
}