/*----------------------------------------------*\
    VARIABLES
	=========

	@package theorder

\*----------------------------------------------*/
/*----------------------------------------------*\
    COMPONENTS
	==========

	@package theorder

\*----------------------------------------------*/
/*
 *
 * / Variables
------------------------------------------------*/
/* Breakpoints */
/* Responsive type multipliers */
/* Type sizes (Minor third) */
/* Max-widths */
/* is used for calculation for extend width. Each side is extended by x ems */
/*
 *
 * ANCHOR 1./ Responsive Text Sizes 
------------------------------------------------*/
:root {
  /* 50 */
  /* Note: 50 is simply half of 100 for very small adjustments */
  --size-50: 0.29em;
  /* 100 */
  --size-100: 0.579em;
  /* 200 */
  --size-200: 0.694em;
  /* 300 */
  --size-300: 0.833em;
  /* 400 */
  --size-400: 1em;
  /* 500 */
  --size-500: 1.2em;
  /* 600 */
  --size-600: 1.44em;
  /* 700 */
  --size-700: 1.728em;
  /* 800 */
  --size-800: 2.074em;
  /* 900 */
  --size-900: 2.488em; }
  @media screen and (min-width: 27rem) {
    :root {
      --size-50: 0.3045em; } }
  @media screen and (min-width: 36rem) {
    :root {
      --size-50: 0.319em; } }
  @media screen and (min-width: 48rem) {
    :root {
      --size-50: 0.3335em; } }
  @media screen and (min-width: 64rem) {
    :root {
      --size-50: 0.348em; } }
  @media screen and (min-width: 77rem) {
    :root {
      --size-50: 0.3625em; } }
  @media screen and (min-width: 94rem) {
    :root {
      --size-50: 0.377em; } }
  @media screen and (min-width: 27rem) {
    :root {
      --size-100: 0.60795em; } }
  @media screen and (min-width: 36rem) {
    :root {
      --size-100: 0.6369em; } }
  @media screen and (min-width: 48rem) {
    :root {
      --size-100: 0.66585em; } }
  @media screen and (min-width: 64rem) {
    :root {
      --size-100: 0.6948em; } }
  @media screen and (min-width: 77rem) {
    :root {
      --size-100: 0.72375em; } }
  @media screen and (min-width: 94rem) {
    :root {
      --size-100: 0.7527em; } }
  @media screen and (min-width: 27rem) {
    :root {
      --size-200: 0.7287em; } }
  @media screen and (min-width: 36rem) {
    :root {
      --size-200: 0.7634em; } }
  @media screen and (min-width: 48rem) {
    :root {
      --size-200: 0.7981em; } }
  @media screen and (min-width: 64rem) {
    :root {
      --size-200: 0.8328em; } }
  @media screen and (min-width: 77rem) {
    :root {
      --size-200: 0.8675em; } }
  @media screen and (min-width: 94rem) {
    :root {
      --size-200: 0.9022em; } }
  @media screen and (min-width: 27rem) {
    :root {
      --size-300: 0.87465em; } }
  @media screen and (min-width: 36rem) {
    :root {
      --size-300: 0.9163em; } }
  @media screen and (min-width: 48rem) {
    :root {
      --size-300: 0.95795em; } }
  @media screen and (min-width: 64rem) {
    :root {
      --size-300: 0.9996em; } }
  @media screen and (min-width: 77rem) {
    :root {
      --size-300: 1.04125em; } }
  @media screen and (min-width: 94rem) {
    :root {
      --size-300: 1.0829em; } }
  @media screen and (min-width: 27rem) {
    :root {
      --size-400: 1.05em; } }
  @media screen and (min-width: 36rem) {
    :root {
      --size-400: 1.1em; } }
  @media screen and (min-width: 48rem) {
    :root {
      --size-400: 1.15em; } }
  @media screen and (min-width: 64rem) {
    :root {
      --size-400: 1.2em; } }
  @media screen and (min-width: 77rem) {
    :root {
      --size-400: 1.25em; } }
  @media screen and (min-width: 94rem) {
    :root {
      --size-400: 1.3em; } }
  @media screen and (min-width: 27rem) {
    :root {
      --size-500: 1.26em; } }
  @media screen and (min-width: 36rem) {
    :root {
      --size-500: 1.32em; } }
  @media screen and (min-width: 48rem) {
    :root {
      --size-500: 1.38em; } }
  @media screen and (min-width: 64rem) {
    :root {
      --size-500: 1.44em; } }
  @media screen and (min-width: 77rem) {
    :root {
      --size-500: 1.5em; } }
  @media screen and (min-width: 94rem) {
    :root {
      --size-500: 1.56em; } }
  @media screen and (min-width: 27rem) {
    :root {
      --size-600: 1.512em; } }
  @media screen and (min-width: 36rem) {
    :root {
      --size-600: 1.584em; } }
  @media screen and (min-width: 48rem) {
    :root {
      --size-600: 1.656em; } }
  @media screen and (min-width: 64rem) {
    :root {
      --size-600: 1.728em; } }
  @media screen and (min-width: 77rem) {
    :root {
      --size-600: 1.8em; } }
  @media screen and (min-width: 94rem) {
    :root {
      --size-600: 1.872em; } }
  @media screen and (min-width: 27rem) {
    :root {
      --size-700: 1.8144em; } }
  @media screen and (min-width: 36rem) {
    :root {
      --size-700: 1.9008em; } }
  @media screen and (min-width: 48rem) {
    :root {
      --size-700: 1.9872em; } }
  @media screen and (min-width: 64rem) {
    :root {
      --size-700: 2.0736em; } }
  @media screen and (min-width: 77rem) {
    :root {
      --size-700: 2.16em; } }
  @media screen and (min-width: 94rem) {
    :root {
      --size-700: 2.2464em; } }
  @media screen and (min-width: 27rem) {
    :root {
      --size-800: 2.1777em; } }
  @media screen and (min-width: 36rem) {
    :root {
      --size-800: 2.2814em; } }
  @media screen and (min-width: 48rem) {
    :root {
      --size-800: 2.3851em; } }
  @media screen and (min-width: 64rem) {
    :root {
      --size-800: 2.4888em; } }
  @media screen and (min-width: 77rem) {
    :root {
      --size-800: 2.5925em; } }
  @media screen and (min-width: 94rem) {
    :root {
      --size-800: 2.6962em; } }
  @media screen and (min-width: 27rem) {
    :root {
      --size-900: 2.6124em; } }
  @media screen and (min-width: 36rem) {
    :root {
      --size-900: 2.7368em; } }
  @media screen and (min-width: 48rem) {
    :root {
      --size-900: 2.8612em; } }
  @media screen and (min-width: 64rem) {
    :root {
      --size-900: 2.9856em; } }
  @media screen and (min-width: 77rem) {
    :root {
      --size-900: 3.11em; } }
  @media screen and (min-width: 94rem) {
    :root {
      --size-900: 3.2344em; } }

/*
 *
 * ANCHOR 2./ Max Widths
------------------------------------------------*/
:root {
  /* max-width-narrow */
  --max-width-narrow: 24rem;
  /* max-width-text */
  --max-width-text: 38rem;
  /* max-width-wide */
  --max-width-wide: 44rem;
  /* max-width-span */
  --max-width-span: 60rem; }
  @media screen and (min-width: 27rem) {
    :root {
      --max-width-narrow: 25.2rem; } }
  @media screen and (min-width: 36rem) {
    :root {
      --max-width-narrow: 26.4rem; } }
  @media screen and (min-width: 48rem) {
    :root {
      --max-width-narrow: 27.6rem; } }
  @media screen and (min-width: 64rem) {
    :root {
      --max-width-narrow: 28.8rem; } }
  @media screen and (min-width: 77rem) {
    :root {
      --max-width-narrow: 30rem; } }
  @media screen and (min-width: 94rem) {
    :root {
      --max-width-narrow: 31.2rem; } }
  @media screen and (min-width: 27rem) {
    :root {
      --max-width-text: 39.9rem; } }
  @media screen and (min-width: 36rem) {
    :root {
      --max-width-text: 41.8rem; } }
  @media screen and (min-width: 48rem) {
    :root {
      --max-width-text: 43.7rem; } }
  @media screen and (min-width: 64rem) {
    :root {
      --max-width-text: 45.6rem; } }
  @media screen and (min-width: 77rem) {
    :root {
      --max-width-text: 47.5rem; } }
  @media screen and (min-width: 94rem) {
    :root {
      --max-width-text: 49.4rem; } }
  @media screen and (min-width: 27rem) {
    :root {
      --max-width-wide: 46.2rem; } }
  @media screen and (min-width: 36rem) {
    :root {
      --max-width-wide: 48.4rem; } }
  @media screen and (min-width: 48rem) {
    :root {
      --max-width-wide: 50.6rem; } }
  @media screen and (min-width: 64rem) {
    :root {
      --max-width-wide: 52.8rem; } }
  @media screen and (min-width: 77rem) {
    :root {
      --max-width-wide: 55rem; } }
  @media screen and (min-width: 94rem) {
    :root {
      --max-width-wide: 57.2rem; } }
  @media screen and (min-width: 27rem) {
    :root {
      --max-width-span: 63rem; } }
  @media screen and (min-width: 36rem) {
    :root {
      --max-width-span: 66rem; } }
  @media screen and (min-width: 48rem) {
    :root {
      --max-width-span: 69rem; } }
  @media screen and (min-width: 64rem) {
    :root {
      --max-width-span: 72rem; } }
  @media screen and (min-width: 77rem) {
    :root {
      --max-width-span: 75rem; } }
  @media screen and (min-width: 94rem) {
    :root {
      --max-width-span: 78rem; } }

/*
 *
 * ANCHOR 3./ Fonts
------------------------------------------------*/
:root {
  --font-serif: 'jaf-lapture', serif;
  --font-sans: 'Karla', sans-serif;
  --font-black-letter: 'cabazon', serif; }

/*
 *
 * ANCHOR 4./ Colors
------------------------------------------------*/
:root {
  /* Color values */
  --color-primary: #22261F;
  --color-primary-glare: #2A3325;
  --color-primary-glare-2: #595e56;
  --color-secondary: #E75A2E;
  --color-secondary-shade: #C75A1D;
  --color-tertiary: #DAB636;
  --color-tertiary-shade: #D9CEB2;
  --color-tertiary-glare: #F6E2AA;
  --color-lightest: #FFFCF1;
  /* Semantic colors */
  --color-header-bg: var(--color-primary);
  --color-header-nav-text: var(--color-tertiary-glare);
  --color-header-nav-text-active: var(--color-tertiary);
  --color-header-menu-trigger: var(--color-tertiary-glare);
  --color-header-menu-trigger-active: var(--color-lightest);
  --color-header-submenu-heading: var(--color-secondary-shade);
  --color-header-submenu-text: var(--color-primary);
  --color-header-links-focus: var(--color-secondary);
  --color-header-news-bg: var(--color-primary);
  --color-header-news-text: var(--color-tertiary);
  --color-header-lines: var(--color-tertiary-glare);
  --color-header-icons: var(--color-secondary);
  --color-header-search-border: var(--color-primary);
  --color-breadcrumb-text: var(--color-secondary);
  --color-text: var(--color-primary);
  --color-link: var(--color-primary);
  --color-link-underline: var(--color-secondary-shade);
  --color-section-lines: var(--color-primary);
  --color-faint-lines: var(--color-tertiary-shade);
  --color-headings-1: var(--color-primary);
  --color-headings-2: var(--color-primary);
  --color-headings-3: var(--color-secondary-shade);
  --color-headings-4: var(--color-primary-glare-2);
  --color-headings-5: var(--color-secondary);
  --color-bg: var(--color-lightest);
  --color-footer-quote: var(--color-lightest);
  --color-footer-attribute: var(--color-primary);
  --color-footer-links: var(--color-lightest);
  --color-footer-links-focus: var(--color-secondary);
  --color-footer-icons: var(--color-tertiary);
  --color-footer-icons-hover: var(--color-tertiary-glare);
  --color-button-primary: var(--color-primary);
  --color-button-text-primary: var(--color-tertiary);
  --color-button-border-primary: var(--color-tertiary);
  --color-button-hover-primary: var(--color-primary-glare);
  --color-button-secondary: var(--color-tertiary);
  --color-button-text-secondary: var(--color-primary-glare);
  --color-button-border-secondary: var(--color-primary-glare);
  --color-button-hover-secondary: var(--color-tertiary-glare);
  --color-button-header: var(--color-primary);
  --color-image-caption: var(--color-primary-glare-2);
  --color-content-listing-hover: var(--color-tertiary-glare);
  --color-maquee-bg: var(--color-secondary);
  --color-maquee-text: var(--color-lightest);
  --color-maquee-text-hover: var(--color-tertiary-glare);
  --color-site-alert-bg: var(--color-secondary);
  --color-site-alert-text: var(--color-lightest);
  --color-site-alert-text-hover: var(--color-tertiary-glare);
  --color-timeline-heading-bg: var(--color-secondary);
  --color-timeline-heading-text: var(--color-lightest);
  --color-search-highlight-bg: var(--color-tertiary-glare); }

.reverse-colors {
  --color-text: var(--color-lightest);
  --color-link: var(--color-lightest);
  --color-section-lines: var(--color-tertiary);
  --color-headings-1: var(--color-tertiary);
  --color-headings-2: var(--color-tertiary);
  --color-headings-3: var(--color-tertiary);
  --color-headings-4: var(--color-tertiary-shade);
  --color-bg: var(--color-primary);
  --color-button-primary: var(--color-tertiary);
  --color-button-text-primary: var(--color-primary);
  --color-button-border-primary: var(--color-primary);
  --color-button-hover-primary: var(--color-tertiary-glare);
  --color-button-secondary: var(--color-primary);
  --color-button-text-secondary: var(--color-tertiary);
  --color-button-border-secondary: var(--color-tertiary);
  --color-button-hover-secondary: var(--color-primary-glare);
  --color-button-header: var(--color-tertiary); }

.dark-mode,
.dark-mode .reverse-colors {
  --color-header-news-bg: var(--color-primary-glare);
  --color-header-news-text: var(--color-tertiary-shade);
  --color-breadcrumb-text: var(--color-secondary-shade);
  --color-text: var(--color-tertiary-shade);
  --color-link: var(--color-tertiary-shade);
  --color-section-lines: var(--color-tertiary-shade);
  --color-headings-1: var(--color-tertiary-shade);
  --color-headings-2: var(--color-tertiary-shade);
  --color-headings-3: var(--color-secondary-shade);
  --color-headings-4: var(--color-tertiary-shade);
  --color-bg: var(--color-primary);
  --color-button-primary: var(--color-primary-glare);
  --color-button-secondary: var(--color-primary);
  --color-maquee-bg: var(--color-secondary-shade);
  --color-maquee-text: var(--color-tertiary-shade); }