/* ---------- variables ---------- */

:root {
  --spacing_sm: 8px; /* spacing_sm */
  --spacing_md: 16px; /* spacing_md */
  --spacing_lg: 24px; /* spacing_lg */
  --spacing_xl: 48px; /* spacing_xl */

  --mainFont: "Wremena"; /* mainFont */
  --blackletterFont: "Basteleur"; /* blackletterFont */
  --psychFont1: "Basteleur"; /* psychFont1 */
  --psychFont2: "Cooper Std"; /* psychFont2 */
  --titleFont3: "Distro Bold"; /* titleFont3 */

  /* current theme, replace every season */
  --background: #1e1f20; /* back */

  --f_high: #e4eff0; /* f_high */
  --f_med: #96b8ac; /* f_med */
  --f_low: #a874e8; /* f_low */
  --f_inv: #e4eff0; /* f_inv */

  --b_high: #96b8ac; /* b_high */
  --b_med: #373c42; /* b_med */
  --b_low: #2c2d2e; /* b_low */
  --b_inv: #e4eff0; /* b_inv */
}

/* ----------- structure -------------- */

html {
  font-family: "Wremena"; /* mainFont */
  font-weight: 400;
  font-size: 22px;
  line-height: 33px;
}

body {
  background: #1e1f20; /* back */
  background: var(--background);
  color: #b25c02; /*lightTextColor */
  color: var(--f_med);
  margin: 0;
}

/* ---------- typography ----------- */

@font-face {
  font-family: "CalFrakturModern";
  src: url("webfonts/36901D_0_0.eot");
  src: url("webfonts/36901D_0_0.eot?#iefix") format("embedded-opentype"),
    url("webfonts/36901D_0_0.woff2") format("woff2"),
    url("webfonts/36901D_0_0.woff") format("woff"),
    url("webfonts/36901D_0_0.ttf") format("truetype");
}

@font-face {
  font-family: "Wittenberger";
  src: url("webfonts/WittenbergerFrakturMTStd.woff") format("woff"),
    url("webfonts/WittenbergerFrakturMTStd.woff2") format("woff2");
}

@font-face {
  font-family: "medieval-pixel";
  src: url("webfonts/Medieval-Pixel.woff") format("woff"),
    url("webfonts/Medieval-Pixel.woff2") format("woff2");
}

@font-face {
  font-family: "Cooper Std";
  src: url("webfonts/CooperBlackStd.woff2") format("woff2"),
    url("webfonts/CooperBlackStd.woff") format("woff");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Basteleur";
  src: url("webfonts/Basteleur-Bold.woff2") format("woff2"),
    url("webfonts/Basteleur-Bold.woff") format("woff");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Distro Bold";
  font-style: normal;
  font-weight: normal;
  src: local("Distro Bold"), url("webfonts/DISTROB_.woff") format("woff");
}

@font-face {
  font-family: "Wremena";
  src: url("webfonts/Wremena-Bold.woff2") format("woff2"),
    url("webfonts/Wremena-Bold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Wremena";
  src: url("webfonts/Wremena.woff2") format("woff2"),
    url("webfonts/Wremena.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

h1 {
  font-size: 5em;
  line-height: 0.9em;
  margin-top: 0;
  font-weight: 800;
  font-family: "medieval-pixel"; /* psychFont1 */
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
}

h2 {
  font-size: 1.9em;
  margin-top: 0;
  margin-bottom: 32px;
  font-weight: 500;
  font-family: "Distro Bold"; /* titleFont3 */
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
}

h2.blackletter {
  font-size: 2.3em;
}

h3 {
  margin-top: 0;
  line-height: 1.2em;
  font-family: "Distro Bold"; /* titleFont3 */
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
}

h3.blackletter {
  font-size: 2em;
  line-height: 1em;
  margin-bottom: 16px; /* spacing_md */
}

h4 {
  font-size: 1em;
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
}

h4.blackletter {
  font-size: 1.5em;
}

p {
  margin-top: 24px; /* spacing_lg */
  margin-bottom: 24px; /* spacing_lg */
  margin-left: 0;
  margin-right: 0;
  display: block;
}

hr {
  border: 0;
  height: 2px;
  background-color: #b25c02;
  background-color: var(--f_med);
  margin-top: 48px; /* spacing_xl */
  margin-bottom: 48px; /* spacing_xl */
}

hr.dotted {
  height: 0;
  border-color: #b25c02;
  border-color: var(--f_med);
  border-bottom: 2px dotted;
  background: transparent;
}

summary h4 {
  margin: 0;
  display: inline-block;
}

blockquote {
  margin-top: 8px; /* spacing_sm */
  margin-left: 0;
  margin-bottom: 0;
  margin-right: 0;
  font-size: 1.2em;
  color: #3b1c16; /* f_high */
  color: var(--f_high);
  padding-left: 16px; /* spacing_md */
  font-family: "Distro Bold"; /* titleFont3 */
  max-width: 500px;
  border-left: 2px dotted;
}

blockquote strong {
  opacity: 0.5;
  font-size: 1rem;
}

a {
  color: inherit;
  cursor: pointer;
  font-family: "Wittenberger"; /* blackletterFont */
  font-weight: bold;
  font-size: 1em;
  text-decoration: none;
  border-bottom: 2px dashed #3b1c1650; /* f_high */
  border-bottom: 2px dashed var(--f_high);
}

a:hover {
  border-bottom: 2px solid #3b1c16; /* f_high */
  border-bottom: 2px solid var(--f_high);
  color: #3b1c16; /* f_high */
  color: var(--f_low);
}

a strong {
  font-size: 1em;
}

a.button {
  color: #1e1f20;
  color: var(--background);
  background-color: #3b1c16; /* f_high */
  background-color: var(--f_high);
  padding: 8px 16px;
  display:inline-block;
  border-radius:8px;
  display:flex;
  line-height:1em;
  font-family: "Distro Bold";
}

a.button span {
  display:inline-block;
}

a.button svg {
  margin-right:12px;
  height: 38px;
  width: 37px;
}

a.button svg rect,
a.button svg path,
a.button svg circle  {
  fill: #1e1f20;
  fill: var(--background);
}

strong {
  font-family: "Wittenberger"; /* blackletterFont */
  font-weight: bold;
  font-size: 1em;
}

small {
  font-size: 16px;
}

li p {
  margin:0;
}

.lighter {
  font-size: 16px;
  line-height: 20px;
}

.text-center {
  text-align: center;
}

.blackletter {
  font-family: "Basteleur"; /* blackletterFont */
}

.psych-1 {
  font-family: "Basteleur"; /* psychFont1 */
  font-weight: 300;
}

.psych-2 {
  font-family: "Cooper Std"; /* psychFont2 */
}

.accent {
  color: #3b1c16; /* f_high */
  color: var(--f_high);
}

.larger {
  font-size:1.5em;
  line-height:1.5em;
}

.dingbats {
  font-size: 40px;
  color: #3b1c16; /* f_high */
  color: var(--f_high);
}

.dingbats path {
  fill: #3b1c16; /* f_high */
  fill: var(--f_high);
}

.ornament {
  opacity: 0.3;
  width: 120px;
  height: 120px;
  margin-top: 24px; /* spacing_lg */
  background: #b25c02; /*lightTextColor */
  background: var(--f_med);
  mask-image: url(/img/ornament-leaf-square.gif);
  mask-size: contain;
  -webkit-mask-image: url(/img/ornament-leaf-square.gif);
  -webkit-mask-size: contain;
}

.info {
  border-radius:8px;
  border: 2px solid;
  line-height:1.2em;
  font-size:16px;
}

/* -------------- utils ------------- */

.display-none,
.hidden {
  display: none;
}

.mobile {
  display: none;
}

.desktop {
  display: block;
}

figure {
  margin-right: 0;
  margin-left: 0;
}

figcaption {
  font-size: 14px;
  line-height: 14px;
  font-weight: normal;
  opacity: 0.4;
  padding-top: 8px; /* spacing_sm */
}

img {
  max-width: 100%;
  height: auto;
  border-radius: 8px; /* border_radius */
  overflow: hidden;
  line-height: 0;
}

.last-mod {
  padding-top: 16px; /* spacing_md */
  margin-top: 16px; /* spacing_md */
  border-top: 2px solid;
}

.checklist ul {
  padding: 0;
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 24px; /* spacing_lg */
  margin-left: 0;
  list-style: none;
}

.checklist ul ul {
  padding: 0;
  margin-top: 0;
  margin-right: 0;
  margin-bottom:0;
  margin-left: 0;
  list-style: none;
}

.checklist ul ul li {
  color: #3b1c16; /* f_high */
  color: var(--f_low);
}

.checklist input {
  margin-top: 8px; /* spacing_sm */
}

.checklist input::before {
  font-family: "Distro Bats";
  content: "~";
  font-size: 19px;
  width: 20px;
  height: 20px;
  line-height: 20px;
  display: block;
  position: relative;
  top: -2px;
  color: #3b1c16; /* f_high */
  color: var(--f_high);
  background: #1e1f20; /* back */
  background: var(--background);
}

.checklist input:checked::before {
  content: "|";
}

.table-of-contents {
  max-width: 700px;
  padding-left: 16px; /* spacing_md */
  border-left: 2px solid;
  margin-bottom: 48px;
  columns:2;
  line-height:40px;
}

.table-of-contents h2 {
  font-size:20px;
  padding:0;
  margin-bottom:0;
}

.table-of-contents p {
  margin:0;
}

table {
  border: 2px solid;
  border-color: #3b1c16; /* f_high */
  border-color: var(--f_high);
}

th, td {
  border: 1px solid;
  border-color: #3b1c16; /* f_high */
  border-color: var(--f_high);
  text-align:left;
}

th, td {
  padding: 8px 16px;
  height:16px;
  font-size:16px;
  line-height:1.2em;
}

tr:hover td {
  background-color: #4e4d32; /* b_med */
  background-color: var(--b_med); /* b_med */
}

.themes {
  display:flex;
  flex-direction:row;
  padding-bottom: 16px; /* spacing_md */
  justify-content: flex-start;
}

.theme {
  padding-right:16px; /* spacing_md */
}

.theme h4 {
  margin:0;
}

.warning {
  background-color: #a5a186; /* b_low */
  background-color: var(--b_low); /* b_low */
  border-radius:8px;
  margin-bottom: 16px;
  margin-top: 16px;
  font-size:16px;
  line-height:16px;
}

.warning .row {
  margin:0;
}

/* ---------- forms ----------- */

form {
  max-width:600px;
  margin-bottom:32px;
}

fieldset {
  max-width:600px;
  padding:24px;
  border:2px dotted var(--f_med);
  border-radius:8px;
  margin-bottom:24px;
}

legend {
  line-height: 1.2em;
  font-family: "Distro Bold";
}

label {
  display:block;
}

label.checkbox {
  display:inline-block;
}

input, select, textarea {
  border-radius:4px;
  padding: 8px;
  width:100%;
  box-sizing: border-box;
  border:2px solid var(--f_med);
  font-size:18px;
  font-family: "Wremena";
  font-weight: 400;
}

input[type=checkbox] {
  width:auto;
  margin-right:8px;
}

/* ------------ MENU ------------- */

.menu ul {
  list-style: none;
  display: inline-block;
  padding: 0;
  margin: 0;
}

.menu ul li {
  display: inline-block;
}

.menu a {
  font-size: 20px;
  margin-right: 16px; /* spacing_md */
  text-decoration: none;
  position: relative;
  font-family: "Distro Bold"; /* titleFont3 */
  display: inline-block;
  border-bottom-style: none;
}

.menu a.active {
  color: #3b1c16; /* f_high */
  color: var(--f_high);
  border-color: #3b1c16; /* f_high */
  border-color: var(--f_high);
  border-bottom-style: solid;
}

.menu .dingbats {
  padding: 0 8px;
}

.menu .dingbats svg {
  height:16px;
}

.menu .dingbats svg path {
  fill: #b25c02; /* f_med */
  fill: var(--f_med);
}

.resolution-toggle button {
  border: 2px solid;
  border-radius: 4px;
  background: transparent;
  color: #b25c02; /* darkTextColor */
  color: var(--f_med);
  background: #1e1f20; /* background */
  background: var(--background);
  font-family: "Distro Bold"; /* titleFont3 */
}

.resolution-toggle button:disabled:hover {
  background: transparent;
  color: #b25c02; /* darkTextColor */
  color: var(--f_med);
}

.resolution-toggle button:hover {
  background-color: #3b1c16; /* f_high */
  background-color: var(--f_high);
  border-color: #3b1c16; /* f_high */
  border-color: var(--f_high);
  color: #fff0b7; /* lightBackColor */
  color: var(--background);
}

.phases {
  padding-left: 16px; /* spacing_md */
}

.low {
  mix-blend-mode: multiply;
  width:100%;
  image-rendering: optimizeSpeed;
  image-rendering: -moz-crisp-edges;
  image-rendering: -o-crisp-edges;
  image-rendering: -webkit-optimize-contrast;
}

.image-background {
  line-height:0;
  border-radius:8px;
}

.mastodon {
  display:none;
}

/* ------------ PAGE TITLE ------------- */

.page-title {
  line-height: 50px;
  color: #3b1c16; /* f_high */
  color: var(--f_high);
}

.page-title h1,
.page-title h2,
.page-title h3,
.page-title span {
  display: inline-block;
  vertical-align: middle;
  margin: 0;
  line-height: inherit;
}

.page-title h1 {
  font-size: 1.9em;
  margin-top: 0;
  margin-bottom: 0;
  font-weight: 500;
}

.page-title h2 {
  font-size: 1.17em;
  line-height: 1em;
}

.page-title span {
  padding-top: 0;
  padding-right: 8px; /* spacing_sm */
  padding-bottom: 0;
  padding-left: 8px; /* spacing_sm */
}

.page-title span:first-child {
  padding-top: 0;
  padding-right: 8px; /* spacing_sm */
  padding-bottom: 0;
  padding-left: 0;
}

/* ---------- HOME ----------- */

.home-content .section {
  display: inline-block;
  width: 24%;
  box-sizing: border-box;
  vertical-align: top;
}

.home-content hr {
  margin: 16px 0;
}

.home-content .section ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

.home-content h2 {
  padding-bottom: 16px; /* spacing_md */
  border-bottom: 2px dotted;
  font-size: 1.17em;
}

.home-content a {
  font-family: "Distro Bold";
  border-bottom-style: none;
}

.list-page .home-content .icon {
  margin-left: 0;
  margin-top:0;
}

.icon {
  background: #b25c02; /*lightTextColor */
  background: var(--f_med);
  mask-size: contain;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  width: 100%;
  height: 250px;
}

.list-page .icon,
.single-page .icon {
  margin-top: 24px; /* spacing_lg */
}

#icon-works {
  mask-image: url(/img/icon-works.gif);
  -webkit-mask-image: url(/img/icon-works.gif);
}

#icon-craft {
  mask-image: url(/img/icon-craft.gif);
  -webkit-mask-image: url(/img/icon-craft.gif);
}

#icon-folklore {
  mask-image: url(/img/icon-folklore.gif);
  -webkit-mask-image: url(/img/icon-folklore.gif);
}

#icon-food {
  mask-image: url(/img/icon-food.gif);
  -webkit-mask-image: url(/img/icon-food.gif);
}

.support {
  margin-top: 16px; /* spacing_md */
}

.support a.button {
  max-width:160px;
}

.see-all {
  font-size: 18px;
  display: block;
  padding-top: 16px; /* spacing_md */
  text-decoration: none;
}

.bio .name {
  margin: 0;
  font-size: 34px;
  line-height:34px;
}

.aka {
  margin-top:0;
}

.social {
  line-height: 24px;
}

.social svg {
  width: 24px;
  padding: 0 4px;
  fill: #3b1c16; /* f_high */
  fill: var(--f_high);
}

.social a {
  text-decoration: none;
  border-bottom-style: none;
}

.social svg:hover {
  fill: #3b1c16; /* f_high */
  fill: var(--f_high);
}

.image-resolution-info ul {
  text-align:center;
}

.image-resolution-info .resolution-toggle {
  padding: 16px;
  background: #b25c02; /* f_med */
  background: var(--f_med);
}

#folklore-img {
  mask-image: url(/img/folklore-outline.gif);
  -webkit-mask-image: url(/img/folklore-outline.gif);
  height:250px;
  width:100%;
  margin-top:-20px;
  margin-bottom:40px;
}

/* ---------- taxonomies ----------- */

.tag-page .title {
  color: #3b1c16; /* f_high */
  color: var(--f_high);
  font-size: 1.9em;
}

.tag {
  padding-right: 8px; /* spacing_sm */
  opacity: 0.5;
  transition: 0.3s;
}

.tag:hover,
.tag.active {
  opacity: 1;
}

.tag svg {
  margin-right: 8px; /* spacing_sm */
  font-size: 12px;
  position: relative;
  top: -2px;
}

.tags {
  margin-top: 8px; /* spacing_sm */
  margin-bottom: 48px; /* spacing_xl */
  padding-left: 0;
}

.tags li {
  list-style: none;
  padding: 0;
  margin: 0;
  display: inline-block;
  margin-left: -3px;
}

.tags li:first-child {
  margin-left: 0;
}

.tags li:before {
  content: ", ";
}

.tags li:first-child:before {
  content: "" !important;
}

.tags li:last-child:before {
  content: ", and ";
}

/* ---------- ALL CARDS --------------- */

.card {
  text-decoration: none;
  margin-bottom: 24px; /* spacing_xl */
  display: block;
  page-break-inside: avoid;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  border-color:transparent;
}

.card h3 {
  line-height: 1rem;
  padding-bottom: 8px;
  margin: 0;
  font-size: 1em;
}

.card .desc {
  font-weight: normal;
  font-size: 18px;
  line-height: 1.2em;
  padding-bottom: 8px;
}

.card:hover {
  border-color:transparent;
}

/* ---------- WORKS --------------- */

.works .card h3 {
  display:none;
}

.works .notes h3 {
  display:block;
}

.works .card .desc {
  display:none;
}

.works .notes h3 {
  font-size:40px;
}

.works .notes .desc {
  display:block;
}

.youtube-video-container {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.youtube-video-container::after {
  display: block;
  content: "";
  padding-top: 56.25%;
}

.youtube-video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* ----- NOTES ------ */

.notes {
  border: 3px solid;
  padding-top: 24px; /* spacing_lg */
  padding-right: 24px; /* spacing_lg */
  padding-bottom: 24px; /* spacing_lg */
  padding-left: 24px; /* spacing_lg */
  border-radius: 12px;
}

.notes:hover {
  border-color: #3b1c16; /* f_high */
  border-color: var(--f_low);
}

.notes .picture {
  display: none;
}

.notes h3 {
  font-family: "Basteleur"; /* psychFont1 */
  font-weight: 300;
  font-size: 3.5em;
  line-height: 1em;
  padding: 0;
  word-break: break-word;
}

.notes h3:before {
  content: "Note";
  font-family: "Cooper Std"; /* psychFont2 */
  font-weight: lighter;
  font-size: 22px;
  line-height: 40px;
  display: block;
  padding-bottom: 16px; /* spacing_md */
}

.notes .desc {
  margin-top: 24px; /* spacing_lg */
  padding-bottom:0;
}

.notes .picture {
  display: none;
}

/* ---------- FOLKLORE --------------- */

.folklore-card.notes h3:before {
  content: "Folklore note";
}

.dictionary .entry {
  break-inside: avoid-column;
}

.columns.dictionary p {
  margin-bottom:16px;
}

.dictionary h3 {
  margin:0;
  font-size:18px;
  display:inline;
  color: #3b1c16;
  color: var(--f_high);
}

/* -------- JOURNAL ---------*/

.journal-entry h2 {
  font-size: 20px;
  margin: 0;
  padding: 0;
  border: 0;
}

/* -------- RECIPES ---------*/

.recipe-card.notes h3:before {
  content: "Cooking note";
}

.recipes a {
  text-decoration: none;
}

.specs {
  margin-bottom: 8px; /* spacing_sm */
  font-size: 18px;
  line-height: 18px;
}

.ingredients {
  max-width: 300px;
  min-width: 300px;
  padding-right: 24px; /* spacing_lg */
  display: inline-block;
  vertical-align: top;
  box-sizing: border-box;
}

.ingredients ul {
  margin: 0;
  padding-left: 20px;
  line-height: 14px;
}

.ingredients ul li {
  margin-top: 0;
  margin-right: 0;
  margin-left: 0;
  margin-bottom: 16px; /* spacing_md */
}

.ingredients ul li p {
  margin: 0;
  font-size: 18px;
}

.recipe-content {
  display: flex;
  flex-direction: row;
}

.steps {
  display: inline-block;
  vertical-align: top;
  max-width: 500px;
}

.steps ol {
  padding-left: 20px;
}

.steps ol li {
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 16px; /* spacing_md */
  margin-left: 0;
}

.recipe em {
  font-style: initial;
  border-bottom: 1px solid;
}

.single .steps p {
  font-size: inherit;
}

.recipe .photo {
  margin-top: 24px; /* spacing_lg */
  border-radius: 8px; /* border_radius */
  border-radius: 8px; /* spacing_sm */
  overflow: hidden;
  line-height: 0;
}

.recipe-insert {
  display:inline-block;
  border-bottom:0;
}

.recipe-insert:hover {
  border-bottom:0;
}

/* -------- CRAFTS ---------*/

.craft-card .desc {
  font-weight: normal;
  font-size: 18px;
  line-height: 1.2em;
}

.craft-card.notes h3:before {
  content: "Craft note";
}

.shop-link {
  border: 2px solid;
  padding-top: 14px;
  padding-right: 24px; /* spacing_lg */
  padding-bottom: 10px;
  padding-left: 24px; /* spacing_lg */
  border-radius: 8px; /* border_radius */
  margin-top: 24px; /* spacing_lg */
}

/* --------- TATTOO ----------- */

.armory img {
  max-height:400px;
}

.rituals img {
  max-height:400px;
}

.undead img {
  max-height:800px;
}

.flash {
  display:inline-block;
}

.flash.taken img {
  opacity:0.3;
}

.flash img {
  mix-blend-mode: multiply;
}

/* --------- FILMS ----------- */

.film-card {
  text-decoration: none;
}

.film-card .movie-wrap {
  display: flex;
  flex-direction: row;
  margin-top: 24px; /* spacing_lg */
  margin-left: 0;
  margin-bottom: 24px; /* spacing_lg */
  margin-right: 0;
}

.film-card .director {
  font-size: 18px;
  padding-bottom: 16px; /* spacing_md */
  line-height: 18px;
}

.movie {
  flex: 3;
}

.film-card .desc {
  font-weight: 100;
}

.film-card h3 {
  margin: 0;
}

.film-card em {
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 24px; /* spacing_lg */
  margin-left: 0;
  display: block;
}

.movie-content {
  padding-left: 24px; /* spacing_lg */
  flex: 1;
}

/* -------- PRODUCTS ---------*/

.product {
  border: 2px solid;
  padding-top: 24px; /* spacing_lg */
  padding-right: 24px; /* spacing_lg */
  padding-bottom: 24px; /* spacing_lg */
  padding-left: 24px; /* spacing_lg */
  border-radius: 12px;
  display: flex;
  flex-direction: row;
  max-width: 800px;
  box-sizing: border-box;
}

.product .image {
  min-width: 200px;
  max-width: 200px;
  line-height: 0;
}

.product .desc {
  padding-left: 24px; /* spacing_lg */
}

.product button {
  border: 0;
  padding-top: 8px; /* spacing_sm */
  padding-right: 16px; /* spacing_md */
  padding-bottom: 8px; /* spacing_sm */
  padding-left: 16px; /* spacing_md */
  background-color: #b25c02; /* lightTextColor */
  background-color: var(--f_med);
  font-weight: bold;
  border-radius: 4px;
  cursor: pointer;
  font-size: 18px;
  color: #fff0b7; /* lightBackColor */
}

.product button:hover {
  background-color: #3b1c16; /* f_high */
  background-color: var(--f_high);
}

.product h2 {
  margin-bottom: 16px; /* spacing_md */
}

.product p {
  margin-top: 0;
  margin-bottom: 16px; /* spacing_md */
}

.product .price {
  font-weight: bold;
  font-family: "Distro Bold"; /* titleFont3 */
}

.product-card {
  padding:0;
  flex-direction:column;
  overflow:hidden;
}

.product-card h3 {
  font-size:32px;
}

.product-card .image {
  max-width:100%;
}

.product-card .image img {
  border-radius:0;
}

.product-card .desc {
  padding:24px;
}

/* -------- SINGLE PROJECTS ---------*/

.single-page h1 {
  margin-top: 0;
  margin-bottom: 0;
  color: #3b1c16; /* f_high */
  color: var(--f_high);
}

.back-home {
  margin-bottom: 8px; /* spacing_sm */
}

.back-home a {
  text-decoration: none;
}

.back-home a svg {
  margin-right: 16px; /* spacing_md */
  font-size: 16px;
}

.single p {
  font-size: 24px;
}

.single small {
  opacity: 0.5;
  font-size: 14px;
  line-height: 1.2em;
}

/* -------- TIMELINE ---------*/

.timeline h2 {
  margin-bottom: 16px; /* spacing_md */
}

.stats {
  font-size: 14px;
  font-weight: bold;
  font-family: "Distro Bold";
  margin-bottom: 16px; /* spacing_md */
}

.stat {
  display: inline-block;
  margin-right: 8px; /* spacing_sm */
  padding-left: 8px; /* spacing_sm */
  padding-right: 8px; /* spacing_sm */
  border-radius: 4px;
  background: #fff;
  background: var(--b_med);
}

/* -------- TREE ---------*/

.tree h2 {
  display: inline-block;
  margin-top: 16px; /* spacing_md */
}

.tree ul {
  list-style: none;
}

/* -------- STRUCTURE ---------*/

.full-wrap {
  padding: 0 2em;
  margin: 0;
  width: 100%;
  box-sizing: border-box;
}

.wrap {
  padding: 0 2em;
  max-width: 1000px;
  margin: 0;
}

.small-wrap {
  padding: 0 2em;
  max-width: 600px;
  margin: 0;
}

aside {
  display: inline-block;
  vertical-align: top;
}

.sidebar {
  position: static;
  top: 24px; /* spacing_lg */
  font-size: 18px;
  line-height: 24px;
  padding: 0 2em;
  max-width: 200px;
  min-width: 200px;
}

.sidebar .back-home h3 {
  padding-bottom: 0;
  border-bottom: none;
}

.sidebar a {
  font-family: "Distro Bold";
  font-size: 1em;
  border-bottom-style: none;
}

article {
  display: inline-block;
  width: calc(100% - 280px);
}

.sidebar h3 {
  padding-bottom: 16px; /* spacing_md */
  border-bottom: 2px dotted;
}

.sidebar ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.columns {
  column-count: 3;
}

.columns-2 {
  -webkit-column-width: 400px;
  -moz-column-width: 400px;
  column-width: 400px;
}

.columns-3 {
  -webkit-column-width: 300px;
  -moz-column-width: 300px;
  column-width: 300px;
}

.small-wrap .columns-2 {
  -webkit-column-width: 288px;
  -moz-column-width: 288px;
  column-width: 288px;
}

.columns.no-margin-inside ul {
  margin:0;
}

.columns p {
  margin: 0;
}

.row {
  display: flex;
  flex-direction: row;
  margin: 0 -8px; /* spacing_sm */
}

.half {
  display: inline-block;
  box-sizing: border-box;
  width: 50%;
  line-height: 0;
  padding-top: 0;
  padding-right: 8px; /* spacing_sm */
  padding-bottom: 0;
  padding-left: 8px; /* spacing_sm */
}

.half.normal-line-height {
  line-height: 1.5em;
}

.half p {
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 16px; /* spacing_md */
  margin-left: 0;
}

.half figcaption {
  display: block;
  margin-top: 16px; /* spacing_md */
}

/* -------- PADDING ---------*/

.no-padding-left {
  padding-left: 0;
}

.no-padding-bottom {
  padding-bottom: 0 !important;
}

.small-padding {
  padding: 16px;
}

.small-padding-left {
  padding-left: 16px;
}

.small-padding-right {
  padding-right: 16px;
}

.small-padding-top {
  padding-top: 16px;
}

.small-padding-bottom {
  padding-bottom: 16px;
}

.medium-padding {
  padding: 30px;
}

.medium-padding-top {
  padding-top: 30px;
}

.medium-padding-bottom {
  padding-bottom: 30px;
}

.medium-padding-right {
  padding-right: 30px;
}

.medium-padding-left {
  padding-left: 30px;
}

.big-padding {
  padding: 60px;
}

.big-padding-top {
  padding-top: 60px;
}

.big-padding-bottom {
  padding-bottom: 60px;
}

.big-padding-left {
  padding-left: 60px;
}

.big-padding-right {
  padding-right: 60px;
}

/* -------- MARGINS ---------*/

.small-margin-top {
  margin-top: 15px;
}

.small-margin-left {
  margin-left: 15px;
}

.small-margin-right {
  margin-right: 15px;
}

.small-margin-bottom {
  margin-bottom: 15px;
}

.medium-margin-top {
  margin-top: 30px;
}

.medium-margin-bottom {
  margin-bottom: 30px;
}

.no-margin {
  margin: 0;
}

.no-margin-bottom {
  margin-bottom: 0 !important;
}

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

.footer {
  line-height: 50px;
  font-weight: bold;
  height: 50px;
  font-size: 18px;
}

.footer span {
  display: inline-block;
  vertical-align: middle;
  padding-right: 16px; /* spacing_md */
  line-height: 50px;
}

.webring {
  display: inline-block;
  margin-right: 16px; /* spacing_md */
  border-bottom-style: none;
}

.webring svg {
  stroke: #3b1c16; /* f_high */
  stroke: var(--f_high);
  width: 40px;
  height: auto;
}

/* -------- PROGRESSIVE ENHANCEMENTS --------- */

@supports (position: sticky) {
  .sidebar {
    position: sticky;
  }
}

@supports (display: flex) {
  .home-content .section {
    flex: 1;
  }

  .ingredients {
    flex: 1;
  }

  .steps {
    flex: 3;
  }

  .half {
    flex: 1;
  }

  .flex-row {
    display: -webkit-flex;
    -webkit-flex-direction: row;
    display: flex;
    flex-direction: row;
  }

  .flex-col {
    display: -webkit-flex;
    -webkit-flex-direction: column;
    display: flex;
    flex-direction: column;
  }

  .flex-wrap {
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
  }

  .flex-1 {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
  }

  .flex-2 {
    -webkit-flex: 2;
    -ms-flex: 2;
    flex: 2;
  }

  .flex-3 {
    -webkit-flex: 3;
    -ms-flex: 3;
    flex: 3;
  }

  .flex-4 {
    -webkit-flex: 4;
    -ms-flex: 4;
    flex: 4;
  }

  .flex-5 {
    -webkit-flex: 5;
    -ms-flex: 5;
    flex: 5;
  }

  .flex-6 {
    -webkit-flex: 6;
    -ms-flex: 6;
    flex: 6;
  }

  .flex-row.desktop {
    display: -webkit-flex;
    -webkit-flex-direction: row;
    display: flex;
    flex-direction: row;
  }

  @media screen and (max-width: 599px) {
    .home-content .flex-row, .top-page-row {
      flex-direction: column;
    }

    .list-page,
    .tag-page,
    .single-page {
      flex-direction: column-reverse;
    }
  }
}


/* -------- MOBILE --------- */

@media screen and (max-width: 599px) {
  body {
    width: 100%;
    overflow-x: hidden;
    font-size: 18px;
    line-height: 28px;
  }
  h1 {
    font-size: 3em;
    margin-bottom: 8px; /* spacing_sm */
  }
  h2 {
    font-size: 1.8em;
  }
  h3 {
    font-size: 20px;
  }
  figcaption {
    padding-top: 8px; /* spacing_sm */
  }
  .dingbats {
    font-size: 35px;
  }
  .list-page .icon,
  .single-page .icon {
    margin-left: auto;
    margin-right: auto;
    width: 173px;
  }
  .list-page,
  .tag-page,
  .single-page {
    width: 100%;
  }
  .mobile {
    display: block;
  }
  .tagline {
    margin-top: 24px; /* spacing_lg */
  }
  .desktop,
  .flex-row.desktop {
    display: none;
  }
  .wrap,
  .small-wrap,
  .full-wrap,
  .sidebar {
    padding: 0 24px; /* spacing_lg */
    box-sizing: border-box;
  }
  article {
    width: 100%;
  }
  .sidebar {
    max-width: 100%;
    position: static;
    padding-top: 24px; /* spacing_lg */
  }
  .back-home {
    margin-bottom: 24px; /* spacing_lg */
  }
  .big-padding-top {
    padding-top: 30px;
  }
  .bio {
    padding-top: 0;
  }
  .profile-pic .photo {
    width: 80px;
    height: 115px;
  }
  .profile-pic {
    display: none;
    max-width: 80px;
    min-width: 80px;
    margin-bottom: 16px; /* spacing_md */
  }
  .page-title {
    height: auto;
    line-height: 30px;
    text-align: center;
  }
  .page-title h2 {
    display: block;
    padding-top: 16px;
  }
  .intro {
    padding-top: 16px;
  }

  .footer {
    height: auto;
  }
  .footer span {
    line-height: 28px;
  }
  .food .resources {
    margin-top: 48px; /* spacing_xl */
  }
  .recipe-content {
    display: block;
  }
  .recipe-content .ingredients {
    padding-top: 16px; /* spacing_md */
  }
  .recipe-content .steps {
    padding-top: 16px; /* spacing_md */
  }
  .home-content .section {
    padding-top: 16px; /* spacing_md */
    display: block;
    width: 100%;
  }
  .ornament {
    display: none;
  }
  .columns {
    column-count: 1 !important;
  }
  .product {
    flex-direction: column;
  }
  .product .image {
    max-width: none;
  }
  .product .desc {
    padding-left: 0;
    padding-top: 16px; /* spacing_md */
  }
  .card {
    margin-bottom: 16px; /* spacing_md */
  }
  .card h3 {
    font-size: 2.5em;
    padding-top: 8px; /* spacing_sm */
    line-height: 2rem;
  }
  .cooking-notes h3,
  .folk-notes h3,
  .craft-notes h3 {
    font-size: 2em;
  }
  .last-mod {
    max-width: 225px;
  }
  .categories .flex-row,
  .footer .flex-row,
  .food .flex-row,
  .top-page-row {
    display: block;
  }
  .section .small-padding-left {
    padding-left:0;
  }
  .section {
    padding-right:0;
  }
  #folklore-img {
    height:100px;
    margin-bottom:20px;
    margin-top:20px;
  }
}