/*!
	Theme Name: Blazes
	Description: A theme designed by Bnonn Tennant for extensibility and speed
	Version: 0.1
	Theme URI: http://informationhighwayman.com
	Author URI: http://informationhighwayman.com */
/**
 * Anvil prototyping engine
 *
 * @package Anvil
 * @version 5 beta
 */
/**
 * 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: "Work Sans", sans-serif;
  --ff-heading: "Work Sans", sans-serif;
  --ff-icon: "Font Awesome 5 Pro";
  --ff-running: "Work Sans", sans-serif;
  --ff-sans: "Work Sans", sans-serif;
  --fs-xsmall: .8rem;
  --fs-small: .9rem;
  --fs-medium: 1rem;
  --fs-large: 1.75rem;
  --fs-xlarge: 2.6rem;
  /**
		* This is the only magic number in Anvil. Go me.
		* See websemantics.uk/tools/responsive-font-calculator/
		*/
  --fs-running: calc(0.8rem + ((1vw - 0.24rem) * 0.625));
  --fw-light: 300;
  --fw-normal: 380;
  --fw-medium: 530;
  --fw-bold: 600;
  --fw-heavy: 800;
  --border-medium: 3px;
  --border-large: 5px;
  --border-small: 2px;
  --leading: 1.5;
  --measure: 45rem;
  --measure-min: 15rem;
  --space: 0;
  --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);
  --tight: 0;
}

:root {
  --c-alt: powderblue;
  --c-bg: white;
  --c-bg-reversed: #333;
  --c-highlight: hsl(46, 100%, 89%);
  --c-house: hsl(210, 50%, 50%);
  --c-house-dark: hsl(210, 50%, 28%);
  --c-house-light: hsl(210, 35%, 80%);
  --c-neutral: hsl(210, 5%, 50%);
  --c-neutral-alpha: hsla(210, 5%, 50%, 50%);
  --c-neutral-dark: hsl(210, 5%, 28%);
  --c-neutral-light: hsl(210, 5%, 85%);
  --c-neutral-lighter: hsl(210, 5%, 92%);
  --c-running: #333;
  --c-running-reversed: var(--c-bg);
  --c-info: hsl(194, 70%, 40%);
  --c-info-bg: hsl(194, 100%, 98%);
  --c-info-dark: hsl(194, 100%, 27%);
  --c-info-light: hsl(194, 68%, 85%);
  --c-note: hsl(35, 70%, 50%);
  --c-alert: hsl(10, 96%, 56%);
  --c-alert-bg: hsl(10, 100%, 96%);
  --c-alert-dark: hsl(10, 91%, 42%);
  --c-alert-light: hsl(10, 87%, 64%);
  --c-warning-bg: var(--c-alert-bg);
  --c-warning: var(--c-alert);
  --c-warning-dark: var(--c-alert-dark);
  --c-warning-light: var(--c-alert-light);
  --c-input-border: var(--c-neutral);
  --c-input-border-active: var(--c-neutral-dark);
  --c-progress-bar-1: var(--c-neutral);
  --c-progress-bar-2: var(--c-warning);
  --box-shadow-large: 0 0 1rem rgba(0, 0, 0, .1);
}

/**
   * Set up the page and fix any cross-browser weirdness
   */
/**
   * Site setup
   */
:root {
  /**
	   * Global variables we want to use on potentially any
	   * element.
	   */
  --bg: var(--c-bg);
  --border: 0;
  --head-space: var(--beat);
  --ff: var(--ff-running);
  --fs: var(--fs-running);
  --fw: var(--fw-normal);
  background-color: var(--bg);
  color: var(--c-running);
  font-family: var(--ff);
  font-size: 20px;
  font-size: var(--fs);
  font-weight: var(--fw);
  line-height: var(--leading);
  min-height: 0;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

*,
:after,
:before {
  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;
}

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

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

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

/*
   * 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.
   */
/**
   * Creates an "old lens" effect.
   */
/**
   * Highlight an element when someone jumps to it from a link.
   */

@keyframes focus-highlight {
  0% {
    background: var(--c-bg);
  }
  10% {
    background: var(--c-bg);
  }
  20% {
    background: var(--c-highlight);
  }
  100% {
    background: var(--c-bg);
  }
}

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

.\@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;
  display: flex;
  flex-wrap: wrap;
}

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

.\@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);
}

/**
   * Stick an element in the middle of the screen, out of the
   * normal flow, above everything else.
   *
   * Used on <dialog> elements and so forth.
   */
.\@overlay {
  --overlay-space: calc(var(--leading) * 1rem);
  --overlay-space-horiz: var(--overlay-space);
  --overlay-space-vert: var(--overlay-space);
  display: block;
  left: 50%;
  margin: 0;
  max-height: 100vh;
  max-width: 100vw;
  padding: var(--overlay-space-vert) var(--overlay-space-horiz);
  position: fixed;
  top: 50%;
  transform: translate(-50%, -50%);
}

/**
   * Pull blocks to one side, for 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 {
  --reel-space: 1rem;
  display: flex;
  height: auto;
  overflow-x: auto;
  overflow-y: hidden;
  position: relative;
  scrollbar-color: var(--c-neutral-light) var(--c-neutral);
  /**
	   * Make sure the scrollbar is visible...
	   */
}

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

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

.\@reel::-webkit-scrollbar-thumb {
  background-color: var(--c-neutral-light);
  background-image: linear-gradient(var(--c-neutral-light) 0, var(--c-neutral-light) 0.25rem, var(--c-neutral) 0.25rem, var(--c-neutral) 0.75rem, var(--c-neutral-light) 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;
}

.\@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 > * + * {
  --head-space: 0;
  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;
}

/**
   * Create a Pinterest-style masonry layout.
   *
   * Used for: cards of various sorts, mostly.
   */
.\@masonry {
  column-gap: var(--beat);
  column-width: var(--measure-min);
}

.\@masonry > * {
  display: inline-block;
  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);
}

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

.\%running h1 {
  margin-top: var(--beat-large);
}

.\%running h1 + h2 {
  margin-top: 1rem;
}

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

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

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

.\%running a:hover {
  background: var(--c-house);
  border-radius: 0.15rem;
  color: var(--c-running-reversed);
  text-decoration: none;
}

li {
  margin-left: 1rem;
}

strong,
b {
  --fw: var(--fw-bold);
}

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

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

h1 {
  font-family: var(--ff-heading);
  font-size: var(--fs-xlarge);
  font-weight: var(--fw-normal);
  line-height: 1.1;
}

h1 strong {
  font-weight: var(--fw-medium);
}

h2 {
  font-size: var(--fs-large);
  font-weight: var(--fw-bold);
}

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

hr {
  box-sizing: content-box;
  border-top: var(--border-small) solid var(--c-neutral-light);
  height: 0;
  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 {
  --c-bg: var(--c-neutral-lighter);
  background: var(--c-bg);
  border: var(--border-medium) solid var(--c-neutral);
  border-radius: var(--border-medium);
  box-shadow: 0 1rem 1rem rgba(0, 0, 0, 0.1), 0 2rem 4rem rgba(0, 0, 0, 0.3);
  width: var(--measure);
}

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

dialog::backdrop,
dialog + .backdrop {
  background: rgba(255, 255, 255, 0.35);
  transition: background 0.25s;
  will-change: background;
}

dialog .\?close\(dialog\) {
  background: transparent;
  border: 0;
  color: var(--c-running);
  cursor: pointer;
  height: var(--beat-large);
  line-height: 3.4rem;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: var(--beat-large);
}

dialog .\?close\(dialog\):hover {
  color: var(--c-warning);
  transition: all 0.2s;
}

dialog .\?close\(dialog\):focus {
  background: var(--c-warning);
  color: var(--c-running-reversed);
}

dialog .\?close\(dialog\) i {
  font-size: var(--beat);
  font-style: normal;
}

/**
   * Used to create callout blocks.
   */
.\%notice {
  --bg: #f1f1f1;
  border: var(--border-large);
  border-color: var(--c-neutral-light);
  border-left-width: var(--beat-large);
  border-radius: var(--border-large);
  border-style: solid;
  font-family: var(--ff-heading);
  padding: var(--beat-small);
  position: relative;
}

.\%notice .__icon {
  font-size: var(--beat-medium);
  left: calc(var(--beat-large)*-1);
  position: absolute;
  text-align: center;
  width: var(--beat-large);
}

.\%notice.\&info {
  --bg: var(--c-info-bg);
  border-color: var(--c-info-light);
  color: var(--c-info-dark);
}

.\%notice.\&warning {
  --bg: var(--c-warning-bg);
  border-color: var(--c-warning-light);
  color: var(--c-warning-dark);
}

/**
   * Initial paragraphs that should stand out more than others by
   * being larger, having a drop-cap, or whatever.
   */
.\%lede {
  --drop-cap-margin-top: .5rem;
  font-weight: var(--fw-bold);
}

.\%lede::first-letter {
  float: left;
  font-size: 3.1rem;
  font-weight: bold;
  line-height: 2rem;
  margin: var(--drop-cap-margin-top) 0.375rem 0 0;
  text-align: center;
}

.\%card {
  border: 1px solid var(--c-neutral-light);
  border-radius: var(--border-large);
  box-shadow: var(--border-large) var(--border-large) var(--border-large) rgba(0, 0, 0, 0.1);
  max-width: var(--measure-min) !important;
}

details summary + * {
  margin-top: 0 !important;
}

blockquote {
  font-size: var(--fs-small);
}

.\%video {
  --aspect-ratio: 9/16;
  padding-bottom: calc(var(--aspect-ratio)*100%);
  position: relative;
}

.\%video > iframe {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

/**
   * Creates form-like boxes for visually emphasizing an important
   * place of interaction, such as calls to action.
   */
.\%action-box {
  --background: var(--c-neutral-lighter);
  --border: var(--border-large) solid var(--c-neutral-light);
  background: var(--background);
  border: var(--border);
}

.\%pill {
  --bg: var(--c-neutral-light);
  --color: var(--c-neutral-dark);
  background: var(--bg);
  border-radius: var(--border-medium);
  color: var(--color);
  padding-left: var(--border-large);
  padding-right: var(--border-large);
}

.\%placeholder {
  --aspect-ratio: 16/9;
  --placeholder-size: var(--beat-xlarge);
  padding-bottom: calc(var(--aspect-ratio) * 100%);
  position: relative;
}

.\%placeholder > * {
  align-items: center;
  background: transparent;
  border: var(--border-small) solid var(--c-neutral-light);
  bottom: 0;
  color: var(--c-neutral-dark);
  display: flex;
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  justify-content: center;
  left: 0;
  overflow: hidden;
  position: absolute;
  right: 0;
  text-align: center;
  text-transform: uppercase;
  top: 0;
}

.\%placeholder.\&size\:tight {
  --size: var(--tight);
}

.\%placeholder.\&size\:xsmall {
  --size: var(--beat-xsmall);
}

.\%placeholder.\&size\:small {
  --size: var(--beat-small);
}

.\%placeholder.\&size\:medium {
  --size: var(--beat-medium);
}

.\%placeholder.\&size\:large {
  --size: var(--beat-large);
}

.\%placeholder.\&size\:xlarge {
  --size: var(--beat-xlarge);
}

.\%skip-link {
  background: var(--c-neutral-alpha);
  color: var(--c-running);
  display: block;
  font-size: var(--fs-xsmall);
  font-weight: var(--fw-medium);
  left: var(--beat);
  padding: 0 var(--beat-xsmall);
  position: fixed;
  text-transform: uppercase;
  transform: translateY(-100%);
  transition: transform .3s;
  top: 0;
}

.\%skip-link:focus {
  transform: translateY(0%);
  top: var(--beat-small);
}

.\%sticky {
  position: sticky;
  z-index: 1;
}

.\%sticky.\&arrange\:bottom {
  bottom: var(--beat-small);
}

.\%sticky.\&arrange\:top {
  top: var(--beat-small);
}

/**
   * Any kind of important call to action. Can extend buttons or
   * anchors.
   */
.\%action-clicker {
  --button-color: var(--c-alert);
  --text-color: var(--c-running-reversed);
  background-color: var(--button-color);
  border: var(--border-medium) solid var(--text-color);
  color: var(--text-color) !important;
  cursor: pointer;
  font-weight: var(--fw-bold);
  position: relative;
  transition: all .2s;
}

.\%action-clicker::after {
  border: var(--border-medium) solid var(--text-color);
  bottom: calc(var(--border-large)*-1);
  content: '';
  display: block;
  left: calc(var(--border-large)*-1);
  position: absolute;
  right: calc(var(--border-large)*-1);
  top: calc(var(--border-large)*-1);
  transition: all .2s;
}

.\%action-clicker:hover {
  background-color: var(--button-color) !important;
  border-color: var(--text-color);
  transition: all .2s;
}

.\%action-clicker:hover::after {
  border-color: var(--button-color);
  transition: all .2s;
}

.\%action-clicker:focus {
  background-color: var(--button-color);
  border-color: var(--text-color);
  outline: 0;
  transition: all .2s;
}

.\%action-clicker:focus::after {
  border-color: var(--text-color);
  border-width: var(--border-small);
  bottom: var(--border-medium);
  left: var(--border-medium);
  right: var(--border-medium);
  top: var(--border-medium);
  transition: all .2s;
}

.\%action-clicker small {
  display: block;
  font-size: var(--fs-xsmall);
  font-weight: var(--fw-light);
  margin-top: var(--border-medium);
}

.\%action-clicker.\&secondary {
  --button-color: var(--c-bg);
  --text-color: var(--c-alert);
}

[type="email"] {
  border: var(--border-medium) solid var(--c-input-border);
  margin-top: .5rem;
  padding: var(--beat-small);
  transition: all .2s;
}

[type="email"]:hover, [type="email"]:focus, [type="email"]:active {
  border-color: var(--c-input-border-active);
  transition: all .2s;
}

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

[type="number"] {
  border: var(--border-medium) solid var(--c-input-border);
  margin-top: .5rem;
  padding: var(--beat-small);
  transition: all .2s;
}

[type="number"]:hover, [type="number"]:focus, [type="number"]:active {
  border-color: var(--c-input-border-active);
  transition: all .2s;
}

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

[type="password"] {
  border: var(--border-medium) solid var(--c-input-border);
  margin-top: .5rem;
  padding: var(--beat-small);
  transition: all .2s;
}

[type="password"]:hover, [type="password"]:focus, [type="password"]:active {
  border-color: var(--c-input-border-active);
  transition: all .2s;
}

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

[type="search"] {
  border: var(--border-medium) solid var(--c-input-border);
  margin-top: .5rem;
  padding: var(--beat-small);
  transition: all .2s;
}

[type="search"]:hover, [type="search"]:focus, [type="search"]:active {
  border-color: var(--c-input-border-active);
  transition: all .2s;
}

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

[type="tel"] {
  border: var(--border-medium) solid var(--c-input-border);
  margin-top: .5rem;
  padding: var(--beat-small);
  transition: all .2s;
}

[type="tel"]:hover, [type="tel"]:focus, [type="tel"]:active {
  border-color: var(--c-input-border-active);
  transition: all .2s;
}

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

[type="text"] {
  border: var(--border-medium) solid var(--c-input-border);
  margin-top: .5rem;
  padding: var(--beat-small);
  transition: all .2s;
}

[type="text"]:hover, [type="text"]:focus, [type="text"]:active {
  border-color: var(--c-input-border-active);
  transition: all .2s;
}

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

[type="url"] {
  border: var(--border-medium) solid var(--c-input-border);
  margin-top: .5rem;
  padding: var(--beat-small);
  transition: all .2s;
}

[type="url"]:hover, [type="url"]:focus, [type="url"]:active {
  border-color: var(--c-input-border-active);
  transition: all .2s;
}

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

label {
  color: var(--c-neutral-dark);
  font-size: var(--fs-small);
}

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

.\%dodging-labels label {
  color: var(--c-neutral);
  cursor: text;
  display: block;
  font-size: var(--fs-small);
  margin-left: var(--beat-small);
  margin-top: -2.1rem;
  pointer-events: none;
  position: absolute;
  transition: all .2s ease;
}

.\%dodging-labels input:not(:placeholder-shown) + label,
.\%dodging-labels input:focus + label {
  font-size: var(--fs-xsmall);
  margin-left: 0;
  margin-top: -4.2rem;
  transition: all .2s ease;
}

figure {
  background-color: var(--c-neutral-light);
}

figure figcaption {
  font-size: var(--fs-xsmall);
  line-height: 1.2;
  margin-top: var(--beat-xsmall);
  text-align: center;
}

/**
   * Site header, including nav.
   */
body > header {
  background: var(--c-neutral-light);
  max-width: none;
}

body > header hgroup {
  border-bottom: var(--border-small) solid var(--c-neutral);
}

body > header h1 {
  font-size: var(--fs-large);
  font-weight: var(--fw-medium);
  margin-bottom: 0;
  margin-left: var(--beat-medium);
  margin-top: var(--beat-large);
  text-align: left;
}

body > header h2 {
  font-size: var(--fs-xsmall);
  font-weight: var(--fw-normal);
  margin-bottom: var(--beat-medium);
  margin-left: var(--beat-medium);
  margin-top: auto !important;
}

body > header nav {
  margin-top: 0;
}

body > header nav,
body > header nav ul {
  max-width: none;
}

body > header nav ul {
  list-style: none;
  width: auto;
}

body > header nav ul li a {
  border-bottom: var(--border-large) solid transparent;
  color: var(--c-neutral-dark);
  display: block;
  font-family: var(--ff-heading);
  font-size: var(--fs-xsmall);
  margin-right: var(--border-large);
  padding: 1.125rem 1rem 1.125rem 0.75rem;
  text-decoration: none;
  text-align: center;
  transition: all .5s;
}

body > header nav ul li a:hover {
  text-decoration: underline;
  transition: all .3s;
}

body > header nav ul li a.is\:active {
  border-color: var(--c-neutral);
  color: var(--c-running);
  font-weight: var(--fw-bold);
}

body > header nav ul li a.\%nav-cta {
  background-color: var(--c-alert);
  border: 0;
  border-radius: var(--border-medium);
  color: var(--c-running-reversed);
  font-weight: var(--fw-medium);
  margin-top: 0.75rem;
  padding: 0.375rem 1.125rem;
}

body > header nav ul li a.\%nav-cta:hover {
  background-color: var(--c-alert-dark);
}

body > header nav[aria-label="main"] {
  border-bottom: var(--border-small) solid var(--c-neutral);
  margin-top: auto;
}

body > header nav[aria-label="secondary"] {
  font-size: var(--fs-xsmall);
  position: absolute;
  right: 0.75rem;
  top: 0.375rem;
}

body > header nav[aria-label="secondary"] a {
  color: var(--c-neutral);
  padding: 0.375rem;
}

body > header nav[aria-label="secondary"] a:hover, body > header nav[aria-label="secondary"] a.is\:active {
  background: transparent;
}

/**
   * Main site footer
   */
body > footer {
  background: var(--c-neutral-light);
  padding: 4.5rem;
}

/**
  * Review elements. Selectors are organized below by their 
  * conventional order in the review template.
  */
.\+review {
  --review-space: var(--beat-small);
  padding: 0;
  /**
	   * Review image
	   */
  /**
	   * Review header items
	   */
  /**
	   * Review content
	   */
}

.\+review > img {
  height: auto;
  margin: 0;
  object-fit: cover;
  width: 100%;
}

.\+review header {
  --head-space: 0;
  align-items: flex-start;
  background: var(--c-neutral-lighter);
  display: flex;
  padding: var(--review-space);
}

.\+review header li {
  font-family: var(--ff-heading);
  font-size: var(--fs-xsmall);
  list-style: none;
  margin: 0;
  padding: 0;
}

.\+review header .__avatar {
  color: var(--c-neutral-dark);
  font-size: 3rem;
  line-height: 1;
  margin-right: var(--beat-xsmall);
}

.\+review header .__meta .__author {
  font-weight: var(--fw-bold);
}

.\+review header .__meta .__stars {
  color: var(--c-neutral-dark);
  font-size: 1.5rem;
  margin: 0;
  margin-top: calc(var(--beats-xs) * -1);
}

.\+review header .__meta .__stars i[class*='star'] {
  color: var(--c-warning);
}

.\+review blockquote {
  font-size: var(--fs-xsmall);
  margin-top: 0;
  padding: var(--review-space);
}

/**
  * Turns lists-items into blocks with icons.
  */
.\+feature-list {
  --icon: "\f251";
  --icon-bg: var(--c-neutral-light);
  --icon-border: transparent;
  --icon-color: var(--c-running);
  --icon-size: 2.5rem;
  --icon-size-multiplier: 2;
  --icon-weight: 300;
}

.\+feature-list li {
  display: flex;
  flex-direction: row;
  font-size: 90%;
  list-style: none;
  margin-left: 0;
}

.\+feature-list li .__icon {
  /**
	   * We're defining this here because it's going to be used in
	   * different ways: either manually via a class for uls etc,
	   * or automatically via li::before for ols.
	   */
  background: var(--icon-bg);
  border: var(--border-medium) solid var(--icon-border);
  border-radius: 50%;
  color: var(--icon-color);
  font-size: var(--icon-size);
  font-weight: var(--icon-weight);
  height: calc(var(--icon-size) * var(--icon-size-multiplier));
  line-height: calc(var(--icon-size) * var(--icon-size-multiplier));
  margin-bottom: auto;
  margin-right: 0.75rem;
  min-width: calc(var(--icon-size) * var(--icon-size-multiplier));
  text-align: center;
  width: calc(var(--icon-size) * var(--icon-size-multiplier));
}

.\+feature-list li .__icon + * {
  --head-space: 0;
  flex-shrink: 99;
}

.\&short-items .\+feature-list li .__icon {
  --icon-size: 1.5rem;
  --icon-size-multiplier: 2;
}

.\+feature-list li strong {
  display: inline-block;
}

.\+feature-list.\&short-items li {
  --icon-size: 1.5rem;
  --icon-size-multiplier: 2;
  align-items: center;
  flex-direction: column;
  text-align: center;
}

ol.\+feature-list {
  counter-reset: features;
}

ol.\+feature-list li::before {
  /**
	   * We're defining this here because it's going to be used in
	   * different ways: either manually via a class for uls etc,
	   * or automatically via li::before for ols.
	   */
  background: var(--icon-bg);
  border: var(--border-medium) solid var(--icon-border);
  border-radius: 50%;
  color: var(--icon-color);
  font-size: var(--icon-size);
  font-weight: var(--icon-weight);
  height: calc(var(--icon-size) * var(--icon-size-multiplier));
  line-height: calc(var(--icon-size) * var(--icon-size-multiplier));
  margin-bottom: auto;
  margin-right: 0.75rem;
  min-width: calc(var(--icon-size) * var(--icon-size-multiplier));
  text-align: center;
  width: calc(var(--icon-size) * var(--icon-size-multiplier));
  color: var(--c-neutral-dark);
  counter-increment: features;
  content: counter(features);
  font-weight: var(--fw-heavy);
}

ol.\+feature-list li::before + * {
  --head-space: 0;
  flex-shrink: 99;
}

.\&short-items ol.\+feature-list li::before {
  --icon-size: 1.5rem;
  --icon-size-multiplier: 2;
}

.\!chromatic-aberration {
  box-shadow: -0.1rem -0.1rem 0.02rem rgba(30, 144, 255, 0.4), 0.1rem 0.1rem 0.02rem rgba(255, 69, 0, 0.4);
  text-shadow: -0.1rem -0.1rem 0.02rem rgba(30, 144, 255, 0.4), 0.1rem 0.1rem 0.02rem rgba(255, 69, 0, 0.4);
}

.\!h1 {
  font-family: var(--ff-heading);
  font-size: var(--fs-xlarge);
  font-weight: var(--fw-normal);
  line-height: 1.1;
}

.\!h1 strong {
  font-weight: var(--fw-medium);
}

.\!h2 {
  font-size: var(--fs-large);
  font-weight: var(--fw-bold);
}

/**
   * 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 {
  background-color: var(--c-bg-reversed);
  color: var(--c-running-reversed);
}

.\!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;
}

/**
   * Blurs out an element. Useful for e.g., "dimming" the entire
   * `main` element when a dialog pops over it.
   */
.is\:blurred {
  filter: blur(6px);
}

/**
   * FontAwesome native list adjustments.
   */
.fa-ul {
  margin-left: auto !important;
  padding-left: inherit !important;
}

/**
 * Anvil prototyping engine
 *
 * @package Anvil
 * @version 5 beta
 * Child theme for Residential Real Estate Appraiser template
 */
/**
 * 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: "Zilla Slab", sans-serif;
  --ff-heading: "Zilla Slab", sans-serif;
  --ff-icon: "Font Awesome 5 Pro";
  --ff-running: "Roboto Mono", monospace;
  --ff-sans: "Roboto", sans-serif;
  --fs-xsmall: .8rem;
  --fs-small: .9rem;
  --fs-medium: 1rem;
  --fs-large: 1.25rem;
  --fs-xlarge: 2.5rem;
  /**
 	 * This is the only magic number in Anvil. Go me.
 	 * See websemantics.uk/tools/responsive-font-calculator/
 	 */
  --fs-running: calc(0.8rem + ((1vw - 0.24rem) * 0.625));
  --fw-light: 300;
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-bold: 700;
  --fw-heavy: 900;
  --border-medium: 3px;
  --border-large: 5px;
  --border-small: 2px;
  --leading: 1.75;
  --measure: 52.5rem;
  --measure-min: 17.5rem;
  --space: 0;
  --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);
  --tight: 0;
}

:root {
  --c-alt: powderblue;
  --c-bg: white;
  --c-bg-reversed: #333;
  --c-highlight: rgba(255, 238, 0, 0.383);
  --c-house: hsl(210, 50%, 50%);
  --c-house-dark: hsl(210, 50%, 28%);
  --c-house-light: hsl(210, 35%, 80%);
  --c-neutral: hsl(210, 5%, 50%);
  --c-neutral-alpha: hsla(210, 5%, 50%, 50%);
  --c-neutral-dark: hsl(210, 5%, 28%);
  --c-neutral-light: hsl(210, 5%, 85%);
  --c-neutral-lighter: hsl(210, 5%, 92%);
  --c-running: #333;
  --c-running-reversed: var(--c-bg);
  --c-info: hsl(194, 70%, 40%);
  --c-info-bg: hsl(194, 100%, 98%);
  --c-info-dark: hsl(194, 100%, 27%);
  --c-info-light: hsl(194, 68%, 85%);
  --c-info-lighter: hsl(194, 68%, 95%);
  --c-note: hsl(35, 70%, 50%);
  --c-alert: hsl(17, 96%, 56%);
  --c-alert-bg: hsl(17, 100%, 96%);
  --c-alert-dark: hsl(17, 91%, 42%);
  --c-alert-light: hsl(17, 87%, 64%);
  --c-warning-bg: var(--c-alert-bg);
  --c-warning: var(--c-alert);
  --c-warning-dark: var(--c-alert-dark);
  --c-warning-light: var(--c-alert-light);
  --box-shadow-large: 0 0 1rem rgba(0, 0, 0, .1);
}

/**
 * Set up the page and fix any cross-browser weirdness
 */
/**
 * Site setup
 */
:root {
  /**
	 * Global variables we want to use on potentially any
	 * element.
	 */
  --bg: var(--c-bg);
  --border: 0;
  --head-space: var(--beat);
  --ff: var(--ff-running);
  --fs: var(--fs-running);
  --fw: var(--fw-normal);
  background-color: var(--bg);
  color: var(--c-running);
  font-family: var(--ff);
  font-size: 20px;
  font-size: var(--fs);
  font-weight: var(--fw);
  line-height: var(--leading);
  min-height: 0;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

*,
:after,
:before {
  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;
}

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

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

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

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

/**
 * Let's not fix what isn't broken actually...
 */
b,
strong {
  font-weight: var(--fw-bold);
}

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

main h1 {
  margin-bottom: var(--beat-large);
}

h2,
h3,
h4,
h5,
h6 {
  font-family: var(--ff-sans);
  letter-spacing: 0;
}

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

h3,
h4,
h5,
h6 {
  font-size: var(--fs-medium);
}

li {
  margin-left: var(--beat);
}

.\%notice {
  font-family: var(--ff-sans);
  font-size: var(--fs-small);
}

.\%action-clicker {
  --button-color: var(--c-bg);
  --text-color: var(--c-house-dark);
  font-family: var(--ff-sans);
  font-size: var(--fs-medium);
  line-height: 1;
  text-align: center;
}

figure figcaption {
  font-family: var(--ff-sans);
}

mark {
  box-decoration-break: clone;
  background-color: var(--c-highlight);
  padding: var(--border-large);
}

.\%action-box.\%sticky {
  background-color: var(--c-house-dark);
  border-color: var(--c-bg);
  border-left: 0;
  border-right: 0;
  border-bottom-width: var(--beat-small);
  border-bottom-color: var(--c-house-dark);
  color: var(--c-running-reversed);
  bottom: calc(var(--beat-small) * -1);
  font-family: var(--ff-sans);
  font-size: var(--fs-small);
  padding: var(--beat-large) var(--beat-small);
  position: relative;
}

@media (max-width: 32rem) {
  .\%action-box.\%sticky {
    padding: var(--beat-small);
    position: sticky;
  }
}

.\%action-box.\%sticky * + * {
  margin-top: var(--beat-small);
}

/**
* Review elements. Selectors are organized below by their 
* conventional order in the review template.
*/
.\+review header .__meta li {
  font-family: var(--ff-sans);
}

.\+review header .__meta li.__stars {
  color: var(--c-warning);
}

.\+review blockquote {
  font-family: var(--ff-sans);
  font-size: var(--fs-xsmall);
  margin-top: 0;
  padding: var(--review-space);
}

body > header {
  background-color: transparent;
  color: var(--c-house-dark);
}

body > header hgroup {
  border-bottom: 0;
  margin-top: var(--beat-xlarge);
  text-align: center;
}

body > header hgroup h1 {
  font-weight: var(--fw-heavy);
  margin-top: 0;
  text-transform: uppercase;
}

body > header hgroup h2 {
  font-size: var(--fs-small);
  font-style: italic;
  padding-top: var(--border-medium);
}

body > header hgroup h1,
body > header hgroup h2 {
  font-family: var(--ff-heading);
  letter-spacing: .05rem;
  margin-left: 0;
  text-align: center;
}

body > header hgroup i.fas {
  font-size: var(--fs-xlarge);
  font-weight: 300;
}

body > header nav[aria-label="main"] {
  border-bottom: var(--border-small) solid;
  margin-top: var(--beat-small);
  width: 100%;
}

body > header nav[aria-label="main"] ul li a {
  color: var(--c-house-dark);
  display: inline-block;
  font-size: var(--fs-medium);
  margin-right: 0;
  padding: var(--border-large) var(--beat) 0;
}

body > header nav[aria-label="main"] ul li a.is\:active {
  border-color: var(--c-house-dark);
  font-weight: var(--fw-heavy);
}

body > footer {
  font-family: var(--ff-sans);
  font-size: var(--fs-xsmall);
}

body > footer * + * {
  margin-top: 0;
}

body > footer a {
  color: var(--c-info--dark);
}