@charset "UTF-8";
/**
 * Anvil Templating Engine
 *
 * @package Anvil
 * @version 6
 */
/**
 * Establish rhythm.
 * 
 * We're using a regular "beat" of the line-height, so all spacing
 * will be done using a multiple of the beat.
 */
:root {
  --ff-alt: "Bungee", sans-serif;
  --ff-heading: "Rubik", sans-serif;
  --ff-icon: "Font Awesome 6 Pro";
  --ff-mono: monospace;
  --ff-running: "Rubik", sans-serif;
  --ff-sans: "Rubik", sans-serif;
  --ff-fancy: "Bungee";
  --fw-light: 300;
  --fw-normal: 400;
  --fw-medium: 600;
  --fw-bold: 700;
  --fw-heavy: 800;
  --fw-heaviest: 900;
  /**
	 * Define base font size in proportional to the viewport size. This breaks accessibility
	 * slightly by making zooming to 200% very difficult (see https://adrianroselli.com/2019/12/responsive-type-and-zoom.html),
	 * but it's better than the alternative.
	 * 
	 * Numbers derived from https://websemantics.uk/tools/responsive-font-calculator/:
	 *
	 * - Starting with 16px font size @ 360px viewport width, increasing to 28px @ 2560px
	 * - Where: 0.4545 = 100 * font-size_difference / viewport_width_difference
	 */
  --fs-xxsmall: calc(1rem * .55);
  --fs-xsmall: calc(1rem * .7);
  --fs-small: calc(1rem * .85);
  --fs-medium: calc(1rem * 1);
  --fs-large: calc(1rem * 1.5);
  --fs-xlarge: calc(1rem * 2.5);
  --fs-xxlarge: calc(1rem * 3.5);
  --border-large: 4px;
  --border-medium: 3px;
  --border-small: 2px;
  --leading: 1.5;
  --measure: 45rem;
  --measure-min: 15rem;
  --space: 0;
  --beat-xxsmall: calc(var(--leading)*.125rem);
  --beat-xsmall: calc(var(--leading)*.25rem);
  --beat-small: calc(var(--leading)*.5rem);
  --beat: calc(var(--leading)*1rem);
  --beat-medium: calc(var(--leading)*1rem);
  --beat-large: calc(var(--leading)*2rem);
  --beat-xlarge: calc(var(--leading)*3rem);
  --beat-xxlarge: calc(var(--leading)*4rem);
  --tight: 0;
  --border: 0;
  --head-space: var(--beat);
  font-family: var(--ff-running);
  font-weight: var(--fw-normal);
  line-height: var(--leading);
  min-height: 0;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

@media (min-width: 360px) {
  :root {
    font-size: calc(1rem + ((1vw - 3.6px) * 0.4545));
  }
}

@media (min-width: 2560px) {
  :root {
    font-size: 26px;
  }
}

:root {
  --lum-lightest: 70%;
  --lum-lighter: 60%;
  --lum-light: 50%;
  --lum-normal: 40%;
  --lum-dark: 30%;
  --lum-darker: 20%;
  --lum-darkest: 10%;
  --lum-lightest-multiplier: 2.5;
  --lum-lighter-multiplier: 2;
  --lum-light-multiplier: 1.5;
  --lum-normal-multiplier: 1;
  --lum-dark-multiplier: .5;
  --lum-darker-multiplier: .25;
  --lum-darkest-multiplier: .125;
  --alpha: 1;
  --alpha-bg: .1;
  --hs-house: 357 98%;
  --lum-house: 34%;
  --c-house: HSL(var(--hs-house) calc(var(--lum-house) * var(--lum-normal-multiplier)));
  --c-house-dark: HSL(var(--hs-house) calc(var(--lum-house) * var(--lum-dark-multiplier)));
  --c-house-darker: HSL(var(--hs-house) calc(var(--lum-house) * var(--lum-darker-multiplier)));
  --c-house-darkest: HSL(var(--hs-house) calc(var(--lum-house) * var(--lum-darkest-multiplier)));
  --c-house-light: HSL(var(--hs-house) calc(var(--lum-house) * var(--lum-light-multiplier)));
  --c-house-lighter: HSL(var(--hs-house) calc(var(--lum-house) * var(--lum-lighter-multiplier)));
  --c-house-lightest: HSL(var(--hs-house) calc(var(--lum-house) * var(--lum-lightest-multiplier)));
  --c-neutral: #a0a0a0;
  --c-neutral-dark: #888888;
  --c-neutral-darker: #6d6d6d;
  --c-neutral-darkest: #525252;
  --c-neutral-bg: #161616;
  --c-neutral-light: #b6b6b6;
  --c-neutral-lighter: #d3d3d3;
  --c-neutral-lightest: #e5e1d9;
  --c-bg-rgb: 255, 252, 245;
  --c-bg: rgb(var(--c-bg-rgb));
  --c-running: #222;
  --c-bg-reversed: var(--c-running);
  --c-running-reversed: var(--c-bg);
  --hs-trim: 241 96%;
  --lum-trim: 20%;
  --c-trim: HSL(var(--hs-trim) calc(var(--lum-trim) * var(--lum-normal-multiplier)));
  --c-trim-dark: HSL(var(--hs-trim) calc(var(--lum-trim) * var(--lum-dark-multiplier)));
  --c-trim-darker: HSL(var(--hs-trim) calc(var(--lum-trim) * var(--lum-darker-multiplier)));
  --c-trim-darkest: HSL(var(--hs-trim) calc(var(--lum-trim) * var(--lum-darkest-multiplier)));
  --c-trim-light: HSL(var(--hs-trim) calc(var(--lum-trim) * var(--lum-light-multiplier)));
  --c-trim-lighter: HSL(var(--hs-trim) calc(var(--lum-trim) * var(--lum-lighter-multiplier)));
  --c-trim-lightest: HSL(var(--hs-trim) calc(var(--lum-trim) * var(--lum-lightest-multiplier)));
  --c-accent-rgb: 255, 183, 28;
  --c-accent: rgb(var(--c-accent-rgb));
  --c-alt: powderblue;
  --c-highlight: hsl(46, 100%, 89%);
  --hs-info: 198 85%;
  --c-info: hsl(var(--hs-info) var(--lum-normal) / var(--alpha));
  --c-info-light: hsl(var(--hs-info) var(--lum-light) / var(--alpha));
  --c-info-lighter: hsl(var(--hs-info) var(--lum-lighter) / var(--alpha));
  --c-info-lightest: hsl(var(--hs-info) var(--lum-lightest) / var(--alpha));
  --c-info-dark: hsl(var(--hs-info) var(--lum-dark) / var(--alpha));
  --c-info-darker: hsl(var(--hs-info) var(--lum-darker) / var(--alpha));
  --c-info-darkest: hsl(var(--hs-info) var(--lum-darkest) / var(--alpha));
  --c-info-bg: hsl(var(--hs-info) var(--lum-normal) / var(--alpha-bg));
  --c-note: hsl(35, 70%, 50%);
  --hs-alert: 10 96%;
  --hs-warning: 10 96%;
  --c-alert: hsl(var(--hs-alert) var(--lum-normal) / var(--alpha));
  --c-warning: hsl(var(--hs-warning) var(--lum-normal) / var(--alpha));
  --c-alert-bg: hsl(10, 100%, 96%);
  --c-alert-dark: hsl(0, 100%, 39%);
  --c-alert-light: hsl(10, 87%, 64%);
  --c-input-border: var(--c-neutral-darker);
  --c-input-border-active: var(--c-house);
  --c-progress-bar-1: var(--c-trim);
  --c-progress-bar-2: var(--c-house);
  --bg: var(--c-bg);
  background-color: var(--bg);
  color: var(--c-running);
}

:focus-visible {
  outline-color: var(--c-house);
}

::marker {
  color: var(--c-house);
}

::selection {
  background-color: var(--c-house);
  color: var(--c-running-reversed);
}

/**
 * Basic normalization
 */
* {
  border-style: solid;
  border-width: 0;
  box-sizing: border-box;
  margin: 0;
  max-width: 100vw;
  outline: 0;
  overflow-wrap: break-word;
  padding: 0;
  vertical-align: baseline;
}

body * + * {
  margin-top: var(--head-space);
}

/**
 * Remove the tapping delay on clickable elements in all browsers.
 */
a,
area,
button,
input,
label,
select,
summary,
textarea,
[tabindex] {
  touch-action: manipulation;
}

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Chrome, Safari & Edge don't get this right
 */
b,
strong {
  font-weight: bolder;
}

/**
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
  display: block;
}

iframe {
  border-style: none;
}

/**
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}

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

/**
 * Correct the text style of placeholders in Chrome, Edge, and Safari.
 */
::-webkit-input-placeholder {
  color: inherit;
  opacity: 0.54;
}

/**
 * Constrain elements to certain predefined settings.
 */
/**
 * Helper mixin to consistently adjust spacing and sizing on
 * layout primitives or objects while staying dry.
 */
/**
 * Set up focus styling for elements we need to tab to, like 
 * anchors, buttons, cards in a reel, etc.
 */
.\&suppress\:owl.\&suppress\:owl {
  --head-space: initial;
}

/**
 * Create a pulse of color around an object
 */
/**
 * Create a cross-hatched background for an element.
 */
/**
 * Lays out grandchildren in a series that wraps.
 *
 * Use-cases: tag clusters, chains of items, navigation etc.
 */
.\@battery {
  --battery-space: 1rem;
  --constrain-width: 100%;
}

.\@battery > * {
  /**
		* This is a wrapper until flex-box gets a well-supported
		* gap property; we need to calculate some negative
		* margins to get the battery items positioned correctly.
		*/
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin: calc(var(--battery-space) / 2 * -1);
}

.\@battery > * > * {
  margin: calc(var(--battery-space) / 2);
  max-width: var(--constrain-width);
}

.\@battery.\&arrange\:centered > * {
  justify-content: center;
}

.\@battery.\&arrange\:right > * {
  justify-content: flex-end;
}

.\@battery.\&suppress\:scroller {
  overflow: hidden;
}

.\@battery.\&space\:tight {
  --battery-space: var(--tight);
}

.\@battery.\&space\:xsmall {
  --battery-space: var(--beat-xsmall);
}

.\@battery.\&space\:small {
  --battery-space: var(--beat-small);
}

.\@battery.\&space\:medium {
  --battery-space: var(--beat-medium);
}

.\@battery.\&space\:large {
  --battery-space: var(--beat-large);
}

.\@battery.\&space\:xlarge {
  --battery-space: var(--beat-xlarge);
}

.\@battery.\&constrain\:height\:max {
  --constrain-height: 100vh;
}

.\@battery.\&constrain\:width\:max {
  --constrain-width: 100vw;
}

.\@battery.\&constrain\:width\:measure {
  --constrain-width: var(--measure);
}

.\@battery.\&constrain\:width\:medium {
  --constrain-width: calc(var(--measure)/2);
}

.\@battery.\&constrain\:width\:min {
  --constrain-width: var(--measure-min);
}

/**
 * A box. With padding. That's it. It's a primitive, not an 
 * object.
 *
 * Use cases: pretty much anything, but actually less than you'd
 * think. It's handy for including on the <article> element, for
 * instance.
 */
.\@box {
  --box-space: var(--beat);
  --box-space-above: var(--box-space);
  --box-space-below: var(--box-space);
  --box-space-left: var(--box-space);
  --box-space-right: var(--box-space);
  background: var(--bg);
  display: block;
  padding-bottom: var(--box-space-below);
  padding-left: var(--box-space-left);
  padding-right: var(--box-space-right);
  padding-top: var(--box-space-above);
  position: relative;
}

.\@box.\&space\:tight {
  --box-space: var(--tight);
}

.\@box.\&space\:xsmall {
  --box-space: var(--beat-xsmall);
}

.\@box.\&space\:small {
  --box-space: var(--beat-small);
}

.\@box.\&space\:medium {
  --box-space: var(--beat-medium);
}

.\@box.\&space\:large {
  --box-space: var(--beat-large);
}

.\@box.\&space\:xlarge {
  --box-space: var(--beat-xlarge);
}

.\@box.\&space\:above\:tight {
  --box-space-above: var(--tight);
}

.\@box.\&space\:above\:xsmall {
  --box-space-above: var(--beat-xsmall);
}

.\@box.\&space\:above\:small {
  --box-space-above: var(--beat-small);
}

.\@box.\&space\:above\:medium {
  --box-space-above: var(--beat-medium);
}

.\@box.\&space\:above\:large {
  --box-space-above: var(--beat-large);
}

.\@box.\&space\:above\:xlarge {
  --box-space-above: var(--beat-xlarge);
}

.\@box.\&space\:below\:tight {
  --box-space-below: var(--tight);
}

.\@box.\&space\:below\:xsmall {
  --box-space-below: var(--beat-xsmall);
}

.\@box.\&space\:below\:small {
  --box-space-below: var(--beat-small);
}

.\@box.\&space\:below\:medium {
  --box-space-below: var(--beat-medium);
}

.\@box.\&space\:below\:large {
  --box-space-below: var(--beat-large);
}

.\@box.\&space\:below\:xlarge {
  --box-space-below: var(--beat-xlarge);
}

.\@box.\&space\:left\:tight {
  --box-space-left: var(--tight);
}

.\@box.\&space\:left\:xsmall {
  --box-space-left: var(--beat-xsmall);
}

.\@box.\&space\:left\:small {
  --box-space-left: var(--beat-small);
}

.\@box.\&space\:left\:medium {
  --box-space-left: var(--beat-medium);
}

.\@box.\&space\:left\:large {
  --box-space-left: var(--beat-large);
}

.\@box.\&space\:left\:xlarge {
  --box-space-left: var(--beat-xlarge);
}

.\@box.\&space\:right\:tight {
  --box-space-right: var(--tight);
}

.\@box.\&space\:right\:xsmall {
  --box-space-right: var(--beat-xsmall);
}

.\@box.\&space\:right\:small {
  --box-space-right: var(--beat-small);
}

.\@box.\&space\:right\:medium {
  --box-space-right: var(--beat-medium);
}

.\@box.\&space\:right\:large {
  --box-space-right: var(--beat-large);
}

.\@box.\&space\:right\:xlarge {
  --box-space-right: var(--beat-xlarge);
}

.\@box.\&suppress\:owl {
  --head-space: initial;
}

/**
 * Centers its children horizontally in a stack
 * 
 * Use cases: pretty much anything.
 */
.\@center-h {
  --height: autofit;
  --center-h-space: beats(1);
  --width: 100%;
  align-items: center;
  box-sizing: content-box;
  display: flex;
  flex-direction: column;
  margin-left: auto;
  margin-right: auto;
  max-width: var(--width);
  min-height: var(--height);
  padding-left: var(--center-h-space);
  padding-right: var(--center-h-space);
}

.\@center-h.\&space\:tight {
  --center-h-space: var(--tight);
}

.\@center-h.\&space\:xsmall {
  --center-h-space: var(--beat-xsmall);
}

.\@center-h.\&space\:small {
  --center-h-space: var(--beat-small);
}

.\@center-h.\&space\:medium {
  --center-h-space: var(--beat-medium);
}

.\@center-h.\&space\:large {
  --center-h-space: var(--beat-large);
}

.\@center-h.\&space\:xlarge {
  --center-h-space: var(--beat-xlarge);
}

/**
 * Centers its child vertically in the viewport.
 * Allows for a header and/or footer above/below the principal
 * element; these will be aligned to the top and/or bottom. If
 * multiple elements are placed, they will be arranged with the
 * middle element centered.
 * 
 * Use cases: <dialog> elements and other modals, full-page blog
 * titles, etc.
 */
.\@center-v {
  --height: 100vh;
  --width: 100vw;
  /**
	 * Structural settings
	 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  /**
	 * Adjustable settings
	 */
  max-width: var(--width);
  min-height: var(--height);
  /**
	 * Align the all-important central element(s).
	 */
  /**
	 * Align the top element.
	 */
  /**
	 * Align the bottom element.
	 */
}

.\@center-v > * {
  margin-bottom: auto;
  margin-top: auto;
}

.\@center-v > header, .\@center-v\\header {
  margin-top: 0;
}

.\@center-v > footer, .\@center-v\\footer {
  margin-bottom: 0;
}

.\@center-v.\&loose > footer,
.\@center-v.\&loose > .\@center-v\\footer {
  margin-top: var(--beat-large);
}

.\@center-v.\&loose > header,
.\@center-v.\&loose > .\@center-v\\header {
  margin-bottom: var(--beat-large);
}

/**
 * Lays out direct children as equal-width columns.
 *
 * Use-cases: feature-columns, horizontal lists etc.
 */
.\@columns {
  --columns-space: 1rem;
  --columns-threshold: 32rem;
}

.\@columns > * {
  display: flex;
  flex-wrap: wrap;
}

.\@columns > * > * {
  --head-space: 0;
  flex-grow: 1;
  flex-basis: calc((var(--columns-threshold) - (100%-var(--columns-space))) * 999);
  margin: calc(var(--columns-space) / 2);
}

.\@columns > *.\&max\:2 > :nth-last-child(n+3),
.\@columns > *.\&max\:2 > :nth-last-child(n+3) ~ * {
  flex-basis: 100%;
}

.\@columns > *.\&max\:3 > :nth-last-child(n+4),
.\@columns > *.\&max\:3 > :nth-last-child(n+4) ~ * {
  flex-basis: 100%;
}

.\@columns > *.\&max\:4 > :nth-last-child(n+5),
.\@columns > *.\&max\:4 > :nth-last-child(n+5) ~ * {
  flex-basis: 100%;
}

.\@columns > *.\&max\:5 > :nth-last-child(n+6),
.\@columns > *.\&max\:5 > :nth-last-child(n+6) ~ * {
  flex-basis: 100%;
}

.\@columns > *.\&max\:6 > :nth-last-child(n+7),
.\@columns > *.\&max\:6 > :nth-last-child(n+7) ~ * {
  flex-basis: 100%;
}

.\@columns > *.\&space\:tight {
  --columns-space: var(--tight);
}

.\@columns > *.\&space\:xsmall {
  --columns-space: var(--beat-xsmall);
}

.\@columns > *.\&space\:small {
  --columns-space: var(--beat-small);
}

.\@columns > *.\&space\:medium {
  --columns-space: var(--beat-medium);
}

.\@columns > *.\&space\:large {
  --columns-space: var(--beat-large);
}

.\@columns > *.\&space\:xlarge {
  --columns-space: var(--beat-xlarge);
}

/**
 * Creates a frame around an image or video to crop it at the
 * right aspect ratio.
 *
 * Use cases: hero areas, product photos, etc.
 */
.\@frame {
  --aspect-ratio: 9/16;
  padding-bottom: calc(var(--aspect-ratio) * 100%);
  position: relative;
}

@media (orientation: portrait) {
  .\@frame {
    --aspect-ratio: 1/1;
  }
}

.\@frame > * {
  align-items: center;
  bottom: 0;
  display: flex;
  justify-content: center;
  left: 0;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 0;
}

.\@frame > img,
.\@frame > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/**
 * Lays out direct children in a grid format.
 *
 * Use cases: lists of posts, feature-lists etc.
 */
.\@grid {
  --grid-space: 0;
  display: grid;
  grid-gap: var(--grid-space);
  grid-template-columns: repeat(auto-fit, minmax(var(--measure-min), 1fr));
}

.\@grid.\&space\:tight {
  --grid-space: var(--tight);
}

.\@grid.\&space\:xsmall {
  --grid-space: var(--beat-xsmall);
}

.\@grid.\&space\:small {
  --grid-space: var(--beat-small);
}

.\@grid.\&space\:medium {
  --grid-space: var(--beat-medium);
}

.\@grid.\&space\:large {
  --grid-space: var(--beat-large);
}

.\@grid.\&space\:xlarge {
  --grid-space: var(--beat-xlarge);
}

/**
 * Sticks an element in the middle of the screen, out of the
 * normal flow, above everything else.
 *
 * Use cases: <dialog> elements and so forth.
 */
.\@overlay {
  --overlay-space: 0;
  --overlay-space-horiz: var(--overlay-space);
  --overlay-space-vert: var(--overlay-space);
  display: block;
  left: 50%;
  margin: 0;
  max-height: 90vh;
  max-width: 90vw !important;
  overflow-y: auto;
  padding: var(--overlay-space-vert) var(--overlay-space-horiz);
  position: fixed;
  top: 50%;
  transform: translate(-50%, -50%);
}

/**
 * Pulls an element to one side.
 *
 * Use cases: quotes, inline nav, asides etc.
 */
.\@pull {
  --pull-size: 38%;
  --pull-space: var(--beat);
  --pull-space-vert: var(--pull-space);
  --pull-space-above: var(--pull-space-vert);
  --pull-space-below: var(--pull-space-vert);
  --pull-space-left: 0;
  --pull-space-right: 0;
  margin-bottom: var(--pull-space-below);
  margin-left: var(--pull-space-left);
  margin-right: var(--pull-space-right);
  margin-top: var(--pull-space-above);
  max-width: var(--pull-size) !important;
}

.\@pull.\&space\:tight {
  --pull-space: var(--tight);
}

.\@pull.\&space\:xsmall {
  --pull-space: var(--beat-xsmall);
}

.\@pull.\&space\:small {
  --pull-space: var(--beat-small);
}

.\@pull.\&space\:medium {
  --pull-space: var(--beat-medium);
}

.\@pull.\&space\:large {
  --pull-space: var(--beat-large);
}

.\@pull.\&space\:xlarge {
  --pull-space: var(--beat-xlarge);
}

.\@pull.\&space\:above\:tight {
  --pull-space-above: var(--tight);
}

.\@pull.\&space\:above\:xsmall {
  --pull-space-above: var(--beat-xsmall);
}

.\@pull.\&space\:above\:small {
  --pull-space-above: var(--beat-small);
}

.\@pull.\&space\:above\:medium {
  --pull-space-above: var(--beat-medium);
}

.\@pull.\&space\:above\:large {
  --pull-space-above: var(--beat-large);
}

.\@pull.\&space\:above\:xlarge {
  --pull-space-above: var(--beat-xlarge);
}

.\@pull.\&space\:below\:tight {
  --pull-space-below: var(--tight);
}

.\@pull.\&space\:below\:xsmall {
  --pull-space-below: var(--beat-xsmall);
}

.\@pull.\&space\:below\:small {
  --pull-space-below: var(--beat-small);
}

.\@pull.\&space\:below\:medium {
  --pull-space-below: var(--beat-medium);
}

.\@pull.\&space\:below\:large {
  --pull-space-below: var(--beat-large);
}

.\@pull.\&space\:below\:xlarge {
  --pull-space-below: var(--beat-xlarge);
}

.\@pull.\&space\:left\:tight {
  --pull-space-left: var(--tight);
}

.\@pull.\&space\:left\:xsmall {
  --pull-space-left: var(--beat-xsmall);
}

.\@pull.\&space\:left\:small {
  --pull-space-left: var(--beat-small);
}

.\@pull.\&space\:left\:medium {
  --pull-space-left: var(--beat-medium);
}

.\@pull.\&space\:left\:large {
  --pull-space-left: var(--beat-large);
}

.\@pull.\&space\:left\:xlarge {
  --pull-space-left: var(--beat-xlarge);
}

.\@pull.\&space\:right\:tight {
  --pull-space-right: var(--tight);
}

.\@pull.\&space\:right\:xsmall {
  --pull-space-right: var(--beat-xsmall);
}

.\@pull.\&space\:right\:small {
  --pull-space-right: var(--beat-small);
}

.\@pull.\&space\:right\:medium {
  --pull-space-right: var(--beat-medium);
}

.\@pull.\&space\:right\:large {
  --pull-space-right: var(--beat-large);
}

.\@pull.\&space\:right\:xlarge {
  --pull-space-right: var(--beat-xlarge);
}

.\@pull > * + * {
  --head-space: 0;
}

.\@pull.\&arrange\:left {
  --pull-space-right: var(--beat-small);
  float: left;
}

.\@pull.\&arrange\:right {
  --pull-space-left: var(--beat-small);
  float: right;
}

.\@pull.\&size\:small {
  --pull-size: 38%;
}

@media (min-width: 72rem) {
  .\@pull.\&size\:small {
    --pull-size: 19%;
  }
}

.\@pull.\&size\:medium {
  --pull-size: 50%;
}

@media (min-width: 72rem) {
  .\@pull.\&size\:medium {
    --pull-size: 38%;
  }
}

.\@pull.\&size\:large {
  --pull-size: 100%;
  margin-left: 0;
  margin-right: 0;
}

@media (min-width: 72rem) {
  .\@pull.\&size\:large {
    --pull-size: 50%;
    margin-left: var(--pull-space-left);
    margin-right: var(--pull-space-right);
  }
}

/**
 * Creates a horizontally-scrolling carousel.
 *
 * Use-cases: image scrollers, testimonial sliders, web TV/movie
 * pickers, etc.
 */
.\@reel {
  --head-space: 0;
  --reel-space: 1rem;
  --scrollbar-color: var(--c-house);
  --scrollbar-bg-color: var(--c-neutral-lightest);
  display: flex;
  height: auto;
  overflow-x: auto;
  overflow-y: hidden;
  position: relative;
  scroll-snap-type: x mandatory;
  scrollbar-color: var(--scrollbar-bg-color) var(--scrollbar-color);
  /**
	 * Make sure the scrollbar is visible...
	 */
}

.\@reel::-webkit-scrollbar {
  height: 1rem;
}

.\@reel::-webkit-scrollbar-track {
  background-color: var(--scrollbar-bg-color);
}

.\@reel::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-bg-color);
  background-image: linear-gradient(var(--scrollbar-bg-color) 0, var(--scrollbar-bg-color) 0.25rem, var(--scrollbar-color) 0.25rem, var(--scrollbar-color) 0.75rem, var(--scrollbar-bg-color) 0.75rem);
}

.\@reel > [rel] {
  align-items: center;
  background: var(--c-neutral-light);
  border: var(--border-small) solid var(--c-neutral-light);
  bottom: 0;
  border-radius: var(--border-small);
  cursor: pointer;
  display: flex;
  font-size: 1.5rem;
  padding: 0.75rem;
  position: absolute;
  font-family: var(--ff-icon);
  top: 0;
}

.\@reel > [rel="next"] {
  right: 0;
}

.\@reel > * {
  transition: all .3s;
  outline: var(--border-medium) solid transparent;
  outline-offset: calc(var(--border-medium) * -1);
  flex: 0 0 auto;
  scroll-snap-align: start;
}

.\@reel > *:focus {
  outline: var(--border-medium) solid var(--c-neutral);
  outline-offset: calc(var(--border-medium) * -1);
}

.\@reel > :last-child {
  margin-right: var(--reel-space);
}

.\@reel > * + * {
  margin-left: var(--reel-space);
  margin-top: var(--head-space) !important;
}

.\@reel > img {
  flex-basis: auto;
  height: 100%;
  width: auto;
}

.\@reel.\&suppress\:clicker::after, .\@reel.\&suppress\:clicker::before {
  display: none;
}

.\@reel.\&suppress\:scroller {
  scrollbar-color: transparent;
}

.\@reel.\&suppress\:scroller::-webkit-scrollbar {
  height: 0;
}

.\@reel.\&suppress\:scroller::-webkit-scrollbar-track {
  background-color: transparent;
}

.\@reel.\&suppress\:scroller::-webkit-scrollbar-thumb {
  background-color: transparent;
  background-image: none;
}

.\@reel.is\:overflowing {
  padding-bottom: var(--reel-space);
}

.\@reel.is\:overflowing.\&suppress\:scroller {
  padding-bottom: 0;
}

.\@reel.\&space\:tight {
  --reel-space: var(--tight);
}

.\@reel.\&space\:xsmall {
  --reel-space: var(--beat-xsmall);
}

.\@reel.\&space\:small {
  --reel-space: var(--beat-small);
}

.\@reel.\&space\:medium {
  --reel-space: var(--beat-medium);
}

.\@reel.\&space\:large {
  --reel-space: var(--beat-large);
}

.\@reel.\&space\:xlarge {
  --reel-space: var(--beat-xlarge);
}

/**
 * Stacks elements one on top of another with sane margins and no
 * pesky extra vertical space.
 *
 * Use cases: running text, vertical menus, forms etc.
 */
.\@stack {
  --constrain-width: 100%;
  --stack-space: var(--beat);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  /**
	 * Position some elements at the top, and others at the bottom, after the
	 * nth element.
	 */
}

.\@stack > * {
  margin-bottom: 0;
  margin-top: 0;
  max-width: var(--constrain-width);
}

.\@stack > * + * {
  margin-top: var(--stack-space);
}

.\@stack:only-child {
  height: 100%;
}

.\@stack.\&space\:tight {
  --stack-space: var(--tight);
}

.\@stack.\&space\:xsmall {
  --stack-space: var(--beat-xsmall);
}

.\@stack.\&space\:small {
  --stack-space: var(--beat-small);
}

.\@stack.\&space\:medium {
  --stack-space: var(--beat-medium);
}

.\@stack.\&space\:large {
  --stack-space: var(--beat-large);
}

.\@stack.\&space\:xlarge {
  --stack-space: var(--beat-xlarge);
}

.\@stack.\&constrain\:height\:max {
  --constrain-height: 100vh;
}

.\@stack.\&constrain\:width\:max {
  --constrain-width: 100vw;
}

.\@stack.\&constrain\:width\:measure {
  --constrain-width: var(--measure);
}

.\@stack.\&constrain\:width\:medium {
  --constrain-width: calc(var(--measure)/2);
}

.\@stack.\&constrain\:width\:min {
  --constrain-width: var(--measure-min);
}

.\@stack.\&split-after-1 > :nth-child(1) {
  margin-bottom: auto;
}

.\@stack.\&split-after-2 > :nth-child(2) {
  margin-bottom: auto;
}

.\@stack.\&split-after-3 > :nth-child(3) {
  margin-bottom: auto;
}

.\@stack.\&sticky-bottom > :nth-last-child(2) {
  margin-bottom: auto;
}

/**
 * Creates a Pinterest-style masonry layout.
 *
 * Use cases: laying out large numbers of cards, mostly.
 */
.\@masonry {
  --space: var(--beat);
  column-gap: var(--space);
  column-width: var(--measure-min);
}

.\@masonry > * {
  display: inline-block;
  margin-bottom: var(--space);
  margin-top: 0;
  width: 100%;
}

a {
  transition: all .3s;
  outline: var(--border-medium) solid transparent;
  outline-offset: calc(var(--border-medium) * -1);
}

a:focus {
  outline: var(--border-medium) solid var(--c-neutral);
  outline-offset: calc(var(--border-medium) * -1);
}

/**
 * Pure CSS tooltips for abbreviations and definitions.
 *
 * We need this mainly for mobile browsers, since they don't display title
 * attributes as tooltips. We need a tabindex on the tag for this to work,
 * since we're using :focus; this is achieved in javascript using
 * makeDefinitionsAccessible() in scripts/async.php. 
 */
main abbr[title],
main dfn[title] {
  background: transparent;
  border: 1px solid var(--c-neutral-light);
  border-radius: 2px;
  color: var(--c-running);
  font-style: normal;
  padding: 0 3px;
  position: relative;
  transition: background .2s;
}

main abbr[title]::after,
main dfn[title]::after {
  bottom: 1.2rem;
  content: attr(title);
  cursor: default;
  font: normal var(--fs-xsmall) var(--ff-sans);
  height: 0;
  left: 50%;
  overflow: hidden;
  position: absolute;
  text-align: center;
  transform: translateX(-50%);
  transition: opacity .5s;
  width: 10rem;
  will-change: opacity;
}

main abbr[title]:hover,
main dfn[title]:hover {
  background: var(--c-neutral-lightest);
  cursor: help;
  transition: background .2s;
}

main abbr[title]:focus,
main dfn[title]:focus {
  animation: pulse .5s 1;
  will-change: box-shadow;
  border-style: solid;
  text-shadow: none;
  transition: background .2s;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 2px var(--c-neutral-lighter);
  }
  10% {
    box-shadow: 0 0 0 8px var(--c-neutral-lighter);
  }
  100% {
    box-shadow: 0 0 0 20px transparent;
  }
}

main abbr[title]:focus::after,
main dfn[title]:focus::after {
  background: var(--c-bg);
  border: var(--border-small) solid var(--c-neutral);
  border-radius: var(--border-medium);
  box-shadow: 0 0.1rem 0.5rem rgba(0, 0, 0, 0.35);
  color: black;
  height: auto;
  opacity: 1;
  padding: var(--beat-small);
  transform: translateX(-50%);
  transition: opacity .75s;
  z-index: 1;
}

main dfn[lang] {
  font-style: italic;
}

/**
 * Used to typeset universal running copy.
 */
.\%running {
  font-family: var(--ff-running);
}

.\%running > * {
  margin-left: auto;
  margin-right: auto;
  max-width: var(--measure);
}

.\%running a:link {
  color: var(--c-house);
  border-bottom: var(--border-small) solid var(--c-house-lighter);
  text-decoration: none;
}

.\%running a:visited {
  border-color: var(--c-neutral-dark);
  color: var(--c-neutral-darkest);
}

.\%running a:hover {
  border-color: var(--c-house);
  color: var(--c-house);
}

.\%running.\&reversed a:link {
  color: var(--c-running-reversed);
}

.\%running.\&reversed a:visited {
  color: var(--c-neutral-lightest);
}

.\%running a.\&reflink {
  border-color: transparent;
  color: inherit;
}

.\%running a.\&reflink:hover {
  border-color: var(--c-house-lightest);
  color: var(--c-house);
}

.\%running small {
  color: var(--c-neutral-dark);
}

/**
 * Used to establish sane baselines for headings.
 */
.\%heading {
  font-family: var(--ff-heading);
  line-height: 1.2;
  max-width: var(--measure);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--ff-heading);
  line-height: 1.2;
  max-width: var(--measure);
}

h1 {
  color: var(--c-house);
  font-family: var(--ff-alt);
  font-size: var(--fs-xlarge);
  font-weight: var(--fw-normal);
  line-height: 1.1;
  margin-top: var(--beat-large);
}

h2 {
  color: var(--c-house);
  font-size: var(--fs-large);
  font-weight: var(--fw-heavy);
  text-transform: uppercase;
}

* + h2 {
  margin-top: var(--beat-large);
}

h3 {
  color: var(--c-house);
  font-weight: var(--fw-heavy);
  font-size: var(--fs-small);
  letter-spacing: .025rem;
  text-transform: uppercase;
}

h4 {
  font-weight: var(--fw-medium);
  font-size: var(--fs-xsmall);
  letter-spacing: .015rem;
  text-transform: uppercase;
}

dl dt {
  font-family: var(--ff-heading);
  line-height: 1.2;
  max-width: var(--measure);
  font-weight: var(--fw-bold);
}

ol,
ul {
  --fa-li-margin: var(--beat-small);
}

ol li,
ul li {
  margin-left: 1rem;
}

ol li.\&close,
ul li.\&close {
  margin-top: var(--beat-small);
}

ol li.\&tight,
ul li.\&tight {
  margin-top: 0;
}

ol li ol,
ol li ul,
ul li ol,
ul li ul {
  margin-top: var(--beat);
}

ol li ol li,
ol li ul li,
ul li ol li,
ul li ul li {
  margin-top: var(--beat-small);
}

ol.\&spacing\:tight li,
ul.\&spacing\:tight li {
  margin-top: 0;
}

hr {
  box-sizing: content-box;
  border-top: var(--beat-xsmall) dotted RGB(0 0 0/15%);
  height: 0;
  margin: var(--beat-large) auto;
  overflow: visible;
}

img {
  display: block;
  width: 100%;
}

/**
 * Anything that should look like a button. Extended in _button.scss.
 */
.\%button {
  transition: all .3s;
  outline: var(--border-medium) solid transparent;
  outline-offset: calc(var(--border-medium) * -1);
  background: var(--c-neutral);
  color: var(--c-running-reversed);
  cursor: pointer;
  font-family: var(--ff-sans);
  transition: all .2s;
}

.\%button:focus {
  outline: var(--border-medium) solid var(--c-neutral);
  outline-offset: calc(var(--border-medium) * -1);
}

.\%button:hover {
  background: var(--c-neutral-dark);
  transition: all .2s;
}

.\%button:focus {
  background: var(--c-neutral-darker);
  transition: all .2s;
}

.\%button i.fas {
  display: inline;
}

button,
input[type="submit"] {
  background: var(--c-neutral);
  color: var(--c-running-reversed);
  cursor: pointer;
  font-family: var(--ff-sans);
  transition: all .2s;
}

button:hover,
input[type="submit"]:hover {
  background: var(--c-neutral-dark);
  transition: all .2s;
}

button:focus,
input[type="submit"]:focus {
  background: var(--c-neutral-darker);
  transition: all .2s;
}

button i.fas,
input[type="submit"] i.fas {
  display: inline;
}

dialog {
  --bg: white;
  background: var(--bg);
  border-radius: var(--beat-xsmall);
  box-shadow: 0 1rem 1rem rgba(0, 0, 0, 0.1), 0 2rem 4rem rgba(0, 0, 0, 0.3);
  font-size: 90%;
  width: var(--measure);
}

dialog:not([open]) {
  display: none;
}

dialog::backdrop,
dialog + .backdrop {
  backdrop-filter: blur(6px);
  background: rgba(0, 0, 0, 0.65);
  bottom: 0;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
}

dialog [data-close='dialog'] {
  background: transparent;
  border: 0;
  color: var(--c-neutral);
  cursor: pointer;
  height: var(--beat-large);
  line-height: var(--beat-large);
  margin: 0;
  padding-right: 2rem;
  overflow: hidden;
  width: 1rem;
}

dialog [data-close='dialog']:hover {
  color: var(--c-house);
  transition: all 0.2s;
}

dialog [data-close='dialog']:focus {
  background: transparent;
  color: inherit;
}

dialog [data-close='dialog'] i {
  font-size: var(--fs-large);
  font-style: normal;
}

dialog a {
  color: var(--c-trim-dark);
}

dialog a:hover {
  color: var(--c-running);
}

dialog article {
  border-radius: var(--beat);
}

dialog h1 {
  font-size: var(--fs-large);
}

dialog h1 a {
  text-decoration: none;
}

dialog h1 + p {
  font-size: 100%;
  font-weight: initial;
  text-transform: none;
}

dialog h2 {
  font-size: var(--fs-medium);
}

dialog .__button-close-wrapper {
  background-color: var(--bg);
  margin-top: 0;
  position: sticky;
  top: 0;
  z-index: 1;
}

/**
 * Used to create callout blocks. Can be created manually, or
 * with the {% callout %} shortcode.
 *
 */
.\%callout {
  --bg: var(--c-house-lightest);
  --space: var(--beat-large);
  --icon-color: var(--c-house-dark);
  --text-color: var(--hs-house);
  --text-lum: 50%;
  align-items: center;
  background: var(--bg);
  border: var(--border-medium) solid var(--icon-color);
  box-shadow: 0.25rem 0.25rem 0 HSL(var(--text-color) var(--lum-normal)/50%), 0.5rem 0.5rem 0 HSL(var(--text-color) var(--lum-normal)/40%);
  color: HSL(var(--text-color) var(--text-lum));
  display: flex;
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  gap: var(--beat-xxsmall);
  margin-bottom: var(--space);
  margin-top: var(--space);
  padding: var(--beat-small);
  padding-left: var(--beat-xsmall);
  position: relative;
}

.\%callout .__icon {
  color: var(--icon-color);
  display: flex;
  font-size: 2rem;
  flex-grow: 0;
  flex-shrink: 0;
  justify-content: center;
  width: 3rem;
}

.\%callout p {
  --head-space: 0;
  flex-grow: 1;
}

.\%callout.\&purpose\:info {
  --bg: var(--c-info-bg);
  --icon-color: var(--c-info);
  --text-color: var(--hs-info);
  --text-lum: var(--lum-dark);
}

.\%callout.\&purpose\:warning {
  --bg: var(--c-warning-bg);
  --icon-color: var(--c-warning);
  --text-color: var(--hs-warning);
}

.\%callout.\&tight {
  margin-bottom: var(--beat);
  margin-top: var(--beat);
}

/**
 * Initial paragraphs that should stand out more than others by
 * being larger, having a drop-cap, or whatever.
 */
.\%lede {
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  margin-bottom: 2rem;
  margin-top: 2rem;
  text-transform: uppercase;
}

.\%card {
  border: 1px solid var(--c-neutral-light);
  box-shadow: var(--beat-xxsmall) var(--beat-xxsmall) 0 rgba(0, 0, 0, 0.15);
}

details {
  --box-space: var(--beat);
  --box-space-above: var(--box-space);
  --box-space-below: var(--box-space);
  --box-space-left: var(--box-space);
  --box-space-right: var(--box-space);
  background: var(--bg);
  display: block;
  padding-bottom: var(--box-space-below);
  padding-left: var(--box-space-left);
  padding-right: var(--box-space-right);
  padding-top: var(--box-space-above);
  position: relative;
  border: 1px solid var(--c-neutral-light);
  box-shadow: var(--beat-xxsmall) var(--beat-xxsmall) 0 rgba(0, 0, 0, 0.15);
  transition: all .1s;
}

details.\&space\:tight {
  --box-space: var(--tight);
}

details.\&space\:xsmall {
  --box-space: var(--beat-xsmall);
}

details.\&space\:small {
  --box-space: var(--beat-small);
}

details.\&space\:medium {
  --box-space: var(--beat-medium);
}

details.\&space\:large {
  --box-space: var(--beat-large);
}

details.\&space\:xlarge {
  --box-space: var(--beat-xlarge);
}

details.\&space\:above\:tight {
  --box-space-above: var(--tight);
}

details.\&space\:above\:xsmall {
  --box-space-above: var(--beat-xsmall);
}

details.\&space\:above\:small {
  --box-space-above: var(--beat-small);
}

details.\&space\:above\:medium {
  --box-space-above: var(--beat-medium);
}

details.\&space\:above\:large {
  --box-space-above: var(--beat-large);
}

details.\&space\:above\:xlarge {
  --box-space-above: var(--beat-xlarge);
}

details.\&space\:below\:tight {
  --box-space-below: var(--tight);
}

details.\&space\:below\:xsmall {
  --box-space-below: var(--beat-xsmall);
}

details.\&space\:below\:small {
  --box-space-below: var(--beat-small);
}

details.\&space\:below\:medium {
  --box-space-below: var(--beat-medium);
}

details.\&space\:below\:large {
  --box-space-below: var(--beat-large);
}

details.\&space\:below\:xlarge {
  --box-space-below: var(--beat-xlarge);
}

details.\&space\:left\:tight {
  --box-space-left: var(--tight);
}

details.\&space\:left\:xsmall {
  --box-space-left: var(--beat-xsmall);
}

details.\&space\:left\:small {
  --box-space-left: var(--beat-small);
}

details.\&space\:left\:medium {
  --box-space-left: var(--beat-medium);
}

details.\&space\:left\:large {
  --box-space-left: var(--beat-large);
}

details.\&space\:left\:xlarge {
  --box-space-left: var(--beat-xlarge);
}

details.\&space\:right\:tight {
  --box-space-right: var(--tight);
}

details.\&space\:right\:xsmall {
  --box-space-right: var(--beat-xsmall);
}

details.\&space\:right\:small {
  --box-space-right: var(--beat-small);
}

details.\&space\:right\:medium {
  --box-space-right: var(--beat-medium);
}

details.\&space\:right\:large {
  --box-space-right: var(--beat-large);
}

details.\&space\:right\:xlarge {
  --box-space-right: var(--beat-xlarge);
}

details.\&suppress\:owl {
  --head-space: initial;
}

details:hover {
  box-shadow: var(--beat-xsmall) var(--beat-xsmall) 0 RGB(0 0 0/10%);
  transition: all .2s;
}

details summary {
  color: var(--c-running);
  cursor: pointer;
  font-weight: bold;
  padding: var(--beat);
  margin-bottom: calc(var(--box-space-below) * -1);
  margin-left: calc(var(--box-space-left) * -1);
  margin-right: calc(var(--box-space-right) * -1);
  margin-top: calc(var(--box-space-above) * -1);
  transition: all .2s;
}

details summary:focus {
  outline: var(--border-medium) solid var(--c-house);
}

details[open] {
  padding-bottom: 2rem;
  transition: all .2s;
}

details[open] summary {
  color: var(--c-house);
  margin-bottom: calc(1rem - var(--border-medium));
  padding-bottom: calc(1rem + var(--border-large));
  padding-top: calc(1rem + var(--border-large));
}

blockquote {
  font-style: italic;
  padding-left: var(--beat-large);
  position: relative;
}

blockquote cite {
  display: block;
  text-align: right;
}

blockquote cite::before, blockquote cite::after {
  content: '';
}

blockquote::before {
  color: RGB(0 0 0/20%);
  content: "“";
  font-family: var(--ff-fancy);
  font-size: 4rem;
  font-style: normal;
  left: -.2rem;
  line-height: 0;
  position: absolute;
  top: 1.2rem;
}

.\&reversed blockquote::before {
  color: RGB(255 255 255/20%);
}

/**
 * Creates form-like boxes for visually emphasizing an important
 * place of interaction, such as calls to action.
 */
.\%action-box form {
  display: inline-block;
}

.\%action-box form:first-of-type {
  margin-bottom: var(--beat-small);
  margin-right: var(--beat-small);
}

/**
* Any kind of important call to action. Can extend buttons or
 * anchors.
 */
@keyframes rotate-gradient {
  to {
    --gradient-angle: 360deg;
  }
}

@property --gradient-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.\%action-clicker {
  --button-color1: var(--c-house);
  --button-color2: var(--c-trim);
  --text-color: var(--c-running-reversed);
  --gradient-angle: 0deg;
  backdrop-filter: blur(7px);
  background-color: var(--button-color1);
  border: var(--border-small) solid var(--button-color1);
  box-shadow: calc(var(--box-space) * .7) calc(var(--box-space) * .7) 0 rgba(0, 0, 0, 0.1);
  color: var(--text-color) !important;
  cursor: pointer;
  display: inline-block;
  font-weight: var(--fw-heavy);
  line-height: 1.2;
  padding-right: calc(var(--box-space-right) + 2.2rem);
  position: relative;
  text-decoration: none;
  text-align: center;
  transition: all .4s;
}

.\%action-clicker::after {
  background: rgba(0, 0, 0, 0.07);
  border-radius: 100%;
  content: '⌄';
  display: inline-block;
  font-size: 1.5rem;
  height: 2rem;
  line-height: 1.25rem;
  position: absolute;
  right: .75rem;
  text-align: center;
  top: 50%;
  transform: rotate(-90deg) translateX(50%);
  width: 2rem;
}

.\%action-clicker.\&prev {
  padding-left: calc(var(--box-space-left) + 2.2rem);
  padding-right: var(--box-space-right);
}

.\%action-clicker.\&prev::after {
  left: .75rem;
  line-height: 1.5rem;
  transform: rotate(90deg) translateX(-50%);
}

.\&reversed .\%action-clicker {
  --button-color1: rgba(var(--c-bg-rgb), .85);
  --text-color: var(--c-house);
}

.\&reversed .\%action-clicker:hover, .\&reversed .\%action-clicker:focus, .\&reversed .\%action-clicker:active {
  --text-color: var(--c-running-reversed);
  border-color: transparent;
}

.\%action-clicker:hover, .\%action-clicker:focus, .\%action-clicker:active {
  animation: 3s rotate-gradient cubic-bezier(0.12, 0.01, 0.76, 1) infinite;
  backdrop-filter: blur(7px);
  background-color: var(--button-color2);
  border-color: RGB(0 0 0/20%);
  box-shadow: calc(var(--box-space) * .5) calc(var(--box-space) * .5) 0 rgba(0, 0, 0, 0.15);
  transform: translate(calc(var(--box-space) * .25), calc(var(--box-space) * .25));
  transition: all .2s;
}

.\%action-clicker:hover::after, .\%action-clicker:focus::after, .\%action-clicker:active::after {
  background: rgba(0, 0, 0, 0.15);
  transition: background .2s;
}

.\%action-clicker:focus, .\%action-clicker:active {
  box-shadow: 0 0 0 rgba(0, 0, 0, 0.2), 0 var(--border-small) var(--border-medium) var(--border-medium) rgba(0, 0, 0, 0.15) inset;
  cursor: wait;
  outline-style: auto;
  outline-width: initial;
  transform: translate(calc(var(--box-space) * .7), calc(var(--box-space) * .7));
}

.\%action-clicker small {
  color: var(--text-color);
  display: block;
  font-size: .6rem;
  font-weight: var(--fw-bold);
  letter-spacing: 1px;
  margin-top: var(--border-medium);
  opacity: .75;
  text-transform: uppercase;
}

.\%action-clicker.\&suppress\:chevron {
  padding-right: var(--box-space-right);
}

.\%action-clicker.\&suppress\:chevron::after {
  display: none;
}

.\%action-clicker.\&secondary {
  --button-color1: transparent;
  --text-color: var(--c-house);
  border-color: var(--text-color);
}

.\%action-clicker.\&secondary:hover {
  --button-color2: var(--c-running-reversed);
  --text-color: var(--c-trim);
}

.\&reversed .\%action-clicker.\&secondary {
  --text-color: var(--c-running-reversed);
  border-color: var(--text-color);
}

.\&reversed .\%action-clicker.\&secondary:hover {
  background: rgba(var(--c-bg-rgb), 0.3);
}

.\%action-clicker.\&secondary:focus, .\%action-clicker.\&secondary:active {
  --button-color1: var(--c-trim);
  --button-color2: transparent;
  --text-color: var(--c-trim);
}

.\%action-clicker[disabled], .\%action-clicker[data-disabled] {
  --button-color1: var(--c-neutral-light);
  --text-color: var(--c-neutral-dark);
  border-color: transparent;
  box-shadow: none;
  transition: all .5s;
}

.\%action-clicker[disabled]::after, .\%action-clicker[data-disabled]::after {
  background: transparent;
}

.\%action-clicker[disabled]:hover, .\%action-clicker[disabled]:focus, .\%action-clicker[data-disabled]:hover, .\%action-clicker[data-disabled]:focus {
  --button-color2: var(--c-neutral-light);
  transform: none;
  transition: all .5s;
}

.\%action-clicker[disabled] small, .\%action-clicker[data-disabled] small {
  opacity: 1;
}

.\%action-clicker:first-child {
  margin-bottom: var(--beat-small);
  margin-right: var(--beat-small);
}

.\%action-clicker:not(:first-child) {
  margin-top: 0;
}

.\%skip-link {
  display: block;
  height: 0;
  left: 0;
  opacity: 0;
  overflow: hidden;
  position: fixed;
  transition: transform .3s;
  top: 0;
  width: 0;
  z-index: 2;
}

.\%skip-link span {
  display: none;
}

.\%skip-link:focus {
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(0.5rem);
  height: 100vh;
  left: 0;
  opacity: 1;
  outline: 0;
  overflow: visible;
  top: 0;
  width: 100vw;
}

.\%skip-link:focus span {
  background: white;
  border: 0.15rem solid var(--c-focus);
  border-radius: .2rem;
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem dodgerblue, 0 0.2rem 0.5rem 0.1rem rgba(0, 0, 0, 0.25);
  color: var(--c-focus);
  display: block;
  font-size: var(--fs-small);
  font-weight: var(--fw-heavy);
  left: 50%;
  padding: var(--beat-small);
  position: absolute;
  text-decoration: none;
  text-transform: uppercase;
  transform: translate(-50%, -50%);
  top: 50%;
}

.\%skip-link:active span {
  background: var(--c-focus);
  color: white;
}

select + label {
  display: block;
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  margin-top: .2rem;
  margin-left: .1rem;
}

select + label small {
  font-weight: var(--fw-normal);
  line-height: 1.25rem;
  margin-left: var(--beat-xsmall);
}

[type="email"] {
  background-color: transparent;
  border-bottom: var(--border-medium) dotted var(--c-input-border);
  margin-top: .5rem;
  padding: var(--beat-xsmall);
  padding-left: .05rem;
  transition: all .2s;
  width: var(--measure-min);
}

[type="email"]:hover, [type="email"]:focus, [type="email"]:active {
  transition: all .2s;
}

[type="email"]:focus, [type="email"]:active {
  border-style: solid;
}

[type="email"]::placeholder {
  color: transparent;
}

[type="email"] + label {
  display: block;
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
}

[type="email"] + label small {
  font-weight: var(--fw-normal);
  line-height: 1.25rem;
  margin-left: var(--beat-xsmall);
}

[type="number"] {
  background-color: transparent;
  border-bottom: var(--border-medium) dotted var(--c-input-border);
  margin-top: .5rem;
  padding: var(--beat-xsmall);
  padding-left: .05rem;
  transition: all .2s;
  width: var(--measure-min);
}

[type="number"]:hover, [type="number"]:focus, [type="number"]:active {
  transition: all .2s;
}

[type="number"]:focus, [type="number"]:active {
  border-style: solid;
}

[type="number"]::placeholder {
  color: transparent;
}

[type="number"] + label {
  display: block;
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
}

[type="number"] + label small {
  font-weight: var(--fw-normal);
  line-height: 1.25rem;
  margin-left: var(--beat-xsmall);
}

[type="password"] {
  background-color: transparent;
  border-bottom: var(--border-medium) dotted var(--c-input-border);
  margin-top: .5rem;
  padding: var(--beat-xsmall);
  padding-left: .05rem;
  transition: all .2s;
  width: var(--measure-min);
}

[type="password"]:hover, [type="password"]:focus, [type="password"]:active {
  transition: all .2s;
}

[type="password"]:focus, [type="password"]:active {
  border-style: solid;
}

[type="password"]::placeholder {
  color: transparent;
}

[type="password"] + label {
  display: block;
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
}

[type="password"] + label small {
  font-weight: var(--fw-normal);
  line-height: 1.25rem;
  margin-left: var(--beat-xsmall);
}

[type="search"] {
  background-color: transparent;
  border-bottom: var(--border-medium) dotted var(--c-input-border);
  margin-top: .5rem;
  padding: var(--beat-xsmall);
  padding-left: .05rem;
  transition: all .2s;
  width: var(--measure-min);
}

[type="search"]:hover, [type="search"]:focus, [type="search"]:active {
  transition: all .2s;
}

[type="search"]:focus, [type="search"]:active {
  border-style: solid;
}

[type="search"]::placeholder {
  color: transparent;
}

[type="search"] + label {
  display: block;
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
}

[type="search"] + label small {
  font-weight: var(--fw-normal);
  line-height: 1.25rem;
  margin-left: var(--beat-xsmall);
}

[type="tel"] {
  background-color: transparent;
  border-bottom: var(--border-medium) dotted var(--c-input-border);
  margin-top: .5rem;
  padding: var(--beat-xsmall);
  padding-left: .05rem;
  transition: all .2s;
  width: var(--measure-min);
}

[type="tel"]:hover, [type="tel"]:focus, [type="tel"]:active {
  transition: all .2s;
}

[type="tel"]:focus, [type="tel"]:active {
  border-style: solid;
}

[type="tel"]::placeholder {
  color: transparent;
}

[type="tel"] + label {
  display: block;
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
}

[type="tel"] + label small {
  font-weight: var(--fw-normal);
  line-height: 1.25rem;
  margin-left: var(--beat-xsmall);
}

[type="text"] {
  background-color: transparent;
  border-bottom: var(--border-medium) dotted var(--c-input-border);
  margin-top: .5rem;
  padding: var(--beat-xsmall);
  padding-left: .05rem;
  transition: all .2s;
  width: var(--measure-min);
}

[type="text"]:hover, [type="text"]:focus, [type="text"]:active {
  transition: all .2s;
}

[type="text"]:focus, [type="text"]:active {
  border-style: solid;
}

[type="text"]::placeholder {
  color: transparent;
}

[type="text"] + label {
  display: block;
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
}

[type="text"] + label small {
  font-weight: var(--fw-normal);
  line-height: 1.25rem;
  margin-left: var(--beat-xsmall);
}

[type="url"] {
  background-color: transparent;
  border-bottom: var(--border-medium) dotted var(--c-input-border);
  margin-top: .5rem;
  padding: var(--beat-xsmall);
  padding-left: .05rem;
  transition: all .2s;
  width: var(--measure-min);
}

[type="url"]:hover, [type="url"]:focus, [type="url"]:active {
  transition: all .2s;
}

[type="url"]:focus, [type="url"]:active {
  border-style: solid;
}

[type="url"]::placeholder {
  color: transparent;
}

[type="url"] + label {
  display: block;
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
}

[type="url"] + label small {
  font-weight: var(--fw-normal);
  line-height: 1.25rem;
  margin-left: var(--beat-xsmall);
}

form ul {
  list-style: none;
}

[type="checkbox"],
[type="radio"] {
  position: absolute;
  opacity: .01;
}

[type="checkbox"] + label,
[type="radio"] + label {
  background: transparent;
  cursor: pointer;
  display: block;
  margin-left: -.15rem;
  margin-top: 0;
  padding: var(--beat-xsmall) var(--beat-small) var(--beat-xsmall) 2rem;
  position: relative;
  text-align: left;
  transition: all .3s;
}

[type="checkbox"] + label:hover,
[type="radio"] + label:hover {
  background: rgba(0, 0, 0, 0.1);
  transition: all .3s;
}

[type="checkbox"] + label::before, [type="checkbox"] + label::after,
[type="radio"] + label::before,
[type="radio"] + label::after {
  background: var(white);
  border: var(--border-medium) solid var(--c-input-border-active);
  box-shadow: var(--beat-xxsmall) var(--beat-xxsmall) 0 rgba(0, 0, 0, 0.1) inset;
  content: '';
  position: absolute;
  height: 23px;
  left: .25rem;
  top: var(--beat-xsmall);
  width: 23px;
  transition: all .275s;
  will-change: transform;
}

[type="checkbox"] + label::after,
[type="radio"] + label::after {
  background: var(--c-input-border-active);
  border-color: var(--c-input-border-active);
  color: white;
  content: '✕';
  display: inline-block;
  font-size: 23px;
  font-weight: bold;
  line-height: 24px;
  position: absolute;
  text-align: center;
  transition: all .2s;
  will-change: transform;
}

[type="checkbox"]:not(:checked) + label::after,
[type="radio"]:not(:checked) + label::after {
  opacity: 0;
  transform: scale(0) rotate(45deg);
  will-change: transform;
}

[type="checkbox"]:checked + label::after,
[type="radio"]:checked + label::after {
  box-shadow: 0.1rem 0.1rem 0.1rem rgba(0, 0, 0, 0.2);
  opacity: 1;
  transform: scale(1) rotate(0);
  will-change: transform;
}

[type="checkbox"]:focus + label::before,
[type="radio"]:focus + label::before {
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 0 0.3rem HSL(357 98% 40%/20%);
}

[type="radio"] + label {
  display: inline-block;
}

[type="radio"] + label::before, [type="radio"] + label::after {
  border-radius: 50%;
}

[type="radio"] + label::after {
  content: '•';
  font-size: 46px;
}

[type="number"] {
  color: var(--c-neutral-darkest);
  font-weight: var(--fw-bold);
  padding: var(--beat-xxsmall);
  padding-right: 0;
  text-align: center;
  width: 7ex;
}

[type="number"]::placeholder {
  color: var(--c--neutral);
}

[type="number"]:focus::placeholder, [type="number"]:active::placeholder {
  color: transparent;
}

label.\&attached {
  background: var(--c-input-border);
  color: white;
  display: inline-block;
  font-weight: var(--fw-medium);
  padding: var(--beat-xxsmall) var(--beat-small);
  padding-top: calc(var(--beat-xxsmall) + var(--border-medium));
  position: relative;
  z-index: 0;
}

label.\&attached + input,
label.\&attached + textarea {
  display: block;
  margin-top: 0;
  position: relative;
  width: 100%;
}

select {
  background: transparent;
  border: var(--border-medium) solid var(--c-input-border);
  box-shadow: var(--beat-xxsmall) var(--beat-xxsmall) 0 RGB(0 0 0/12%);
  cursor: pointer;
  height: 2rem;
  padding: var(--beat-xsmall);
  padding-top: .25rem;
}

textarea {
  background-color: transparent;
  border-bottom: var(--border-medium) dotted var(--c-input-border);
  margin-top: .5rem;
  padding: var(--beat-xsmall);
  padding-left: .05rem;
  transition: all .2s;
  width: var(--measure-min);
  display: block;
  margin-bottom: var(--beat-small);
  padding: var(--beat-small);
  width: 100%;
}

textarea:hover, textarea:focus, textarea:active {
  transition: all .2s;
}

textarea:focus, textarea:active {
  border-style: solid;
}

textarea::placeholder {
  color: transparent;
}

textarea + label {
  display: block;
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
}

textarea + label small {
  font-weight: var(--fw-normal);
  line-height: 1.25rem;
  margin-left: var(--beat-xsmall);
}

.\&narrow {
  width: calc(var(--measure) / 3 - var(--battery-space) * 2);
}

.\&half {
  width: calc(var(--measure) / 2 - var(--battery-space) * 3);
}

.\&wide {
  width: calc(var(--measure) * (2/3) - var(--battery-space) * 3);
}

progress {
  height: 1rem;
  width: 100%;
}

label + progress {
  margin-top: 0;
}

progress[value]::-webkit-progress-bar {
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: var(--border-medium);
}

progress[value]::-webkit-progress-value {
  background-image: -webkit-linear-gradient(-45deg, transparent 33%, rgba(0, 0, 0, 0.1) 33%, rgba(0, 0, 0, 0.1) 66%, transparent 66%), -webkit-linear-gradient(top, rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0.25)), -webkit-linear-gradient(left, var(--c-progress-bar-1), var(--c-progress-bar-2));
  border-radius: 2px;
  background-size: 2rem 1rem, 100% 100%, 100% 100%;
}

progress[value]::-moz-progress-bar {
  background-image: -moz-linear-gradient(135deg, transparent 33%, rgba(0, 0, 0, 0.1) 33%, rgba(0, 0, 0, 0.1) 66%, transparent 66%), -moz-linear-gradient(top, rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0.25)), -moz-linear-gradient(left, var(--c-progress-bar-1), var(--c-progress-bar-2));
  border-radius: var(--border-medium);
  background-size: 2rem 1rem, 100% 100%, 100% 100%;
}

label[for="progress"] {
  background: transparent;
  color: var(--c-house);
  text-transform: uppercase;
  font-size: var(--fs-small);
  font-weight: var(--fw-heavy);
  padding-left: 0;
}

address {
  font-style: normal;
}

/**
 * Change the cursor on busy elements in all browsers.
 */
[aria-busy="true"] {
  cursor: progress;
}

/**
 * Change the cursor on control elements in all browsers.
 */
[aria-controls] {
  cursor: pointer;
}

/**
 * Change the cursor on disabled, not-editable, or otherwise
 * inoperable elements in all browsers.
 */
[aria-disabled="true"],
[disabled] {
  cursor: not-allowed;
}

/**
 * Hide the element visually but leave it accessible to
 * screen readers.
 */
.\&aria-only {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

:target {
  animation-name: focus-highlight;
  animation-duration: 9s;
  animation-iteration-count: 1;
}

/**
 * Main hero area at the top of a page.
 */
.\%hero {
  background: var(--c-neutral-darkest);
  box-shadow: 0 0 10rem 10rem RGB(0 0 0/50%) inset;
  color: var(--c-bg);
  margin-top: calc(var(--beat-xlarge) * 2 * -1);
  padding-bottom: 14vh;
  padding-top: 18vh;
  position: relative;
}

.\%hero a:not([class="%action-clicker"]):link, .\%hero a:not([class="%action-clicker"]):visited {
  color: var(--c-bg);
}

.\%hero a:not([class="%action-clicker"]):hover {
  background: var(--c-house);
}

.\%hero div,
.\%hero form,
.\%hero h1,
.\%hero p {
  margin-top: var(--beat-large);
  position: relative;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.95), var(--beat-xxsmall) var(--beat-xxsmall) var(--beat-small) rgba(0, 0, 0, 0.65);
  z-index: 2;
}

.\%hero::after {
  background: radial-gradient(ellipse at top, rgba(255, 255, 255, 0.35), black);
  box-shadow: 0 10rem 10rem RGB(0 0 0/5%) inset;
  display: block;
  content: ' ';
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1;
}

.\%hero h1 {
  background: none;
  font-family: var(--ff-fancy);
}

.\%hero img {
  height: 100%;
  left: 0;
  max-width: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  width: 100%;
}

/**
 * Set some basic typography for boring stuff we don't want so prominent
 */
.\%fineprint {
  font-size: var(--fs-xsmall);
  opacity: .75;
}

/**
* Create a table comparing price options.
*/
.\%pricing-table {
  --columns-space: 0;
  margin-top: var(--beat-xlarge);
}

.\%pricing-table ul {
  list-style: none;
  text-align: center;
}

.\%pricing-table ul h3 {
  background: RGB(0 0 0/5%);
  border-top: var(--border-medium) solid var(--c-house);
  padding: var(--beat) 0;
  position: relative;
}

.\%pricing-table ul h3 b {
  display: block;
}

.\%pricing-table ul h3 small {
  --banner-color: var(--c-trim);
  background: white;
  border: var(--border-small) solid var(--banner-color);
  color: var(--banner-color);
  display: block;
  padding: var(--beat-xxsmall);
  position: absolute;
  transform: rotate(-45deg);
}

.\%pricing-table ul h4 {
  background: RGB(0 0 0/10%);
  padding: var(--beat-xsmall);
}

.\%pricing-table ul li {
  background: RGB(0 0 0/5%);
  border-bottom: var(--border-medium) solid RGB(0 0 0/10%);
  font-size: var(--fs-xsmall);
  margin: 0;
  padding: var(--beat-small);
}

.\%pricing-table ul li:last-of-type {
  border-color: var(--c-house);
}

.\%pricing-table ul.__primary {
  background: var(--gradient-house);
  border: var(--border-large) solid var(--c-house-dark);
  box-shadow: var(--beat-xsmall) var(--beat-xsmall) 0 RGB(0 0 0/5%);
  color: white;
  margin-top: calc(var(--beat-small) * -1);
  padding-bottom: var(--beat);
  position: relative;
  z-index: 1;
}

.\%pricing-table ul.__primary h3 {
  background: transparent;
  border-top: 0;
  color: white;
  margin-top: var(--beat-xsmall);
}

.\%pricing-table ul.__primary li {
  background: transparent;
}

.\%pricing-table ul.__primary li:last-of-type {
  border-bottom: none;
}

.\%pricing-table ul.__primary small {
  --banner-color: var(--c-house-dark);
  left: -1.35rem;
  top: .45rem;
}

.\%pricing-table ul.__secondary small {
  right: -1.15rem;
  top: .4rem;
  transform: rotate(45deg);
}

/**
 * Adjust styles of lists specifically used for inputs rather than content.
 */
.\%input-list li {
  font-size: .95rem;
  list-style: none;
  margin: 0;
  margin-top: var(--beat-small);
  margin-bottom: var(--beat-small);
}

.\%input-list .\@columns li:first-of-type {
  margin-right: var(--columns-space);
}

.\%input-list ul {
  margin-top: 0;
}

.\%input-list .__hint {
  color: var(--c-info-dark);
  display: inline-block;
  line-height: 1.2;
  margin-left: var(--beat-xxsmall);
  margin-top: var(--beat-xsmall);
  padding-left: 1.7rem;
  position: relative;
}

.\%input-list .__hint i[class^="fa"] {
  color: var(--c-info);
  left: .5rem;
  position: absolute;
  top: .1rem;
}

main {
  background-color: transparent;
  min-height: 75vh;
  overflow: hidden;
}

main > article {
  margin-top: var(--beat-large);
}

.page\:home main {
  overflow: visible;
}

fieldset {
  border: var(--border-medium) solid var(--c-house-lighter);
  padding: var(--beat-xsmall) 1rem;
}

fieldset legend {
  color: var(--c-house);
  font-size: var(--fs-xsmall);
  font-weight: var(--fw-heavy);
  letter-spacing: .5px;
  padding: 0 var(--border-medium);
  text-transform: uppercase;
}

/**
 * Table of content blocks created using markdown-it-table-of-contents.
 * Not put under /vendor because this plugin allows us to specify
 * an Anvl-compliant class name.
 */
.\%toc ul {
  margin-top: 0;
}

.\%toc ul li {
  font-size: 95%;
  margin-top: var(--beat-xsmall);
}

.\%toc ul li::marker {
  color: var(--c-neutral-light);
  content: '+ ';
  font-size: var(--xxsmall);
}

.\%toc ul li a:link,
.\%toc ul li a:visited {
  border-color: var(--c-neutral-lighter);
  color: var(--c-running);
}

.\%toc ul li a:hover {
  border-color: var(--c-running);
}

/**
 * Creates form-like boxes for visually emphasizing an important
 * place of interaction, such as calls to action.
 */
.\%signature {
  --head-space: 0;
  position: relative;
  background-image: linear-gradient(45deg, RGB(0 0 0/7%) 25%, transparent 25%, transparent 50%, RGB(0 0 0/7%) 50%, RGB(0 0 0/7%) 75%, transparent 75%, transparent);
  background-size: 5px 5px;
  list-style: none;
}

.\%signature.\&framer {
  border-top: var(--border-large) solid RGB(0 0 0/10%);
}

.\%signature.\&framer::before {
  background: RGB(0 0 0/10%);
  color: var(--c-neutral-darker);
  content: "Framer";
  font-size: var(--fs-xsmall);
  font-weight: var(--fw-medium);
  letter-spacing: 1px;
  padding: var(--beat-xsmall) var(--beat-small);
  position: absolute;
  right: 0;
  text-transform: uppercase;
  top: 0;
}

.\%signature a {
  border-color: var(--c-neutral-light) !important;
  color: var(--c-neutral-darkest) !important;
}

.\%signature a:hover {
  border-color: var(--c-neutral-darker) !important;
  color: var(--c-running) !important;
}

.\%signature li {
  margin-left: 0;
}

.\%signature[open] summary {
  background: var(--bg);
  border-bottom: var(--border-medium) solid RGB(0 0 0/7%);
  margin-bottom: 2rem;
}

.\%signature summary:focus {
  border-color: transparent;
}

.\%signature .__country,
.\%signature .__details,
.\%signature .__location {
  font-size: var(--fs-small);
}

.\%signature .__country {
  color: var(--c-running);
  text-transform: uppercase;
}

.\%signature .__details {
  color: var(--c-neutral-darker);
}

.\%signature .__email {
  background: var(--bg);
  border-top: var(--border-medium) solid RGB(0 0 0/7%);
  color: var(--c-neutral-darkest);
  display: none;
  font-size: var(--fs-xsmall);
  margin-bottom: -2rem;
  margin-left: calc(var(--beat)*-1);
  margin-right: calc(var(--beat)*-1);
  margin-top: var(--beat);
  padding: var(--beat);
}

.\%signature .__name {
  font-family: var(--ff-fancy);
}

/**
 * Site header, including nav.
 */
.\+site-header {
  display: flex;
  gap: 2rem;
  height: var(--beat-xlarge);
  justify-content: space-around;
  margin: auto;
  position: relative;
  width: 100vw;
  z-index: 3;
  /**
	 * Adjustments for the secondary nav. This unfortunately includes
	 * some shameful magic number adjustments.
	 */
}

@media (max-width: 48rem) {
  .\+site-header {
    /*
		 * Shift the main nav element below the logo on narrower screens that can't
		 * accommodate its content next to the secondary nav.
		 */
    flex-direction: column;
    gap: 0;
    justify-content: space-between;
  }
  .\+site-header .__nav-wrapper {
    margin-left: 0 !important;
  }
  .\+site-header nav[aria-label="main"] {
    margin-left: var(--beat-small);
  }
}

.\+site-header h1 {
  flex-shrink: 0;
  line-height: 0;
  margin: 0;
  padding-left: var(--beat);
  text-align: left;
  text-shadow: none;
}

.\+site-header h1 a {
  color: var(--c-house);
  display: inline-block;
  font-size: var(--fs-medium);
  padding: var(--beat-small);
  text-decoration: none;
}

.\+site-header h1 a svg {
  height: var(--beat-large);
  width: auto;
}

.\+site-header nav {
  display: flex;
}

@media (min-width: 32rem) {
  .\+site-header nav {
    --battery-space: 1rem;
    --constrain-width: 100%;
  }
  .\+site-header nav > * {
    /**
		* This is a wrapper until flex-box gets a well-supported
		* gap property; we need to calculate some negative
		* margins to get the battery items positioned correctly.
		*/
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin: calc(var(--battery-space) / 2 * -1);
  }
  .\+site-header nav > * > * {
    margin: calc(var(--battery-space) / 2);
    max-width: var(--constrain-width);
  }
  .\+site-header nav.\&arrange\:centered > * {
    justify-content: center;
  }
  .\+site-header nav.\&arrange\:right > * {
    justify-content: flex-end;
  }
  .\+site-header nav.\&suppress\:scroller {
    overflow: hidden;
  }
  .\+site-header nav.\&space\:tight {
    --battery-space: var(--tight);
  }
  .\+site-header nav.\&space\:xsmall {
    --battery-space: var(--beat-xsmall);
  }
  .\+site-header nav.\&space\:small {
    --battery-space: var(--beat-small);
  }
  .\+site-header nav.\&space\:medium {
    --battery-space: var(--beat-medium);
  }
  .\+site-header nav.\&space\:large {
    --battery-space: var(--beat-large);
  }
  .\+site-header nav.\&space\:xlarge {
    --battery-space: var(--beat-xlarge);
  }
  .\+site-header nav.\&constrain\:height\:max {
    --constrain-height: 100vh;
  }
  .\+site-header nav.\&constrain\:width\:max {
    --constrain-width: 100vw;
  }
  .\+site-header nav.\&constrain\:width\:measure {
    --constrain-width: var(--measure);
  }
  .\+site-header nav.\&constrain\:width\:medium {
    --constrain-width: calc(var(--measure)/2);
  }
  .\+site-header nav.\&constrain\:width\:min {
    --constrain-width: var(--measure-min);
  }
}

@media (max-width: 32rem) {
  .\+site-header nav {
    --constrain-width: 100%;
    --stack-space: var(--beat);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    /**
	 * Position some elements at the top, and others at the bottom, after the
	 * nth element.
	 */
    margin-left: 0 !important;
  }
  .\+site-header nav > * {
    margin-bottom: 0;
    margin-top: 0;
    max-width: var(--constrain-width);
  }
  .\+site-header nav > * + * {
    margin-top: var(--stack-space);
  }
  .\+site-header nav:only-child {
    height: 100%;
  }
  .\+site-header nav.\&space\:tight {
    --stack-space: var(--tight);
  }
  .\+site-header nav.\&space\:xsmall {
    --stack-space: var(--beat-xsmall);
  }
  .\+site-header nav.\&space\:small {
    --stack-space: var(--beat-small);
  }
  .\+site-header nav.\&space\:medium {
    --stack-space: var(--beat-medium);
  }
  .\+site-header nav.\&space\:large {
    --stack-space: var(--beat-large);
  }
  .\+site-header nav.\&space\:xlarge {
    --stack-space: var(--beat-xlarge);
  }
  .\+site-header nav.\&constrain\:height\:max {
    --constrain-height: 100vh;
  }
  .\+site-header nav.\&constrain\:width\:max {
    --constrain-width: 100vw;
  }
  .\+site-header nav.\&constrain\:width\:measure {
    --constrain-width: var(--measure);
  }
  .\+site-header nav.\&constrain\:width\:medium {
    --constrain-width: calc(var(--measure)/2);
  }
  .\+site-header nav.\&constrain\:width\:min {
    --constrain-width: var(--measure-min);
  }
  .\+site-header nav.\&split-after-1 > :nth-child(1) {
    margin-bottom: auto;
  }
  .\+site-header nav.\&split-after-2 > :nth-child(2) {
    margin-bottom: auto;
  }
  .\+site-header nav.\&split-after-3 > :nth-child(3) {
    margin-bottom: auto;
  }
  .\+site-header nav.\&sticky-bottom > :nth-last-child(2) {
    margin-bottom: auto;
  }
}

.\+site-header nav ul {
  list-style: none;
  margin: 0;
  position: relative;
}

.\+site-header nav ul li {
  position: relative;
}

@media (max-width: 32rem) {
  .\+site-header nav ul li {
    margin: 0;
  }
}

.\+site-header nav ul li:hover ul {
  backdrop-filter: blur(0.5rem);
  background: rgba(var(--c-bg-rgb), 0.9);
  border-radius: .2rem;
  border-top: 0.2rem solid var(--c-house);
  box-shadow: 0 0.5rem 1rem 0.25rem rgba(0, 0, 0, 0.15);
  height: auto;
  opacity: 1;
  transition: all .3s;
  will-change: height, opacity;
}

.\+site-header nav ul li a {
  color: var(--c-running);
  display: block;
  font-family: var(--ff-alt);
  font-size: var(--fs-small);
  font-weight: var(--fw-normal);
  padding: 0.31rem var(--beat-xsmall);
  text-decoration: none;
  transition: all .5s;
}

@media (max-width: 32rem) {
  .\+site-header nav ul li a {
    border: 0;
    padding: var(--beat-small) var(--beat);
  }
}

.\+site-header nav ul li a:hover, .\+site-header nav ul li a.is\:active, .\+site-header nav ul li a[aria-current='page'] {
  color: var(--c-house);
  text-decoration: none;
}

@media (max-width: 32rem) {
  .\+site-header nav ul li a:hover, .\+site-header nav ul li a.is\:active, .\+site-header nav ul li a[aria-current='page'] {
    background: RGB(255 255 255/10%);
    border-color: transparent;
  }
}

.\+site-header nav ul li a.\%action-clicker {
  --box-space: var(--box-space-above);
  padding-top: var(--box-space-above);
  padding-right: var(--box-space-right);
  padding-bottom: var(--box-space-below);
  padding-left: var(--box-space-left);
  margin-bottom: .1rem;
  margin-top: 0;
  margin-right: 0;
  margin-left: var(--beat-small);
}

.\+site-header nav ul li a:focus {
  outline-color: currentColor;
}

@media (max-width: 32rem) {
  .\+site-header nav ul li a:focus {
    background: var(--c-house);
    outline-color: transparent;
  }
}

.\+site-header nav ul li > a:not(:only-child) {
  padding-right: 1rem;
  position: relative;
}

.\+site-header nav ul li > a:not(:only-child)::after {
  content: '⌄';
  display: block;
  position: absolute;
  right: var(--beat-xxsmall);
  top: var(--beat-xxsmall);
}

.\+site-header nav ul li ul {
  height: 0;
  margin-left: -1rem;
  min-width: 14rem;
  opacity: 0;
  overflow: hidden;
  padding: var(--beat-small);
  position: absolute;
  left: var(--offset);
  top: 1.75rem;
  z-index: 3;
}

.\+site-header nav ul li ul li {
  margin-left: 0;
  width: 100%;
}

.\+site-header nav ul li ul a {
  --margin-correct: calc(var(--beat-small) * -1);
  color: black !important;
  font-family: var(--ff-running);
  font-size: var(--fs-xsmall);
  font-weight: var(--fw-medium);
  padding: var(--beat-small);
  padding-left: var(--beat);
  margin-left: var(--margin-correct);
  margin-right: var(--margin-correct);
  text-shadow: none;
}

.\+site-header nav ul li ul a:hover {
  background: rgba(var(--c-house-rgb), 0.1);
  border-color: transparent;
  color: var(--c-house) !important;
}

.\+site-header.\&reversed nav[aria-label="secondary"] ul li a.\%action-clicker {
  --button-color: var(--c-bg);
  --text-color: var(--c-house);
}

.\+site-header.\&reversed nav[aria-label="secondary"] ul li a.\%action-clicker:hover {
  --text-color: var(--c-running-reversed);
}

.\+site-header.\&reversed h2 {
  color: var(--c-bg);
}

.\+site-header.\&reversed nav > ul > li > a {
  color: var(--c-running-reversed);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.35), 0 0 var(--beat-xxsmall) rgba(0, 0, 0, 0.25);
}

.\+site-header.\&reversed svg g {
  fill: var(--c-bg);
}

.\+site-header.\&reversed .__nav-button::before {
  color: var(--c-running-reversed);
}

.\+site-header nav[aria-label="secondary"] {
  --head-space: .45rem;
  position: absolute;
  right: var(--beat-small);
  top: 0;
}

@media (max-width: 32rem) {
  .\+site-header nav[aria-label="secondary"] {
    position: relative;
    top: auto;
    right: auto;
  }
}

.\+site-header nav[aria-label="secondary"] a {
  font-size: var(--fs-xsmall);
  font-weight: var(--fw-medium) !important;
}

.\+site-header nav[aria-label="secondary"] a:hover, .\+site-header nav[aria-label="secondary"] a.is\:active {
  opacity: 1;
}

.\+site-header nav[aria-label="secondary"] a.\%action-clicker {
  --button-color: var(--c-house);
  --text-color: var(--c-bg);
  border: var(--border-medium) solid var(--button-color);
  box-shadow: none;
  font-family: var(--ff-running);
  font-size: .77em;
  font-weight: var(--fw-bold) !important;
  opacity: 1 !important;
  margin-bottom: var(--beat-xsmall) !important;
  margin-left: var(--beat-xsmall);
  padding: var(--beat-xxsmall) var(--beat-small);
  text-shadow: none !important;
  transition: all 0s;
  z-index: 1;
}

@media (max-width: 32rem) {
  .\+site-header nav[aria-label="secondary"] a.\%action-clicker {
    display: inline-block;
    margin-left: var(--beat);
    margin-top: var(--beat-small);
    padding: var(--beat-xsmall) var(--beat);
  }
}

.\+site-header nav[aria-label="secondary"] a.\%action-clicker::after {
  display: none;
}

.\+site-header nav[aria-label="secondary"] a.\%action-clicker:hover {
  box-shadow: none;
  border-color: var(--text-color);
  transform: none;
  transition: all 0s;
}

.\+site-header .__nav-wrapper {
  margin-top: var(--beat-small);
  padding-right: var(--beat);
}

@media (max-width: 32rem) {
  .\+site-header .__nav-wrapper {
    background: RGB(255 255 255/85%);
    backdrop-filter: blur(7px);
    border-left: var(--border-large) solid var(--c-house);
    bottom: 0;
    box-shadow: -1rem 0 1rem RGB(0 0 0/10%);
    display: block;
    margin: 0 !important;
    max-width: 90%;
    padding: var(--beat-large) 0;
    position: fixed;
    right: 0;
    top: 0;
    transition: right .5s;
    width: 20rem;
    z-index: 3;
  }
}

.\+site-header .__nav-wrapper[data-exposed="false"] {
  right: -100vw;
  transition: right .2s;
}

.\+site-header .__nav-button {
  display: none;
}

@media (max-width: 32rem) {
  .\+site-header .__nav-button {
    background: transparent;
    color: var(--c-running);
    display: block;
    font-size: var(--beat);
    height: var(--beat-large);
    margin-top: 0;
    overflow: hidden;
    position: fixed;
    right: var(--beat-small);
    text-shadow: 0 1px 0 var(--c-running-reversed);
    top: var(--beat-xsmall);
    width: var(--beat-large);
    z-index: 4;
  }
}

/**
 * Main site footer
 */
body > footer,
.\+site-footer {
  background: RGB(0 0 0/10%);
  padding: var(--beat-xlarge) 0 var(--beat-large);
}

body > footer a:link,
body > footer a:visited,
.\+site-footer a:link,
.\+site-footer a:visited {
  margin-top: 0;
}

.\+feature-list {
  --icon-bg: RGB(255 255 255 / 30%);
  --icon-color: var(--c-house);
}

.\+feature-list .\@columns:nth-of-type(2n) .__feature {
  flex-direction: row-reverse;
}

.\+feature-list .__feature {
  align-items: center;
  justify-content: center;
}

.\+feature-list .__feature > * {
  margin: 0;
  margin-top: var(--beat);
  max-width: var(--measure);
}

.\+feature-list .__feature .__content {
  margin-right: var(--beat-small);
}

.\+feature-list .__feature .__icon {
  background: var(--icon-bg);
  border-radius: 50%;
  color: var(--icon-color);
  font-size: var(--beat-xlarge);
  line-height: 9rem;
  margin-right: var(--beat-small);
  max-width: 9rem;
  padding: 0;
  text-align: center;
}

.\+feature-list img {
  margin-top: var(--beat-small);
  max-height: var(--measure-min);
  max-width: var(--measure-min);
}

/**
 * Utility pages, like /success and /canceled
 */
body.\+utility .\%hero {
  background: var(--c-neutral-dark);
  clip-path: none;
  color: var(--c-bg);
  min-height: 100vh;
  text-align: center;
}

body.\+utility .\%hero a:link,
body.\+utility .\%hero a:visited {
  color: var(--c-bg);
}

body.\+utility .\%hero a:hover {
  background: var(--c-house-darkest);
}

body.\+utility .\%hero h1 i[aria-hidden] {
  display: inline-block;
  font-size: 150%;
  margin-bottom: 1rem;
}

body.\+utility .\%hero p {
  background: rgba(0, 0, 0, 0.5);
  border-radius: var(--border-large);
  line-height: 1.75;
  padding: var(--beat-large) var(--beat);
}

/**
 * Tweak styling for standalone "read this" pages.
 */
.\+editorial {
  --ff-running: "Archivo", sans-serif !important;
}

.\+editorial body > header {
  background: transparent;
}

.\+editorial body > footer {
  background: var(--c-neutral-lightest);
  color: var(--c-running);
  margin-top: var(--beat-large);
}

/**
 * Inline navigation that appears on pages with children.
 */
.\+inline-nav {
  margin-top: calc(var(--beat-xlarge) * -1);
  margin-bottom: var(--beat-large);
}

.\+inline-nav > ul {
  background-image: linear-gradient(45deg, RGB(0 0 0/7%) 25%, transparent 25%, transparent 50%, RGB(0 0 0/7%) 50%, RGB(0 0 0/7%) 75%, transparent 75%, transparent);
  background-size: 5px 5px;
  padding: 1rem;
  margin: auto;
}

.\+inline-nav ul {
  list-style: none;
  position: relative;
  margin-top: 0;
}

.\+inline-nav ul li {
  position: relative;
}

.\+inline-nav ul li a {
  border-color: transparent !important;
  display: block;
  font-size: var(--fs-small);
  font-weight: var(--fw-heavy);
  padding: 0.31rem var(--beat-xsmall);
  position: relative;
  transition: all .5s;
}

.\+inline-nav ul li a:link {
  color: var(--c-running);
}

.\+inline-nav ul li a:hover, .\+inline-nav ul li a[aria-current="page"] {
  color: var(--c-house);
  text-decoration: none;
}

.\+inline-nav ul li a[aria-current="page"]::before {
  content: '»';
  position: absolute;
  margin-left: calc(var(--beat-small) * -1);
}

.\+inline-nav ul li li {
  margin-left: 0;
}

.\+inline-nav ul li li a {
  font-weight: var(--fw-medium);
}

.\+inline-nav + section > blockquote:first-of-type {
  margin-top: var(--beat-large);
}

.\&impersonate\:h1 {
  color: var(--c-house);
  font-family: var(--ff-alt);
  font-size: var(--fs-xlarge);
  font-weight: var(--fw-normal);
  line-height: 1.1;
  margin-top: var(--beat-large);
}

.\&impersonate\:h2 {
  color: var(--c-house);
  font-size: var(--fs-large);
  font-weight: var(--fw-heavy);
  text-transform: uppercase;
}

.\&impersonate\:h3 {
  color: var(--c-house);
  font-weight: var(--fw-heavy);
  font-size: var(--fs-small);
  letter-spacing: .025rem;
  text-transform: uppercase;
}

/**
 * Specifies font overrides
 */
.\!font\:alt {
  font-family: var(--ff-alt);
}

.\!font\:heading {
  font-family: var(--ff-heading);
}

.\!font\:sans {
  font-family: var(--ff-sans) !important;
}

.\!font\:xsmall {
  font-size: var(--fs-xsmall) !important;
}

.\!font\:small {
  font-size: var(--fs-small) !important;
}

.\!font\:medium {
  font-size: var(--fs-medium) !important;
}

.\!font\:large {
  font-size: var(--fs-large) !important;
}

.\!font\:xlarge {
  font-size: var(--fs-xlarge) !important;
}

.\!color\:bg\:lighter {
  background: var(--c-neutral-lighter) !important;
}

.\!color\:bg\:lightest {
  background: var(--c-bg) !important;
}

.\!color\:bg\:light {
  background: var(--c-neutral-light) !important;
}

.\!color\:border\:bg {
  border-color: var(--c-bg);
}

.\!color\:border\:lighter {
  border-color: var(--c-neutral-lighter) !important;
}

.\!color\:border\:lightest {
  border-color: var(--c-bg) !important;
}

.\!color\:reversed a {
  color: white !important;
}

.\!color\:reversed a:hover {
  background: white;
  color: var(--c-house) !important;
}

.\!color\:text\:warning {
  color: var(--c-warning) !important;
}

.\!align\:right {
  display: flex !important;
  justify-content: flex-end !important;
}

.\!align\:text\:center {
  text-align: center !important;
}

.\!align\:text\:left {
  text-align: left !important;
}

.\!align\:text\:right {
  text-align: right !important;
}

.\!size\:border\:small {
  border-style: solid;
  border-width: var(--border-small);
}

.\!size\:border\:medium {
  border-style: solid;
  border-width: var(--border-medium);
}

.\!size\:border\:large {
  border-style: solid;
  border-width: var(--border-large);
}

.\!size\:text\:xsmall {
  font-size: var(--fs-xsmall) !important;
}

/**
 * Fix the first column of a table so it is always visible on mobile.
 */
.\&fix-first-column {
  margin-top: 0;
  max-width: 100vw;
  overflow-x: auto;
}

.\&fix-first-column table {
  max-width: 99%;
}

.\&fix-first-column table td:first-child {
  left: 0;
  position: sticky;
  z-index: 2;
}

.\&reversed blockquote,
.\&reversed h1,
.\&reversed h2,
.\&reversed h3,
.\&reversed h4,
.\&reversed h5,
.\&reversed h6,
.\&reversed p,
.\&reversed li {
  color: var(--c-running-reversed);
}

/**
 * Content blocks with horizontal borders at the bottom to divide them from 
 * the next one
 */
.\&divider {
  --divider-color: RGB(0 0 0 / 10%);
  box-shadow: 0 -0.75rem 0 0 var(--divider-color) inset;
}

.\&divider.\&reversed {
  --divider-color: RGB(255 255 255 / 15%);
}

/**
 * Literally just capitalizes the first letter of an element.
 * Useful when using text extracted from collections, which
 * has no initial caps in order to allow verbiage to be prefixed.
 */
.\&sentence-case::first-letter {
  text-transform: uppercase;
}

em.\&references {
  /**
	 * Verse references for affirmations. These must always be ems to avoid
	 * a stupid Firefox text layout bug caused by wrapping list-item text in
	 * paragraph tags.
	 */
  color: var(--c-neutral) !important;
  display: block;
  font-size: var(--fs-xsmall);
  font-style: normal;
  font-weight: var(--fw-medium);
  line-height: 1.75;
  margin-top: calc((var(--beat) - var(--beat-xxsmall)) * -1);
}

em.\&references a.rtBibleRef {
  color: var(--c-neutral) !important;
}

/**
 * Show or hide elements (usually in forms) based on user input,
 * using the `data-exposed` attribute controlled via JavaScript.
 * We are using the `main` selector to avoid problems with the
 * nav, which also uses the same attribute.
 */
main [data-exposed="true"] {
  max-height: 500rem;
  opacity: 1;
  transition: max-height 0.3s cubic-bezier(1, 0, 1, 0), opacity 0.3s 0.3s;
  visibility: visible;
}

main [data-exposed="false"] {
  margin: 0;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  padding: 0;
  transition: max-height 0.3s 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s;
  visibility: hidden;
}

.\&purpose\:error[data-exposed="true"] {
  animation: shake 800ms;
}

/**
 * FontAwesome native list adjustments.
 */
.fa-ul {
  --icon-color: var(--c-house);
  margin-left: auto;
  padding-left: .6rem;
}

.fa-ul li {
  position: relative;
}

.fa-ul li .fa-li {
  color: var(--icon-color);
}

.footnotes {
  font-family: var(--ff-running);
  font-size: var(--fs-small);
  margin: var(--beat-large) auto;
  max-width: var(--measure);
}

.footnotes > * {
  margin-left: auto;
  margin-right: auto;
  max-width: var(--measure);
}

.footnotes a:link {
  color: var(--c-house);
  border-bottom: var(--border-small) solid var(--c-house-lighter);
  text-decoration: none;
}

.footnotes a:visited {
  border-color: var(--c-neutral-dark);
  color: var(--c-neutral-darkest);
}

.footnotes a:hover {
  border-color: var(--c-house);
  color: var(--c-house);
}

.footnotes.\&reversed a:link {
  color: var(--c-running-reversed);
}

.footnotes.\&reversed a:visited {
  color: var(--c-neutral-lightest);
}

.footnotes a.\&reflink {
  border-color: transparent;
  color: inherit;
}

.footnotes a.\&reflink:hover {
  border-color: var(--c-house-lightest);
  color: var(--c-house);
}

.footnotes small {
  color: var(--c-neutral-dark);
}

.footnotes a.footnote-backref {
  background: RGB(0 0 0/10%);
  border-radius: 50%;
  border-width: 0;
  display: inline-block;
  height: var(--beat);
  line-height: var(--beat);
  margin: 0;
  text-align: center;
  text-decoration: none;
  width: var(--beat);
}

.footnotes a.footnote-backref:hover {
  background: var(--c-house);
  color: var(--c-running-reversed);
}

hr.footnotes-sep {
  border-top: var(--border-medium) solid RGB(0 0 0/10%);
  margin-bottom: 0;
  margin-top: var(--beat-xlarge);
}

a.rtBibleRef {
  border-bottom: 1px dotted var(--c-neutral-darkest) !important;
  color: var(--c-running) !important;
}

a.rtBibleRef:hover {
  border-style: solid !important;
}