/* ___  ____________  _____   __     ___  __  ____________
--/ _ \/  _/_  __/ / / / _ | / /    / _ \/ / / / __/_  __/
-/   _// /  / / / /_/ / __ |/ /__  / // / /_/ /\ \  / /   
/_/|_/___/ /_/  \____/_/ |_/____/ /____/\____/___/ /_/  */  


:root {
    --spacing_default: 1rem;
    --spacing_sm: 0.5rem; /* spacing_sm */
    --spacing_md: 1.5rem; /* spacing_md */
    --spacing_xm: 2rem; /* spacing_md */
    --spacing_lg: 3rem; /* spacing_lg */
    --spacing_xl: 5rem; /* spacing_xl */

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

    --border_size: 2px;
    --border_radius: 4px;
    --line_length: 50ch;

    /* current theme, replace every season */
    --mode: "dark";
    --background: #221915; /* back */

    --f_high: #d26829; /* f_high */
    --f_med: #b3a18e; /* f_med */
    --f_low: #d08254; /* f_low */
    --f_inv: #221915; /* f_inv */

    --b_high: #000000; /* b_high */
    --b_med: #716156; /* b_med */
    --b_low: #352b26; /* b_low */
    --b_inv: #9b3313; /* b_inv */
    
    --green: #7f9739;
}

::-moz-selection { background: var(--b_high); }
::selection { background:  var(--b_low); }

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

* {
    padding:0;
    margin:0;
    text-decoration: none;
    box-sizing: border-box;
}

html {
    font-family: "Wremena"; /* mainFont */
    font-weight: 400;
    font-size: 20px;
    line-height: 1.5rem;
    text-rendering: optimizeLegibility;
}

body {
    padding: 0 5vw;
    margin-top: var(--spacing_xm);
    color: var(--f_med);
    background: var(--background);
    overflow-x: hidden;
}

main, footer {
    padding-top:0;
}

html body {
    /*background: repeating-linear-gradient(
    var(--background),
    var(--background) calc(1rem - 1px),
    limegreen 1rem,
    limegreen 2px
    )!important;*/
}

.list-page, .single-page, .page-sidebar{
    width:100%;
    display: flex;
    flex-direction: column-reverse;
}

.list-page article, .single-page article {
    width:100%;
}

.flow > * + * {
    margin-top: var(--spacing_md);
}

.grid-2 {
    width:100%;
    display:grid;
    grid-gap: var(--spacing_default);
    grid-template-columns:1fr;
}

.grid-3 {
    width:100%;
    display:grid;
    grid-gap: var(--spacing_default);
    grid-template-columns:1fr;
}

.grid-4 {
    width:100%;
    display:grid;
    grid-gap: var(--spacing_default);
    grid-template-columns:1fr 1fr;
}


.grid-5 {
    width:100%;
    grid-gap: var(--spacing_default);
    grid-template-columns:1fr;
}

.grid-6 {
    width:100%;
    display:grid;
    grid-gap: var(--spacing_default);
    grid-template-columns:repeat(3, 1fr);
}

.grid-1-2 {
    width:100%;
    display:grid;
    grid-gap: var(--spacing_default);
    grid-template-columns: 1fr;
}

.grid-2-1 {
    width:100%;
    display:grid;
    grid-gap: var(--spacing_default);
    grid-template-columns: 1fr;
}

.recipe-grid {
    width:100%;
    grid-gap: var(--spacing_default);
    grid-template-columns: 300px 1fr;
}

.gallery-grid {
    columns: 1;
    column-gap: var(--spacing_default);
}

.gallery-grid p {
    margin:0;
}

.notes-grid {
    columns: 1;
    column-gap: var(--spacing_default);
}

.measured {
    max-width: var(--line_length);
}

.columns {
    column-count: 1;
}

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

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

.half {
    display: inline-block;
    width: 50%;
    line-height: 0;
    padding-right: var(--spacing_sm);
    padding-left: var(--spacing_sm);
}

.half:first-child {
    padding-left:0;
}

.half:last-child {
    padding-right:0;
}

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

.half p {
    margin-top: 0;
    margin-right: 0;
    margin-bottom: var(--spacing_sm);
    margin-left: 0;
}

/* ---------- SPACING ----------- */

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

.small-padding {padding: var(--spacing_sm);}
.small-padding-top {padding-top: var(--spacing_sm);}
.small-padding-right {padding-right: var(--spacing_sm);}
.small-padding-bottom {padding-bottom: var(--spacing_sm);}
.small-padding-left {padding-left: var(--spacing_sm);}

.default-padding {padding: var(--spacing_default);}
.default-padding-top {padding-top: var(--spacing_default);}
.default-padding-right {padding-right: var(--spacing_default);}
.default-padding-bottom {padding-bottom: var(--spacing_default);}
.default-padding-left {padding-left: var(--spacing_default);}

.medium-padding {padding: var(--spacing_md);}
.medium-padding-top {padding-top: var(--spacing_md);}
.medium-padding-right {padding-right: var(--spacing_md);}
.medium-padding-bottom {padding-bottom: var(--spacing_md);}
.medium-padding-left {padding-left: var(--spacing_md);}

.big-padding, .large-padding {padding: var(--spacing_lg);}
.big-padding-top, .large-padding-top {padding-top: var(--spacing_lg);}
.big-padding-right, .large-padding-right {padding-right: var(--spacing_lg);}
.big-padding-bottom, .large-padding-bottom {padding-bottom: var(--spacing_lg);}
.big-padding-left, .large-padding-left {padding-left: var(--spacing_lg);}

.small-margin-top {margin-top: var(--spacing_sm)}
.small-margin-right {margin-right: var(--spacing_sm);}
.small-margin-bottom {margin-bottom: var(--spacing_sm);}
.small-margin-left {margin-left: var(--spacing_sm);}

.medium-margin-top {margin-top: var(--spacing_md);}
.medium-margin-right {margin-right: var(--spacing_md);}
.medium-margin-bottom {margin-bottom: var(--spacing_md);}
.medium-margin-left {margin-left: var(--spacing_md);}

.default-margin-top {margin-top: var(--spacing_default);}
.default-margin-right {margin-right: var(--spacing_default);}
.default-margin-bottom {margin-bottom: var(--spacing_default);}
.default-margin-left {margin-left: var(--spacing_default);}

.big-margin-top, .large-margin-top {margin-top: var(--spacing_lg);}
.big-margin-right, .large-margin-right {margin-right: var(--spacing_lg);}
.big-margin-bottom, .large-margin-bottom {margin-bottom: var(--spacing_lg);}
.big-margin-left, .large-margin-left {margin-top: var(--spacing_lg);}

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

.spacer {width:100%; height:var(--spacing_lg);}
.spacer.large {height:var(--spacing_xl);}

/* ---------- TAGS ----------- */

.tags {
    font-size:0.8em;
    line-height: 1rem;
    font-style:italic;
    padding-left:0;
}

.tags li {
    list-style: none;
    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 ";
}

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

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

h1 {
    font-size: 2rem;
    line-height: 1em;
    margin-bottom: var(--spacing_xm);
    font-weight: 800;
    font-family: "medieval-pixel"; /* psychFont1 */
    -webkit-font-smoothing: auto;
    -moz-osx-font-smoothing: auto;
}

h2 {
    font-size: 1.2rem;
    line-height: 1.5rem;
    margin-bottom: var(--spacing_md);
    font-weight: 500;
    font-family: "Distro Bold"; /* titleFont3 */
    -webkit-font-smoothing: auto;
    -moz-osx-font-smoothing: auto;
    color:var(--f_high);
}

h2.blackletter {
    font-size: 1.5rem;
    line-height: 1.5rem;
}

h3 {
    font-size: 1rem;
    line-height: 1em;
    margin-bottom: var(--spacing_default);
    font-family: "Distro Bold"; /* titleFont3 */
    -webkit-font-smoothing: auto;
    -moz-osx-font-smoothing: auto;
}

h3.blackletter {
    font-size: 2em;
    line-height: 1em;
    margin-bottom: var(--spacing_default);
}

h4 {
    font-size: 1rem;
    line-height:1em;
    margin-bottom: var(--spacing_default);
    -webkit-font-smoothing: auto;
    -moz-osx-font-smoothing: auto;
}

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

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

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

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

.default-font {
    font-family: "Wremena";
}

.gaeilge {
    font-family:'Gaeilge';
}

.all-caps {
    text-transform: uppercase;
}

.accent {
    color: var(--f_high);
}

.green {
   color: var(--green); 
}

.low-contrast, .subdued {
    color: var(--f_low);
}

p {
    margin-top: var(--spacing_default); 
    margin-bottom: var(--spacing_default);
    display: block;
}

ul, ol {
    padding-left: var(--spacing_default);
}

hr {
    border: 0;
    height: var(--border_size);
    background-color: var(--b_med);
    margin-top: calc(var(--spacing_lg) - var(--border_size));
    margin-bottom:  var(--spacing_lg);
}

hr.dotted {
    height: 0;
    background-color: var(--b_med);
    border-bottom: var(--border_size) dotted;
    background: transparent;
}

summary h4 {
    display: inline-block;
}

blockquote {
    margin-top: var(--spacing_default);
    font-size: 1.2em;
    color: var(--f_high);
    padding-left: var(--spacing_default);
    font-family: "Distro Bold"; /* titleFont3 */
    max-width: 50ch;
    border-left: var(--border_size) dotted;
}

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

a {
    font-style:initial;
    color: inherit;
    cursor: pointer;
    font-weight: bold;
    font-size: 1em;
    border-bottom: var(--border_size) dotted var(--f_high);
}

a:hover {
    border-bottom: var(--border_size) solid;
    color: var(--f_high);
}

a strong {
    font-size: 1em;
}

.social a, .bio .left-part a {
    border-bottom:0;
}

.bio .left-part a {
    display:block;
}

a.button, .sidebar a.button {
    color: var(--f_high);
    background-color: var(--b_low);
    padding: var(--spacing_sm) var(--spacing_default);
    display:inline-block;
    border-radius: var(--border_radius);
    border:0;
    font-family: "Distro Bold";
    line-height:1rem;
    font-size:0.8rem;
}

a.button.patreon {
    display:flex;
}

a.button:hover {
    border:0;
    background-color: var(--b_med);
}

a.button-outline {
    border: var(--border_size) solid;
    padding: var(--spacing_sm) var(--spacing_default);
    border-color: var(--f_high);
    color: var(--f_high);
    display:inline-block;
    border-radius: var(--border_radius);
    line-height:1em;
    font-family: "Distro Bold";
}

a.button-outline:hover {
    border-color: var(--f_low);
    color: var(--f_low);
}

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

a.button svg {
    margin-right:var(--spacing_sm);
    height: 1.5rem;
    width: 2rem;
}

a.button svg rect,
a.button svg path,
a.button svg circle  {
    fill: var(--f_high);
}

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

button {
    border: 0;
    background: var(--b_low);
    color: var(--f_high);
    border-radius: var(--border_radius);
    padding: 0 var(--spacing_sm);
    line-height: 1.2rem;
    height:1.2rem;
    font-family: "Distro Bold"; /* titleFont3 */
    cursor:pointer;
}

.menu button .dingbats {
    padding:0;
}

.menu button .dingbats svg path {
    fill: var(--f_med);
}

button:hover {
    background-color: var(--b_med);
}

button:disabled, button:disabled:hover {
    background: var(--background);
    color: var(--f_low);
}

strong {
    font-weight: bold;
    font-size: 1em;
}

small, .lighter {
    font-size: 0.8rem;
    line-height: 1rem;
}

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

.ornament {
    opacity: 0.3;
    width: 120px;
    height: 120px;
    margin-top: var(--spacing_default);
    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: var(--border_radius);
    border: var(--border_size) solid;
    line-height: 1rem;
    font-size: 0.8rem;
}

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

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

figure {
    margin-bottom: var(--spacing_default);
}

figcaption {
    font-size: 0.8rem;
    line-height: var(--spacing_default);
    padding-top: var(--spacing_sm);
    font-style: italic;
}

img {
    max-width: 100%;
    height: auto;
    border-radius: var(--border_radius);
    overflow: hidden;
    line-height: 0;
    filter: grayscale(1);
    mix-blend-mode: multiply;
}

img:hover, .card:hover img, #home-img:hover img {
    filter: grayscale(0);
    mix-blend-mode: normal;
}

.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: var(--border_radius);
    background: var(--b_low);
    max-width: 100%;
}

.notes .image-background {
    background: var(--background);
}

.page-content img, .product-page img {
    filter: grayscale(0);
    mix-blend-mode: normal;
}

.page-content ul, .page-content ol {
    margin-bottom: var(--spacing_default);
}

.last-mod {
    font-size:0.8rem;
    line-height: 1rem;
    padding-top: var(--spacing_default);
    margin-top: var(--spacing_lg);
    border-top: var(--border_size) solid;
    border-color: var(--b_med);
    font-style:italic;
}

.last-mod strong {
    font-style:initial;
}

.last-mod span {
    display:inline-block;
    width: clamp(8rem,30vw,50%);
}

.checklist ul {
    margin-bottom: var(--spacing_default);
    list-style: none;
}

.checklist ul ul {
    list-style: none;
}

.checklist ul ul li {
    color: var(--f_low);
}

.themes {
    display:flex;
    flex-direction:row;
    justify-content: flex-start;
}

.theme {
    padding-right:var(--spacing_default);
}

.warning {
    background-color: var(--b_low);
    border-radius: var(--border_radius);
    margin-bottom: var(--spacing_default);
    margin-top: var(--spacing_default);
    padding: 0 var(--spacing_default);
    font-size: 0.8rem;
    line-height:1rem;
}

.dictionary .entry {
    break-inside: avoid-column;
    line-height: 1rem;
    font-size: 0.8rem;
}

.columns.dictionary p {
    margin-bottom:var(--spacing_default);
}

.dictionary h3 {
    font-size:0.8rem;
    display:inline;
    color: var(--f_high);
}

.toc-entry {
    display: grid;
    grid-template-columns: auto max-content;
    grid-template-areas: "chapter page";
    align-items: end;
    gap: 0 .25rem;
    color: var(--f_high);
    height: 1.5rem;
}

.chapter {
    grid-area: chapter;
    position: relative;
    overflow: hidden;
}

.chapter::after {
    position: absolute;
    padding-left: .25ch;
    content: " . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . "
        ". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . "
        ". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ";
    text-align: right;
}

.page {
    grid-area: page;
}

/* ---------- tables ----------- */

table {
    border: var(--border_size) solid;
    border-color: var(--f_med);
    color: var(--f_high);
}

th, td {
    border: var(--border_size) solid;
    border-color: var(--b_med);
    text-align:left;
}

th, td {
    padding: var(--spacing_sm) var(--spacing_sm);
    font-size:1rem;
    line-height:1rem;
}

tr:hover td {
    background-color: var(--b_med); 
}

table.simple {  
    border:0;
    width:100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size:0.8rem;
}

table.simple a, table.simple h2 {
    font-size:0.8rem;
    line-height:1rem;
    margin:0;
}

table.simple .tags, table.simple .stats {
    font-size:0.8rem;
}

table.simple td {
    padding-left:0;
}

table.simple td:first-child {
    padding-left:var(--spacing_xm);
}

table.simple th, table.simple td {
    border:0;
    border-bottom: 2px solid var(--b_med);
    padding-top: var(--spacing_xm);
    padding-bottom: calc(var(--spacing_default) - var(--border_size));
    padding-left:0;
    font-size:0.8rem;
}

table.simple tr:hover td {
    background: none;
}

/* ---------- TABLE OF CONTENT ----------- */

.table-of-contents {
    max-width: 50ch;
    padding-left: var(--spacing_default);
    border-left: var(--border_size) solid;
    margin-bottom: var(--spacing_lg);
    line-height: 1.5rem;
}

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

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

.table-of-contents.mini {
    max-width: 100%;
    columns:1;
}

.table-of-contents.mini a {
    display:inline-block;
}

.table-of-contents.mini a.active {
    color: var(--f_high); 
    border-bottom-style:solid;
}

.table-of-contents.mini, .table-of-contents.mini p  {

}

.table-of-contents.mini p {
    line-height: 1rem;
    font-size:1rem;
}

/* ---------- code ----------- */

code, pre {
    background: #000;
    color: var(--f_low);
    white-space: pre;
    max-width: 100%;
    display: block;
    font-size: 0.8rem;
    padding: var(--spacing_default);
    line-height: 1.75;
    border-radius: var(--border_radius);
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
    scrollbar-color: var(--f_low) #000;
}

/* ---------- piano ----------- */

.piano {
    height:140px;
    width:auto;
    position:relative;
    display:block;
}

.piano-wrapper {
    margin-bottom: var(--spacing_lg);
}

.piano .key {
    float:left;
    width:32px;
    height:100%;
    border-top: var(--border_size) solid;
    border-left: var(--border_size) solid;
    border-bottom: var(--border_size) solid;
    border-color: var(--background);
    text-align:center;
    color: var(--f_med);
    text-transform: uppercase;
    font-family: "Distro Bold";
    font-size:0.8em;
    cursor: pointer;
}

.piano .key.white {
    background: var(--f_med);
    z-index:1;
    padding-top:100px;
}

.piano .key.black {
    position:relative;
    height:60%;
    width:16px;
    margin-left:-8px; 
    background: var(--background);
    z-index:10;
    border-right: var(--border_size) solid;
    border-color: var(--background);
}

.a,.g,.d,.e,.b {
    margin:0 0 0 -9px;
}

.piano .key:first-child {
    margin-left:0;
}

.piano .key:last-child {
    border-right: var(--border_size) solid var(--background);
}

.piano .key.white.active {
    background: var(--f_high);
    border-color: var(--background);
    color: var(--background);
}

.piano .key.black.active {
    background: var(--f_high);
    border-color: var(--background);
}

.piano .key.white:hover {
    background: var(--f_low);
    border-color: var(--background);
    color: var(--background);
}

.piano .key.black:hover {
    background: var(--b_med);
    border-color: var(--background);
}

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

form {
    max-width:50ch;
    margin-bottom:var(--spacing_lg);
}

fieldset {
    padding:var(--spacing_default);
    border: var(--border_size) dotted var(--f_med);
    border-radius: var(--border_radius);
    margin-bottom:var(--spacing_default);
}

fieldset p {
    margin-top:0;
}

legend {
    line-height: 1rem;
    font-family: "Distro Bold";
}

label {
    display:block;
    font-size:0.8rem;
    line-height: 1rem;
    padding-bottom: 0.5rem;
    color:var(--f_med);
}

label.checkbox {
    display:inline-block;
}

textarea {
    height: 8rem;
}

input, select, textarea {
    border-radius: var(--border_radius);
    padding: var(--spacing_sm);
    width:100%;
    border: var(--border_size) solid var(--f_med);
    font-size:0.8rem;
    font-family: "Wremena";
    font-weight: 400;
    background: var(--background);
}

input[type=checkbox] {
    width:auto;
    margin-right:var(--spacing_sm);
}

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

.menu {
    position: relative;
    margin-bottom: var(--spacing_lg);
}

.menu ul {
    display:none;
    list-style: none;
    gap: var(--spacing_sm);
    line-height: 1.5rem;
    padding: 0;
    margin: 0;
    margin-top:var(--spacing_default);
}

.menu ul li {
    line-height: 1.5rem;
    text-align: right;
}

.menu a {
    font-size:0.8rem;
    position: relative;
    font-family: "Distro Bold"; /* titleFont3 */
    display: inline-block;
    border-bottom-style: none;
    line-height: 1.5rem;
}

.menu a.accent {
    border-bottom: 2px solid;
}

.menu .dingbats {
    position: relative;
}

.theme-mode-toggle {
    width: 48px;
    display: inline;
    position: relative;
    top: 3.5px;
}

.theme-mode-toggle button {
    width: 48px;
}

.phases {
    display:none;
}

.snipcart-checkout {
    line-height: 1.5rem;
    margin-left:auto;
    position:absolute!important;
    top:0;
    right:0;
}

#mode-switcher .moon {
    display:block;
}

#mode-switcher .sun {
    display:none;
}

#mode-switcher.dark .moon {
    display:none;
}

#mode-switcher.dark .sun {
    display:block;
}

.theme-mode-toggle {
    display: inline-block;
}

/* ---------- DINGBATS ----------- */

.dingbats {
    position: relative;
}

.dingbats path {
    fill: var(--f_high);
}

.title .dingbats {
    margin-top: -36px;
    position: absolute;
}

.menu .dingbat-wrapper {
    display:none;
}

.menu .dingbats svg path {
    fill: var(--f_low);
}

.menu .dingbats svg {
    height:0.8rem;
}

table.simple .dingbats {
    margin-left:-40px;
}

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

#home-img {
    height:auto;
    width:100%;
    overflow: hidden;
    border-radius: var(--border_radius);
    position:relative;
}

#home-img img {
    object-fit: cover;
    width:100%;
    height:15rem;
    object-position: center;
}

#folklore-img {
    mask-image: url(/img/folklore-outline.gif);
    -webkit-mask-image: url(/img/folklore-outline.gif);
    height:250px;
    width:100%;
    margin-top: var(--spacing_default);
    position: absolute;
    top: 0px;
    left: var(--spacing_md);
    background: var(--background);
    mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    display:none;
}

.image-link {
    position: static;
    bottom:var(--spacing_md);
    left:var(--spacing_md);
    display:inline-block;
    font-size: 1rem;
    border:0;
    padding: 0 var(--spacing_sm);
    border-radius: var(--border_radius);
}

.image-link:hover {
    border:0;
}

.category-section h2 {
    padding-bottom: calc(var(--spacing_default) - var(--border_size));
    border-bottom: var(--border_size) dotted;
    font-size: 1rem;
    margin:0;
}

.banner {
    position:relative;
    display: block;
    border:0;
    padding:var(--spacing_md) var(--spacing_md);
    background-color: var(--b_low);
    border-radius: var(--border_radius);
    background-size: 100%;
    background-position: right 0% bottom 74%;
    background-repeat: no-repeat;
    background-blend-mode: darken;
}

.banner.pious-rot {
    background-color: #f0e0d0;
    background-image: url('/img/home/pious-rot-cover-drawing.jpg')!important;
    background-position: right 0% top 7rem;
}

.banner h2 {
    margin-bottom: 1rem;
}

.banner:hover {
    border:0;
    background-color: var(--b_med);
}

.banner.pious-rot:hover {
    background-color: #dcc4ab;
}

.banner .content {
    min-height:12rem;
}

.banner.pious-rot .content {
    min-height:25rem;
}

.banner p {
    font-family: "Wremena";
    font-weight: 400;
    margin-top:var(--spacing_sm);
}

.shop-banner-img {
    mask-image: url(/img/shop.gif);
    -webkit-mask-image: url(/img/shop.gif);
    background-color: var(--f_high);
    mask-position:left bottom;
    -webkit-mask-position:left bottom;
    mask-size:contain;
    -webkit-mask-size:contain;
    mask-repeat:no-repeat;
    -webkit-mask-repeat:no-repeat;
    height:calc(100% - 44px);
    width:calc(100% - 44px);
    position:absolute;
    left:var(--spacing_default);
    top:var(--spacing_default);
}

.icon {
    background: var(--f_med);
    mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    width: 100%;
    height: 250px;
    display:none;
}

#icon-stamp {
    mask-image: url(/img/sigil-stamp.gif);
    -webkit-mask-image: url(/img/sigil-stamp.gif);
    background-color: var(--f_high);
    display: block;
    margin-top:0;
}

.bio {
    max-width: 50ch;
    margin: 0 auto;
}

.bio .name {
    max-width:235px;
}

.name {
    display:flex;
    height:5rem;
}

.name .sigil-stamp {
    max-width:50px;
    min-width:50px;
    margin-right: var(--spacing_default);
    max-height:100px;
}

.name h4 {
    margin:0;
    font-size: 1rem;
    line-height: var(--spacing_default);
}

.aka {
    margin-top:var(--spacing_sm);
    border-top: var(--border_size) solid;
    padding-top:var(--spacing_sm);
    font-size:0.8rem;
    margin-bottom:0;
    line-height:1rem;
}

.social {
    line-height: 1rem;
}

.social svg {
    height: var(--spacing_default);
    padding: 0 var(--spacing_sm) 0 0;
    fill: var(--f_med);
}

.social svg:hover {
    fill: var(--f_high);
}

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

.card {
    margin-bottom: var(--spacing_default);
    display: block;
    page-break-inside: avoid;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    border-color:transparent;
}

.card h3 {
    font-size: 1.5rem;
    line-height: 1.5rem;
    padding-bottom: var(--spacing_sm);
    margin: 0;
}

.card .desc {
    font-weight: normal;
    font-size: 0.8rem;
    line-height: 1rem;
}

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

.card:hover .image-background {
    background: var(--f_low);
}

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

.notes {
    padding: var(--spacing_default);
    border-radius: var(--border_radius);
    background: var(--b_med);
    color: var(--f_high);
    border:0;
    min-height: 8rem;
}

.notes:hover {
    color: var(--f_inv);
    background: var(--b_high);
    border:0;
}

.notes .picture {
    margin-bottom:var(--spacing_default);
}

.notes h3 {
    font-family: "Basteleur"; /* psychFont1 */
    font-weight: 300;
    padding: 0;
    word-break: break-word;
}

.notes h3:before {
    content: "NOTE";
    font-family: "Wremena"; /* mainFont */
    letter-spacing: 2px;
    font-weight: bold;
    font-size: 0.8rem;
    line-height: 1rem;
    display: block;
    padding-bottom: var(--spacing_sm);
}

.notes .desc {
    margin-top: var(--spacing_default);
    padding-bottom:0;
}

.note-card .desc {
    max-height:6rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

.works .project-card h3, .works .project-card .desc {
    display:none;
}

.works .recipe-card h3, .works .notes h3, .works .notes .desc {
    display:block;
}

/* ---------- VIDEOS ------------- */

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

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

.folklore-card.notes h3:before {
    content: "FOLK NOTE";
}

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

h2.date {
    font-size:0.8rem;
    line-height:1rem;
    margin-bottom:var(--spacing_sm);
}

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

.recipe-card.notes h3:before {
    content: "COOKING NOTE";
}

.recipe-card .specs {
    margin-top:0;
    margin-top:0;
}

.specs {
    margin-top: var(--spacing_default);
    margin-bottom: 0;
    font-size: 0.8rem;
    line-height: 1rem;
}

.ingredients ul {
    margin: 0;
    padding-left: var(--spacing_default);
    line-height: 1rem;
}

.ingredients ul li {
    margin-top: 0;
    margin-right: 0;
    margin-left: 0;
    margin-bottom: var(--spacing_sm);
}

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

.steps ol li {
    margin-top: 0;
    margin-right: 0;
    margin-bottom: var(--spacing_default);
    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: 4px; /* border_radius */
    border-radius: 4px; /* border_radius */
    overflow: hidden;
    line-height: 0;
}

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

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

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

.craft-card.notes h3:before {
    content: "CRAFT NOTE";
}

.shop-link {
    border: var(--border_size) solid;
    padding-top: 14px;
    padding-right: 24px; /* spacing_lg */
    padding-bottom: 10px;
    padding-left: 24px; /* spacing_lg */
    border-radius: 4px; /* border_radius */
    margin-top: 24px; /* spacing_lg */
}

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

.flash {
    display:inline-block;
    position:relative;
    line-height:0;
    background: var(--b_low);
    min-width:calc(25% - 1rem);
    border-radius: var(--border_radius);
    text-align: center;
}

.flash .number {
    position: absolute;
    left:1rem;
    top:1rem;
    color:var(--f_high);
    line-height:1rem;
}

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

.flash.taken img {
    opacity:0.3;
}

/* --------- PORTFOLIO ----------- */


.portfolio-card img, .portfolio img {
    filter:none;
    mix-blend-mode: normal;
}

.portfolio-card .title, .portfolio .back-link {
    color:var(--f_high);
    opacity:0.5;
    font-size:14px;
    transition:0.2s;
}

.portfolio .header-section {
    border-bottom:1px solid var(--f_high);
    margin-bottom:var(--spacing_md);
}

.portfolio-card .title:hover {
    opacity:1;
}

.portfolio-card .picture {
    margin-top:var(--spacing_default);
}

.portfolio-card small {
    color: var(--f_high);
}

.portfolio-card .picture:first-child {
    margin-top:0;
}

.portfolio h1 {
    font-size:24px;
    text-align:left;
}

.bio-portfolio {
    max-width:100%;
    color: var(--f_high);
}

.bio-portfolio .name .icon {
    min-width:30px;
    max-width:30px;
    margin-right:var(--spacing_sm);
}

.portfolio-note {
    background: var(--green);
    color: var(--b_low);
    padding: var(--spacing_md);
    border-radius: 4px;
}

.portfolio-note a {
     color: var(--b_low);
}

.portfolio-note .stat {
    background-color:var(--b_low);
    color:var(--f_high);
}

.portfolio .big {
    font-size:60px;
    line-height:60px;
    color: var(--f_high);
    opacity:0.5;
    transition:0.2s;
    font-family: "Wremena"; /* mainFont */
}

.portfolio .big:hover {
    opacity:1;
}

.portfolio .big a {
    font-weight: normal;
}

/* --------- media ----------- */

.media-card {
    display:block!important;
}

.media-card h3:before {
    content: "MEDIA PAGE";
    font-family: "Wremena"; /* mainFont */
    letter-spacing: 2px;
    font-weight: bold;
    font-size: 0.8rem;
    line-height: 1rem;
    display: block;
    padding-bottom: var(--spacing_sm);
}

.media-card h3 {
    margin-top:0;
}

.media-card .desc {
    margin-top: var(--spacing_default);
    padding-bottom:0;
}

.media {
    padding: var(--spacing_default);
    background-color: var(--b_low);
    border-radius:var(--border_radius);
    margin-bottom: var(--spacing_default);
    display:flex;
    flex-direction: row;
}

.media .image {
    max-width:150px;
    margin-right:var(--spacing_sm);
    line-height:0;
}

.media h3 {
    margin:0;
    margin-bottom:var(--spacing_default);
}

.media .details {
    display: flex;
    flex-direction: column;
}

.media .author {
    flex:4;
    color: var(--f_low);
    line-height:1rem;
    margin-bottom: var(--spacing_sm);
}

.media .rating {
    color: var(--f_low);
    font-size:2rem;
    line-height: 1rem;
}

.media .note {
    margin-top:var(--spacing_default);
    font-size:0.8rem;
    line-height:1rem;
}

.to-read-infos {
    display:none;
}

.to-read:hover .to-read-infos {
    display:block;
}

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

/* -------- SHOP ---------*/

.product-card img, .product-page img {
    mix-blend-mode: normal;
    filter: grayscale(0);
}

.product-card img {
    box-shadow: 1px 1px 6px #00000020;
}

.product-page button {
    padding: var(--spacing_sm) var(--spacing_default);
    font-size: 0.8rem;
    height:auto;
}

.product p {
    margin-top: 0;
}

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

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

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

.product-link a.button {
    display:inline-block;
}

.product-link .image a {
    border:0;
}

.product-page h1 {
    font-size:2rem;
}

.snipcart button {
    height:auto;
}

.snipcart-button-link {
    border-radius: 0px;
}

.snipcart-item-quantity__quantity {
    border-radius: 4px;
}

.snipcart-item-line--cart-edit {
    border-bottom: 2px solid var(--b_med)!important;
}

.snipcart-item-quantity__quantity {
    border: 2px solid var(--b_med)!important;
}

.snipcart {
    font-family: var(--main_font)!important;
}

.snipcart__font--subtitle-small, .snipcart__font--tiny {
    font-size:14px!important;
}

.snipcart-form__separator, 
.snipcart-cart-summary__separator {
    border-top: 2px solid var(--b_med)!important;
}

.snipcart-input, .snipcart-form__select {
    border-radius:4px!important;
    border: 1px solid!important;
}

.snipcart-form {
    box-shadow: none!important;
}

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

.single-page h1 {
    margin-top: 0;
    margin-bottom: 0;
}

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

.stat {
    display: inline-block;
    margin-right: var(--spacing_sm);
    padding-left: var(--spacing_sm);
    padding-right: var(--spacing_sm);
    border-radius: 4px; /* border_radius */
    background: var(--b_med);
    color: var(--f_inv);
    font-size: 0.6rem;
    font-weight: bold;
    font-family: "Distro Bold";
    line-height: 1rem;
}

.stat.accent {
    background: var(--f_high);
    color: var(--background);
}

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

.treelist {
    overflow: hidden;
}

.treelist .treelist {
    overflow: visible;
}

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

.tree ul {
    list-style: none;
    padding-left:0;
}

.tree ul ul {
}

.tree ul li {
    position:relative;
    padding-left: var(--spacing_xl);
}

.treelist .stat {
    margin-left:var(--spacing_default);
}

/* -------- SIDEBAR ---------*/

aside {
    font-size: 0.8rem;
    line-height: var(--spacing_default);
    min-width:200px;
    padding-top:var(--spacing_lg);
}

aside .name {
    display:none;
}

aside ul {
    list-style: none;
    padding:0;
}

aside li {
    min-height:1.5rem;
}

aside a {
    font-family: "Distro Bold";
    font-size: 1em;
    line-height:1.3rem;
    border-bottom-style: none;
    vertical-align: baseline;
}

aside a:hover {
    border:0;
}

aside .back-home {
    border-bottom: var(--border_size) dotted var(--f_high);
    display:inline-block;
    margin-bottom: var(--spacing_default);
    line-height:1rem;
}

aside .back-home:hover {
    border-bottom: var(--border_size) solid var(--f_high);
}

aside h3 {
    font-size:0.8rem;
    line-height:1.5rem;
    padding-bottom: calc(var(--spacing_sm) - var(--border_size));
    border-bottom: var(--border_size) dotted;
    border-color: var(--b_med);
}

aside .bottom-icon {
    margin: 0 var(--spacing_default);
    width: auto;
    background-color: var(--f_high);
}

.list-page .icon,
.single-page .icon {
    margin-top: var(--spacing_md);
}

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

/* -------- DUNGEON --------- */

.dungeon-main {
    height:100vh;
}

.dungeon .illustration {
    width:100%;
    height: calc(100vh - 250px);
    mask-image: url(/img/dungeon/inn.gif);
    -webkit-mask-image: url(/img/dungeon/inn.gif);
    mask-size:contain;
    mask-repeat: no-repeat;
    mask-position:center;
    background-color: #3b1c16;
    background-color: var(--f_high);
}

.text-box-wrapper {
    position:absolute;
    bottom:60px;
    left:0;
    right:0;
}

.text-box {
    border:5px double;
    padding:24px;
    max-width:800px;
    margin:-24px auto 0 auto;
    font-size:18px;
    line-height:24px;
}

.text-box p {
    margin:0 0 16px 0;
    font-size:24px;
    line-height:28px;
    font-family: "Wittenberger";
}

.text-box ul {
    padding:0;
    list-style:none;
    margin-bottom:0;
    display: flex;
}

.text-box ul li {
    margin-right:24px;
}

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

footer {
    font-weight: bold;
    font-size: 0.8rem;
    display:flex;
    flex-direction: column;
    margin-top: var(--spacing_md);
}

footer span {
    padding-right: var(--spacing_default);
}

footer ul {
    list-style: none;
    padding:0;
}

.subfooter {
    border-top: solid 2px;
    border-bottom: solid 2px;
    padding:var(--spacing_sm) 0;
    width:100%;
}

.webring {
    margin-right: var(--spacing_default);
    border-bottom-style: none;
}

.webring svg {
    stroke: var(--f_high);
    width: 1.5rem;
    height: auto;
}

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

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

    .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;
        overflow: hidden;
    }

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

    .two-thirds {
        max-width:66%;
    }

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

/* -------- THEME MODES --------- */

.dark .image-background {
    background: var(--b_low);
}

/* -------- DESKTOP --------- */

@media screen and (min-width: 600px) {
    html {
        font-size:22px;
    }
    .grid-2 {
        grid-template-columns: repeat(2, 1fr);
    }
    .grid-3 {
        grid-template-columns: repeat(3, 1fr);
    }
    .grid-4 {
        grid-template-columns: repeat(4, 1fr);
    }
    .grid-5 {
        grid-template-columns: repeat(5, 1fr);
    }
    .grid-6 {
        grid-template-columns: repeat(6, 1fr);
    }
    .recipe-grid {
        display:grid;
    }
    .list-page {
        display:grid;
    }
    .grid-1-2 {
        grid-template-columns: 1fr 2fr;
    }
    .grid-2-1 {
        grid-template-columns: 2fr 1fr;
    }
    .columns {
        column-count: 3;
    }
    .list-page, .single-page, .page-sidebar {
        display:grid;
        grid-gap: 5vw;
        grid-template-columns: 200px 1fr;
    }
    .row {
        flex-direction: row;
    }
    .bio {
        display:grid;
    }
    aside {
        display:block;
        padding-top:0;
    }
    aside .name {
        display:flex;
    }
    .menu {
        display:flex;
        margin-bottom:0;
    }
    .menu ul {
        display:flex;
        gap: var(--spacing_default);
        margin-top:0;
    }
    .menu .buttons {
        margin-right: var(--spacing_default);
    }
    .menu a {
        line-height: 1rem;
    }
    .menu .dingbats {
        padding: 0 var(--spacing_default);
    }
    .menu .dingbat-wrapper {
        display:block;
    }
    .home .menu .theme-mode-toggle .dingbats {
        top:0;
    }
    .snipcart-checkout {
        position:relative!important;
    }
    .notes-grid {
        columns: 2;
        column-gap: var(--spacing_default);
    }
    .gallery-grid {
        columns: 3;
        column-gap: var(--spacing_default);
    }
    .gallery-grid.rows {
        display:grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: var(--spacing_default);
    }
    .gallery-grid .bigger {
        grid-column: span 2;
    }
    .gallery-grid .biggest {
        grid-column: span 3;
    }
    .gallery-grid.highlight-first .card:first-child {
        column-span: all;
    }
    .table-of-contents {
        columns:2;
    }
    h1 {
        font-size:4rem;
        margin-bottom: var(--spacing_md);
    }
    h2 {
        font-size:2rem;
        line-height: 2rem;
        margin-bottom: var(--spacing_xm);
    }
    footer {
        flex-direction: row;
        padding:0 calc(200px + 5vw);
    }
    footer .dingbats {
        display:block;
    }
    footer span {
        padding-right:0;
    }
    .phases {
        display:block;
    }
    .sidebar .icon {
        display:block;
    }
    .desktop {  
        display:block;
    }
    .mobile {
        display:none;
    }
    main, footer {
        padding-top: var(--spacing_lg);
    }
    #home-img {
        height: 24rem;
    }
    #home-img img {
        height:100%;
    }
    .image-link {
        position: absolute;
    }
    .flow > * + * {
        margin-top: var(--spacing_lg);
    }
    .table-of-contents.mini p {
        line-height: 1rem;
    }
    .table-of-contents.mini a {
        margin-right: var(--spacing_default);
        position: relative;
    }
    .table-of-contents.mini a:after {
        content: "•";
        position: absolute;
        right: -0.8rem;
    }
    .table-of-contents.mini a:last-child:after {
        content: "";
    }
    .banner, .banner.pious-rot {
        background-size: 75%;
        background-position: right -25% bottom 45%;
    }
    .banner.pious-rot .content {
        min-height:12rem;
    }
    #folklore-img {
        display:block;
    }
}

/* -------- HUGE DESKTOP --------- */

@media screen and (min-width: 1800px) {
    html {
        font-size:28px;
    }
    body {
        padding: 0 10vw;
    }
    .grid-2, .grid-3, .grid-4, .grid-5, .grid-6, .grid-1-2, .grid-2-1 {
        grid-gap: var(--spacing_xm);
    }
    .gallery-grid, .notes-grid {
        columns:4;
        column-gap: var(--spacing_xm);
    }
    .category-wrapper .grid-2, .releases .grid-2 {
        grid-template-columns: repeat(3, 1fr);
    }
    .card {
        margin-bottom:var(--spacing_xm);
    }
    aside {
        min-width:300px;
    }
    .support a.button {
        max-width:300px;
    }
    #home-img {
        height:35rem;
    }
    .notes {
        min-height:11rem;
    }
    .page-content {
        max-width: 1400px;
    }
    .card img, .page-content img {
        width:100%;
    }
    .page-sidebar, .list-page, .single-page {
        grid-template-columns: 300px 1fr;
        grid-gap: var(--spacing_xm);
    }

}