/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

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

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */

main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

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

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted; /* 2 */
}

/**
 * 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%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */

img {
  border-style: none;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Misc
   ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden] {
  display: none;
}

:root {
  --ease-out: cubic-bezier(0.165, 0.84, 0.44, 1);
  --ease-out-back: cubic-bezier(0.35, 1.47, 0.64, 1);
  scroll-behavior: smooth;

  --transition-fast: 0.15s;
  --transition-normal: 0.25s;
}

/* Spin animation for random theme button */

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.spinning svg {
  animation: spin 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
  animation: spin 0.5s var(--ease-out);
}

/* Accessibility: respect user preferences */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

:root {
  --text-opacity: 0.9;
  --link-hover-opacity: 0.7;
  --text-color: rgba(0, 0, 0, var(--text-opacity));
  --background-color: #f7f7f4;
  --card-background: var(--text-color);
  --card-text: rgba(255, 255, 255, var(--text-opacity));
  --link-hover-color: rgba(0, 0, 0, var(--link-hover-opacity));
}

[data-theme="dark"] {
  --text-color: rgba(255, 255, 255, var(--text-opacity));
  --background-color: #1a1a1a;
  --card-background: var(--text-color);
  --card-text: rgba(0, 0, 0, var(--text-opacity));
  --link-hover-color: rgba(255, 255, 255, var(--link-hover-opacity));
}

/* Color themes - WCAG AAA compliant combinations */

[data-theme="psychedelic"] {
  --text-color-base: #c5a500;
  --card-text-base: #000042;
  --text-color: color-mix(
    in srgb,
    var(--text-color-base) calc(var(--text-opacity)*100%),
    transparent
  );
  --card-text: color-mix(
    in srgb,
    var(--card-text-base) calc(var(--text-opacity)*100%),
    transparent
  );
  --link-hover-color: color-mix(
    in srgb,
    var(--text-color-base) calc(var(--link-hover-opacity)*100%),
    transparent
  );
  --background-color: #000042;
  --card-background: var(--text-color);
}

[data-theme="inverted-psychedelic"] {
  --text-color-base: #00fa81;
  --card-text-base: #3d0096;
  --text-color: color-mix(
    in srgb,
    var(--text-color-base) calc(var(--text-opacity)*100%),
    transparent
  );
  --card-text: color-mix(
    in srgb,
    var(--card-text-base) calc(var(--text-opacity)*100%),
    transparent
  );
  --link-hover-color: color-mix(
    in srgb,
    var(--text-color-base) calc(var(--link-hover-opacity)*100%),
    transparent
  );
  --background-color: #3d0096;
  --card-background: var(--text-color);
}

[data-theme="neon-statement"] {
  --text-color-base: #e0fb27;
  --card-text-base: #003b7a;
  --text-color: color-mix(
    in srgb,
    var(--text-color-base) calc(var(--text-opacity)*100%),
    transparent
  );
  --card-text: color-mix(
    in srgb,
    var(--card-text-base) calc(var(--text-opacity)*100%),
    transparent
  );
  --link-hover-color: color-mix(
    in srgb,
    var(--text-color-base) calc(var(--link-hover-opacity)*100%),
    transparent
  );
  --background-color: #003b7a;
  --card-background: var(--text-color);
}

[data-theme="earthy-organic"] {
  --text-color-base: #c1d7b9;
  --card-text-base: #294421;
  --text-color: color-mix(
    in srgb,
    var(--text-color-base) calc(var(--text-opacity)*100%),
    transparent
  );
  --card-text: color-mix(
    in srgb,
    var(--card-text-base) calc(var(--text-opacity)*100%),
    transparent
  );
  --link-hover-color: color-mix(
    in srgb,
    var(--text-color-base) calc(var(--link-hover-opacity)*100%),
    transparent
  );
  --background-color: #294421;
  --card-background: var(--text-color);
}

[data-theme="maximum-contrast"] {
  --text-color-base: #76ff16;
  --card-text-base: #001e1e;
  --text-color: color-mix(
    in srgb,
    var(--text-color-base) calc(var(--text-opacity)*100%),
    transparent
  );
  --card-text: color-mix(
    in srgb,
    var(--card-text-base) calc(var(--text-opacity)*100%),
    transparent
  );
  --link-hover-color: color-mix(
    in srgb,
    var(--text-color-base) calc(var(--link-hover-opacity)*100%),
    transparent
  );
  --background-color: #001e1e;
  --card-background: var(--text-color);
}

[data-theme="inverted-bold"] {
  --text-color-base: #00001b;
  --card-text-base: #ebff13;
  --text-color: color-mix(
    in srgb,
    var(--text-color-base) calc(var(--text-opacity)*100%),
    transparent
  );
  --card-text: color-mix(
    in srgb,
    var(--card-text-base) calc(var(--text-opacity)*100%),
    transparent
  );
  --link-hover-color: color-mix(
    in srgb,
    var(--text-color-base) calc(var(--link-hover-opacity)*100%),
    transparent
  );
  --background-color: #ebff13;
  --card-background: var(--text-color);
}

[data-theme="cool-nocturne"] {
  --text-color-base: #00b4ca;
  --card-text-base: #00003b;
  --text-color: color-mix(
    in srgb,
    var(--text-color-base) calc(var(--text-opacity)*100%),
    transparent
  );
  --card-text: color-mix(
    in srgb,
    var(--card-text-base) calc(var(--text-opacity)*100%),
    transparent
  );
  --link-hover-color: color-mix(
    in srgb,
    var(--text-color-base) calc(var(--link-hover-opacity)*100%),
    transparent
  );
  --background-color: #00003b;
  --card-background: var(--text-color);
}

[data-theme="dark-glamour"] {
  --text-color-base: #ff6b9d;
  --card-text-base: #1a0000;
  --text-color: color-mix(
    in srgb,
    var(--text-color-base) calc(var(--text-opacity)*100%),
    transparent
  );
  --card-text: color-mix(
    in srgb,
    var(--card-text-base) calc(var(--text-opacity)*100%),
    transparent
  );
  --link-hover-color: color-mix(
    in srgb,
    var(--text-color-base) calc(var(--link-hover-opacity)*100%),
    transparent
  );
  --background-color: #1a0000;
  --card-background: var(--text-color);
}

[data-theme="hot-pink-punk"] {
  --text-color-base: #ff69b4;
  --card-text-base: #000000;
  --text-color: color-mix(
    in srgb,
    var(--text-color-base) calc(var(--text-opacity)*100%),
    transparent
  );
  --card-text: color-mix(
    in srgb,
    var(--card-text-base) calc(var(--text-opacity)*100%),
    transparent
  );
  --link-hover-color: color-mix(
    in srgb,
    var(--text-color-base) calc(var(--link-hover-opacity)*100%),
    transparent
  );
  --background-color: #000000;
  --card-background: var(--text-color);
}

[data-theme="inverted-punk"] {
  --text-color-base: #000033;
  --card-text-base: #ff69b4;
  --text-color: color-mix(
    in srgb,
    var(--text-color-base) calc(var(--text-opacity)*100%),
    transparent
  );
  --card-text: color-mix(
    in srgb,
    var(--card-text-base) calc(var(--text-opacity)*100%),
    transparent
  );
  --link-hover-color: color-mix(
    in srgb,
    var(--text-color-base) calc(var(--link-hover-opacity)*100%),
    transparent
  );
  --background-color: #ff69b4;
  --card-background: var(--text-color);
}

[data-theme="funk-gold"] {
  --text-color-base: #ffd700;
  --card-text-base: #1a1000;
  --text-color: color-mix(
    in srgb,
    var(--text-color-base) calc(var(--text-opacity)*100%),
    transparent
  );
  --card-text: color-mix(
    in srgb,
    var(--card-text-base) calc(var(--text-opacity)*100%),
    transparent
  );
  --link-hover-color: color-mix(
    in srgb,
    var(--text-color-base) calc(var(--link-hover-opacity)*100%),
    transparent
  );
  --background-color: #1a1000;
  --card-background: var(--text-color);
}

[data-theme="blood-thunder"] {
  --text-color-base: #ffff00;
  --card-text-base: #5c0000;
  --text-color: color-mix(
    in srgb,
    var(--text-color-base) calc(var(--text-opacity)*100%),
    transparent
  );
  --card-text: color-mix(
    in srgb,
    var(--card-text-base) calc(var(--text-opacity)*100%),
    transparent
  );
  --link-hover-color: color-mix(
    in srgb,
    var(--text-color-base) calc(var(--link-hover-opacity)*100%),
    transparent
  );
  --background-color: #5c0000;
  --card-background: var(--text-color);
}

[data-theme="neon-nightmare"] {
  --text-color-base: #00ffff;
  --card-text-base: #2d0000;
  --text-color: color-mix(
    in srgb,
    var(--text-color-base) calc(var(--text-opacity)*100%),
    transparent
  );
  --card-text: color-mix(
    in srgb,
    var(--card-text-base) calc(var(--text-opacity)*100%),
    transparent
  );
  --link-hover-color: color-mix(
    in srgb,
    var(--text-color-base) calc(var(--link-hover-opacity)*100%),
    transparent
  );
  --background-color: #2d0000;
  --card-background: var(--text-color);
}

[data-theme="purple-reign"] {
  --text-color-base: #ffd700;
  --card-text-base: #4b0082;
  --text-color: color-mix(
    in srgb,
    var(--text-color-base) calc(var(--text-opacity)*100%),
    transparent
  );
  --card-text: color-mix(
    in srgb,
    var(--card-text-base) calc(var(--text-opacity)*100%),
    transparent
  );
  --link-hover-color: color-mix(
    in srgb,
    var(--text-color-base) calc(var(--link-hover-opacity)*100%),
    transparent
  );
  --background-color: #4b0082;
  --card-background: var(--text-color);
}

[data-theme="tangerine-dream"] {
  --text-color-base: #001a1a;
  --card-text-base: #ffa500;
  --text-color: color-mix(
    in srgb,
    var(--text-color-base) calc(var(--text-opacity)*100%),
    transparent
  );
  --card-text: color-mix(
    in srgb,
    var(--card-text-base) calc(var(--text-opacity)*100%),
    transparent
  );
  --link-hover-color: color-mix(
    in srgb,
    var(--text-color-base) calc(var(--link-hover-opacity)*100%),
    transparent
  );
  --background-color: #ffa500;
  --card-background: var(--text-color);
}

[data-theme="dark-orange-fire"] {
  --text-color-base: #ff8c00;
  --card-text-base: #000000;
  --text-color: color-mix(
    in srgb,
    var(--text-color-base) calc(var(--text-opacity)*100%),
    transparent
  );
  --card-text: color-mix(
    in srgb,
    var(--card-text-base) calc(var(--text-opacity)*100%),
    transparent
  );
  --link-hover-color: color-mix(
    in srgb,
    var(--text-color-base) calc(var(--link-hover-opacity)*100%),
    transparent
  );
  --background-color: #000000;
  --card-background: var(--text-color);
}

[data-theme="midnight-salmon"] {
  --text-color-base: #ffa07a;
  --card-text-base: #191970;
  --text-color: color-mix(
    in srgb,
    var(--text-color-base) calc(var(--text-opacity)*100%),
    transparent
  );
  --card-text: color-mix(
    in srgb,
    var(--card-text-base) calc(var(--text-opacity)*100%),
    transparent
  );
  --link-hover-color: color-mix(
    in srgb,
    var(--text-color-base) calc(var(--link-hover-opacity)*100%),
    transparent
  );
  --background-color: #191970;
  --card-background: var(--text-color);
}

[data-theme="burgundy-velvet"] {
  --text-color-base: #ffe4e1;
  --card-text-base: #800020;
  --text-color: color-mix(
    in srgb,
    var(--text-color-base) calc(var(--text-opacity)*100%),
    transparent
  );
  --card-text: color-mix(
    in srgb,
    var(--card-text-base) calc(var(--text-opacity)*100%),
    transparent
  );
  --link-hover-color: color-mix(
    in srgb,
    var(--text-color-base) calc(var(--link-hover-opacity)*100%),
    transparent
  );
  --background-color: #800020;
  --card-background: var(--text-color);
}

[data-theme="hot-pink-mint"] {
  --text-color-base: #b5ffd5;
  --card-text-base: #780038;
  --text-color: color-mix(
    in srgb,
    var(--text-color-base) calc(var(--text-opacity)*100%),
    transparent
  );
  --card-text: color-mix(
    in srgb,
    var(--card-text-base) calc(var(--text-opacity)*100%),
    transparent
  );
  --link-hover-color: color-mix(
    in srgb,
    var(--text-color-base) calc(var(--link-hover-opacity)*100%),
    transparent
  );
  --background-color: #780038;
  --card-background: var(--text-color);
}

[data-theme="purple-cyan-electric"] {
  --text-color-base: #00f1ff;
  --card-text-base: #3e2b7f;
  --text-color: color-mix(
    in srgb,
    var(--text-color-base) calc(var(--text-opacity)*100%),
    transparent
  );
  --card-text: color-mix(
    in srgb,
    var(--card-text-base) calc(var(--text-opacity)*100%),
    transparent
  );
  --link-hover-color: color-mix(
    in srgb,
    var(--text-color-base) calc(var(--link-hover-opacity)*100%),
    transparent
  );
  --background-color: #3e2b7f;
  --card-background: var(--text-color);
}

body {
  background: #f7f7f4;
  background: var(--background-color);
  color: rgba(0, 0, 0, 0.9);
  color: var(--text-color);
  transition:
    background-color 0.25s cubic-bezier(0.165, 0.84, 0.44, 1), color 0.25s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition:
    background-color var(--transition-normal) var(--ease-out), color var(--transition-normal) var(--ease-out);
}

a,
a:visited {
  color: inherit;
  -webkit-text-decoration: underline;
  text-decoration: underline;
  transition: color 0.25s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: color var(--transition-normal) var(--ease-out);
}

a:hover {
  color: rgba(0, 0, 0, 0.7);
  color: var(--link-hover-color);
}

@font-face {
  font-family: "Satoshi";
  font-style: normal;
  font-weight: 400;
  src: url("/assets/Satoshi-Regular-6159f91d.woff2") format("woff2");
}

@font-face {
  font-family: "Satoshi";
  font-style: italic;
  font-weight: 400;
  src: url("/assets/Satoshi-Italic-a8f9aa53.woff2") format("woff2");
}

@font-face {
  font-family: "Satoshi";
  font-style: normal;
  font-weight: 500;
  src: url("/assets/Satoshi-Medium-69101bf5.woff2") format("woff2");
}

@font-face {
  font-family: "Satoshi";
  font-style: italic;
  font-weight: 500;
  src: url("/assets/Satoshi-MediumItalic-8fa13b5f.woff2") format("woff2");
}

@font-face {
  font-family: "Satoshi";
  font-style: normal;
  font-weight: 900;
  src: url("/assets/Satoshi-Black-5cfc1ac9.woff2") format("woff2");
}

@font-face {
  font-family: "Satoshi";
  font-style: italic;
  font-weight: 900;
  src: url("/assets/Satoshi-BlackItalic-9286aa60.woff2") format("woff2");
}

:root {
  --columns: 12;
  --gutter: 1.5rem;
  --outer-padding: 1.5rem;
}

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

:root {
    --columns: 4;
    --gutter: 1rem;
    --outer-padding: 1rem;
}
  }

@media print {

:root {
    --outer-padding: 0px;
}
  }

:root {

  --column-width: calc((100% - var(--gutter)*(var(--columns) - 1) - var(--outer-padding)*2)/var(--columns));
}

.grid-overlay {
  display: none;
}

.grid-overlay--active {
  --grid-overlay-width: var(
    --grid-limit,
    calc(100% - var(--outer-padding)*2)
  );
  display: block;
  position: fixed;
  z-index: 9000;
  top: 0px;
  width: calc(100% - 3rem);
  width: var(--grid-overlay-width);
  left: 50%;
  margin-left: calc(-50% - -1.5rem);
  margin-left: calc(var(--grid-overlay-width)/2*-1);
  height: 100%;
  pointer-events: none;
  background: linear-gradient(
    to right,
    transparent 1.5rem,
    rgba(255, 0, 255, 0.05) 1.5rem
  );
  background: linear-gradient(
    to right,
    var(--grid-overlay-gutter, transparent) var(--gutter),
    var(--grid-overlay-column, rgba(255, 0, 255, 0.05)) var(--gutter)
  );
  background-size: calc(8.3333333333% + 0.125rem) 100%;
  background-size: calc((100% + var(--gutter))/var(--columns, 12)) 100%;
  background-position: top 0px left -1.5rem;
  background-position: top 0px left calc(var(--gutter)*-1);
}

/* ---- Mixins ------------------------------------------------------------- */

/* ---- Definitions -------------------------------------------------------- */

:root {
  --font-sans: "Satoshi", sans-serif;
  --font-display: 500 2rem/1.2 var(--font-sans);
  --font-body: 500 1.25rem/1.3 var(--font-sans);
  --font-caption: 500 0.75rem/1.3 var(--font-sans);
  --font-featured: 500 1.25rem/1.3 var(--font-sans);
}

/* ---- Font scale --------------------------------------------------------- */

html {
  --font-scale-coeff: calc((var(--font-scale-to) - var(--font-scale-from))/(var(--font-scale-end) - var(--font-scale-start)));
  font-size: calc(0.625rem + 0.4166666667vw);
  font-size: calc((var(--font-scale-from) - var(--font-scale-start)*var(--font-scale-coeff))/16*1rem + var(--font-scale-coeff)*1vw);
  --font-scale-from: 16;
  --font-scale-to: 18;
  --font-scale-start: 14.4;
  --font-scale-end: 19.2;
}

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

html {
    --font-scale-from: 14;
    --font-scale-to: 16;
    --font-scale-start: 7.68;
    --font-scale-end: 14.4;
}
  }

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

html {
    --font-scale-from: 12;
    --font-scale-to: 16;
    --font-scale-start: 0.01;
    --font-scale-end: 7.68;
}
  }

body {
  font-family: "Satoshi", sans-serif;
  font-family: var(--font-sans);
  font-size: 100%;
}

/* ---- Rules -------------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol {
  margin: 1rem 0rem;
}

h1:first-child {
    margin-top: 0px;
  }

h4:first-child {
    margin-top: 0px;
  }

h5:first-child {
    margin-top: 0px;
  }

h6:first-child {
    margin-top: 0px;
  }

p:first-child {
    margin-top: 0px;
  }

h1:last-child {
    margin-bottom: 0px;
  }

h4:last-child {
    margin-bottom: 0px;
  }

h5:last-child {
    margin-bottom: 0px;
  }

h6:last-child {
    margin-bottom: 0px;
  }

p:last-child {
    margin-bottom: 0px;
  }

h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
figcaption,
blockquote {
  max-width: 60ch;
}

ul,
ol,
blockquote {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

ul:first-child {
    margin-top: 0px;
  }

ol:first-child {
    margin-top: 0px;
  }

ul:last-child {
    margin-bottom: 0px;
  }

ol:last-child {
    margin-bottom: 0px;
  }

main {
  font: 500 1.25rem/1.3 "Satoshi", sans-serif;
  font: var(--font-body);
}

h1 {
  font: 500 2rem/1.2 "Satoshi", sans-serif;
  font: var(--font-display);
}

h2 {
  font: 500 2rem/1.2 "Satoshi", sans-serif;
  font: var(--font-display);
  margin-top: 2rem;
}

h2:first-child {
    margin-top: 0px;
  }

h2:last-child {
    margin-bottom: 0px;
  }

h3 {
  font: 500 1.25rem/1.3 "Satoshi", sans-serif;
  font: var(--font-body);
  font-weight: 500;
  margin-top: 2rem;
}

h3:first-child {
    margin-top: 0px;
  }

h3:last-child {
    margin-bottom: 0px;
  }

h4 {
  font: 500 1.25rem/1.3 "Satoshi", sans-serif;
  font: var(--font-body);
}

h5 {
  font: 500 0.75rem/1.3 "Satoshi", sans-serif;
  font: var(--font-caption);
}

h6 {
  font: 500 0.75rem/1.3 "Satoshi", sans-serif;
  font: var(--font-caption);
}

blockquote {
  font: 500 1.25rem/1.3 "Satoshi", sans-serif;
  font: var(--font-body);
  margin: 2rem 0rem;
}

blockquote:first-child {
    margin-top: 0px;
  }

blockquote:last-child {
    margin-bottom: 0px;
  }

figcaption {
  margin-top: 0.5rem;
  font: 500 0.75rem/1.3 "Satoshi", sans-serif;
  font: var(--font-caption);
}

/* ---- Shared Article Styles ---------------------------------------------- */

.article {
  margin-bottom: 4rem;
}

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

.article {
    display: flex;
    flex-direction: column;
}
  }

@media screen and (max-width: 768px) {
  .article > .inner {
    align-self: stretch;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}

/* ---- Article Header Section --------------------------------------------- */

.article-header {
  position: sticky;
  top: 1.5rem;
  top: var(--gutter);
  z-index: 1;
  padding: 0 0 10rem;
}

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

.article-header {
    position: static;
    padding: 0;
    margin-bottom: 2rem;
}
  }

.article-header .inner {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.5rem;
  gap: 0 var(--gutter);
  align-items: flex-start;
  font: 500 2rem/1.2 "Satoshi", sans-serif;
  font: var(--font-display);
}

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

.article-header .inner {
    display: block;
}
  }

.article-header .inner > * {
  flex: 1 0 0;
  min-width: 0;
  min-height: 1px;
  margin: 0;
}

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

.article-header .inner > * {
    margin-bottom: 1rem;
}

    .article-header .inner > :last-child {
      margin-bottom: 0;
    }
  }

*,
*:before,
*:after {
  box-sizing: border-box;
}

.responsive-embed,
figure.image {
  margin: 2rem 0rem;
}

.responsive-embed:not(does-not-exist):first-child {
    margin-top: 0px;
  }

figure.image:first-child {
    margin-top: 0px;
  }

.responsive-embed:not(does-not-exist):last-child {
    margin-bottom: 0px;
  }

figure.image:last-child {
    margin-bottom: 0px;
  }

figure.image {
  width: 100%;
  padding: 0rem;
}

figure.image img {
    display: block;
    width: 100%;
    height: auto;
  }

img {
  display: block;
}

/* ---- Duotone (mask): theme-colored images when a color theme is active ---- */

/* Normal image in light/dark; two masked layers only for random color themes  */

.duotone-mask {
  position: relative;
  overflow: hidden;
  display: block;
  width: 100%;
}

.duotone-mask-fallback {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.duotone-mask-base,
.duotone-mask-overlay {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

[data-theme]:not([data-theme="light"]):not([data-theme="dark"])
  .duotone-mask-fallback {
  display: none;
}

[data-theme]:not([data-theme="light"]):not([data-theme="dark"])
  .duotone-mask-base,
[data-theme]:not([data-theme="light"]):not([data-theme="dark"])
  .duotone-mask-overlay {
  display: block;
}

.duotone-mask-base {
  background: rgba(0, 0, 0, 0.9);
  background: var(--card-background);
}

.duotone-mask-overlay {
  background: rgba(255, 255, 255, 0.9);
  background: var(--card-text);
  mask-image: var(--img);
  -webkit-mask-image: var(--img);
  mask-size: cover;
  -webkit-mask-size: cover;
  mask-position: center;
  -webkit-mask-position: center;
  mask-mode: luminance;
  mask-type: luminance;
  -webkit-mask-type: luminance;
}

.exhibition-nav {
  display: flex;
  gap: 2rem;
  padding: 1.5rem;
  padding: var(--outer-padding);
  padding-top: 0rem;
  padding-bottom: 0rem;
}

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

.exhibition-nav {
    flex-direction: column;
    gap: 1rem;
}
  }

.exhibition-nav a {
    font: 500 2rem/1.2 "Satoshi", sans-serif;
    font: var(--font-display);
    -webkit-text-decoration: none;
    text-decoration: none;
    transition: color 0.15s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: color var(--transition-fast) var(--ease-out);
  }

/* ---- Exhibition-Specific Styles ----------------------------------------- */

/* Extends .article and .article-header from article.css */

.exhibition-headline {
  font: 500 2rem/1.2 "Satoshi", sans-serif;
  font: var(--font-display);
  margin: 0;
}

.exhibition-headline p {
    margin: 0;
  }

.exhibition-description {
  font: 500 2rem/1.2 "Satoshi", sans-serif;
  font: var(--font-display);
}

.exhibition-description p {
    margin: 0;
  }

.exhibition-date {
  font: 500 2rem/1.2 "Satoshi", sans-serif;
  font: var(--font-display);
}

.exhibition-date p {
    margin: 0;
  }

.featured-card {
  position: fixed;
  top: 6rem;
  right: -4rem;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 686px;
  background: rgba(0, 0, 0, 0.9);
  background: var(--card-background);
  color: rgba(255, 255, 255, 0.9);
  color: var(--card-text);
  padding: 1.5rem;
  padding: var(--gutter);
  padding-right: 7.5rem;
  padding-right: calc(var(--gutter) + 6rem);
  transform: rotate(-8deg);
  z-index: 10;
  font: 500 1.25rem/1.3 "Satoshi", sans-serif;
  font: var(--font-featured);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  gap: calc(var(--gutter)/2);
}

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

.featured-card {
    position: static;
    order: -1;
    width: -moz-fit-content;
    width: fit-content;
    max-width: calc(100% + 2rem);
    transform: rotate(-4deg);
    margin-left: auto;
    margin-right: -2rem;
    margin-bottom: 2rem;
    padding: 1.5rem;
    padding: var(--gutter);
    padding-right: 3.5rem;
    padding-right: calc(var(--gutter) + 2rem);
}
  }

.featured-card p {
    margin: 0;
  }

/* Override exhibition styles with featured font */

.featured-card .exhibition-date,.featured-card .exhibition-description {
    font: 500 1.25rem/1.3 "Satoshi", sans-serif;
    font: var(--font-featured);
  }

.featured-card time,.featured-card .featured-card-date {
    display: block;
    font: 500 1.25rem/1.3 "Satoshi", sans-serif;
    font: var(--font-featured);
  }

.featured-card h2 {
    font: 500 1.25rem/1.3 "Satoshi", sans-serif;
    font: var(--font-featured);
    margin: 0;
  }

.featured-card h2 a {
      -webkit-text-decoration: underline;
      text-decoration: underline;
      color: inherit;
    }

.featured-card h2 a:hover {
        color: rgba(255, 255, 255, 0.63);
      }

@supports (color: color-mix(in lch, red, blue)) {
.featured-card h2 a:hover {
        color: color-mix(
          in srgb,
          var(--card-text) calc(var(--link-hover-opacity)*100%),
          transparent
        );
      }
}

.featured-card .featured-card-description {
    font: 500 1.25rem/1.3 "Satoshi", sans-serif;
    font: var(--font-featured);
  }

footer {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  gap: var(--gutter);
  align-items: flex-start;
  padding: 1.5rem;
  padding: var(--outer-padding);
  padding-top: 0rem;
  padding-bottom: 1rem;
}

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

footer {
    flex-direction: column;
    gap: 1rem;
}
  }

footer > div {
  flex: 1 0 0;
  min-width: 0;
  min-height: 1px;
}

/* Logo base styles inherited from logo.css */

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

footer .logo {
    flex: none;
    width: 100%;
}
  }

footer .credits {
  flex: 0 0 100%;
  margin-top: 10rem;
  font: 500 0.75rem/1.3 "Satoshi", sans-serif;
  font: var(--font-caption);
  max-width: 100%;
  word-wrap: break-word;
}

/* ---- Gallery Grid ------------------------------------------------------- */

/* Dynamic 10-image repeating pattern with varied aspect ratios and spacing */

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-columns: repeat(var(--columns), 1fr);
  grid-column-gap: 1.5rem;
  grid-column-gap: var(--gutter);
  grid-row-gap: 1.5rem;
  grid-row-gap: var(--gutter);
  row-gap: 1.5rem;
  row-gap: var(--gutter);
}

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

.gallery-grid {
    grid-template-columns: repeat(4, 1fr);
}
  }

/* ---- Base Image Styles -------------------------------------------------- */

.gallery-grid-item {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.gallery-grid-item .duotone-mask {
  display: block;
  width: 100%;
  height: auto;
}

.gallery-grid-item figcaption {
  font: 500 0.75rem/1.3 "Satoshi", sans-serif;
  font: var(--font-caption);
  margin: 0 0 1.5rem 0;
  margin: 0 0 var(--gutter) 0;
  /* Constrain to ~3 columns of the 12-column site grid */
  max-width: calc(25vw - 0.75rem);
  max-width: calc(25vw - var(--outer-padding)*2/12*3);
}

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

.gallery-grid-item figcaption {
    max-width: none;
}
  }

/* ---- Default Pattern (12-column grid) ----------------------------------- */

/* Row 1: cols 3-6 + 7-12 */

.gallery-grid-item:nth-child(10n + 1) {
  grid-column: 3 / 7;
}

.gallery-grid-item:nth-child(10n + 1) .duotone-mask {
    aspect-ratio: 3 / 4;
  }

.gallery-grid-item:nth-child(10n + 2) {
  grid-column: 7 / 13;
}

.gallery-grid-item:nth-child(10n + 2) .duotone-mask {
    aspect-ratio: 16 / 9;
  }

/* Row 2: 6 + 3 + 3 = 12 */

.gallery-grid-item:nth-child(10n + 3) {
  grid-column: span 6;
  align-self: end;
}

.gallery-grid-item:nth-child(10n + 3) .duotone-mask {
    aspect-ratio: 16 / 9;
  }

.gallery-grid-item:nth-child(10n + 4) {
  grid-column: 7 / 10;
  align-self: end;
}

.gallery-grid-item:nth-child(10n + 4) .duotone-mask {
    aspect-ratio: 1 / 1;
  }

.gallery-grid-item:nth-child(10n + 5) {
  grid-column: 10 / 13;
  align-self: end;
}

.gallery-grid-item:nth-child(10n + 5) .duotone-mask {
    aspect-ratio: 1 / 1;
  }

/* Row 3: 3 + 3 + 3 = 9 (offset start) */

.gallery-grid-item:nth-child(10n + 6) {
  grid-column: 4 / 7;
}

.gallery-grid-item:nth-child(10n + 6) .duotone-mask {
    aspect-ratio: 1 / 1;
  }

.gallery-grid-item:nth-child(10n + 7) {
  grid-column: 7 / 10;
}

.gallery-grid-item:nth-child(10n + 7) .duotone-mask {
    aspect-ratio: 1 / 1;
  }

.gallery-grid-item:nth-child(10n + 8) {
  grid-column: 10 / 13;
}

.gallery-grid-item:nth-child(10n + 8) .duotone-mask {
    aspect-ratio: 1 / 1;
  }

/* Row 4: 5 + 4 = 9 */

.gallery-grid-item:nth-child(10n + 9) {
  grid-column: span 5;
  align-self: end;
}

.gallery-grid-item:nth-child(10n + 9) .duotone-mask {
    aspect-ratio: 16 / 9;
  }

.gallery-grid-item:nth-child(10n + 10) {
  grid-column: 6 / 10;
  align-self: end;
}

.gallery-grid-item:nth-child(10n + 10) .duotone-mask {
    aspect-ratio: 3 / 4;
  }

/* ---- Mobile Pattern (4-column grid) ------------------------------------- */

/* 3/4 → span 4, 16/9 → span 4, 1/1 → span 2 */

@media screen and (max-width: 768px) {
  /* #1: 3/4 */
  .gallery-grid-item:nth-child(10n + 1) {
    grid-column: span 4;
  }

  /* #2: 16/9 */
  .gallery-grid-item:nth-child(10n + 2) {
    grid-column: span 4;
  }

  /* #3: 16/9 */
  .gallery-grid-item:nth-child(10n + 3) {
    grid-column: span 4;
  }

  /* #4, #5: 1/1 */
  .gallery-grid-item:nth-child(10n + 4),
  .gallery-grid-item:nth-child(10n + 5) {
    grid-column: span 2;
  }

  /* #6, #7, #8: 1/1 */
  .gallery-grid-item:nth-child(10n + 6),
  .gallery-grid-item:nth-child(10n + 7),
  .gallery-grid-item:nth-child(10n + 8) {
    grid-column: span 2;
  }

  /* #9: 16/9 */
  .gallery-grid-item:nth-child(10n + 9) {
    grid-column: span 4;
  }

  /* #10: 3/4 */
  .gallery-grid-item:nth-child(10n + 10) {
    grid-column: span 4;
  }
}

header {
  display: flex;
  gap: 1.5rem;
  gap: var(--gutter);
  align-items: flex-start;
  padding: 1.5rem;
  padding: var(--outer-padding);
  padding-top: 1.5rem;
  padding-bottom: 4rem;
}

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

header {
    display: block;
    position: relative;
    padding-bottom: 2rem;
}
  }

header > div,
header > nav {
  flex: 1 0 0;
  min-width: 0;
  min-height: 1px;
}

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

header > div,
header > nav {
    margin-bottom: 1rem;
}
  }

/* Logo styles inherited from logo.css */

header .tagline {
  font: 500 1.25rem/1.3 "Satoshi", sans-serif;
  font: var(--font-body);
  padding-bottom: 0.25rem;
}

header nav {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

header nav ul {
    display: flex;
    gap: 1.5rem;
    gap: var(--gutter);
    list-style: none;
    padding: 0;
    margin: 0;
    max-width: none;
  }

header nav li {
    font: 500 1.25rem/1.3 "Satoshi", sans-serif;
    font: var(--font-body);
  }

header nav a {
    -webkit-text-decoration: underline;
    text-decoration: underline;
  }

header nav a.current {
      -webkit-text-decoration: none;
      text-decoration: none;
      opacity: 0.7;
    }

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

header nav {
    justify-content: flex-start;
}
  }

header nav .icon-buttons {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-left: auto;
}

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

header nav .icon-buttons {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    right: var(--outer-padding);
    margin: 0;
}
  }

/* Theme buttons */

.theme-button {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  min-height: 2rem;
}

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

.theme-button {
    min-width: 2.25rem;
    min-height: 2.25rem;
}
  }

.theme-button svg {
  width: 1.25rem;
  height: 1.25rem;
  display: block;
  flex-shrink: 0;
  overflow: visible;
}

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

.theme-button svg {
    width: 1.5rem;
    height: 1.5rem;
}
  }

.home {
  position: relative;
}

.exhibitions-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 1.5rem;
  grid-gap: var(--gutter);
  gap: 1.5rem;
  gap: var(--gutter);
  grid-row-gap: 2.5rem;
  row-gap: 2.5rem;
}

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

.exhibitions-grid {
    grid-template-columns: 1fr;
}
  }

.exhibition-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.exhibition-card .exhibition-card-image-link {
    display: block;
    width: 100%;
  }

.exhibition-card .duotone-mask {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
  }

.exhibition-card .exhibition-card-info {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

.exhibition-card h2 {
    font: 500 1.25rem/1.3 "Satoshi", sans-serif;
    font: var(--font-body);
    margin: 0;
  }

.exhibition-card h2 a {
      -webkit-text-decoration: underline;
      text-decoration: underline;
      color: inherit;
    }

.exhibition-card h2 a:hover {
        color: rgba(0, 0, 0, 0.7);
        color: var(--link-hover-color);
      }

.exhibition-card .exhibition-card-description {
    font: 500 1.25rem/1.3 "Satoshi", sans-serif;
    font: var(--font-body);
    margin: 0;
  }

.exhibition-card .exhibition-card-description p {
      margin: 0;
    }

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

footer {
  margin-top: auto;
}

.inner {
  max-width: 100%;
  max-width: var(--grid-limit, 100%);
  margin: 0 auto;
  padding-left: 1.5rem;
  padding-left: var(--outer-padding);
  padding-right: 1.5rem;
  padding-right: var(--outer-padding);
}

/* ---- Logo Styles -------------------------------------------------------- */

/* Shared styles for logo in header and footer */

.logo a {
    -webkit-text-decoration: none;
    text-decoration: none;
  }

.logo .logo-prefix {
    display: block;
    font: 500 1.25rem/1.3 "Satoshi", sans-serif;
    font: var(--font-body);
  }

.logo .logo-name {
    display: block;
    font: 500 2rem/1.2 "Satoshi", sans-serif;
    font: var(--font-display);
    font-weight: 900;
    text-transform: uppercase;
  }

.page-content {
  margin-bottom: 5rem;
}

.page-main {
  display: flex;
  flex-direction: column;
  gap: 5rem;
  padding-top: 1.5rem;
  padding-top: var(--gutter);
}

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

.page-main {
    gap: 2rem;
}
  }

.page-body {
  font: 500 1.25rem/1.3 "Satoshi", sans-serif;
  font: var(--font-body);
  white-space: pre-wrap;
}

.page-body p {
    margin: 0;
    max-width: 90ch;
  }

.page-body p:last-child {
      margin-bottom: 0;
    }