/* FONTS */
/* ----------------------------------------------------- */

/* Arial */
@font-face {
    font-family: 'Arial';
    src: url('arial.eot');
    src: url('arial.eot?#iefix') format('embedded-opentype'),
         url('arial.woff2') format('woff2'),
         url('arial.woff') format('woff'),
         url('arial.ttf') format('truetype'),
         url('arial.svg#arialregular') format('svg');
    font-weight: normal;
    font-style: normal;
}


/* CSS RESETS */
/* ----------------------------------------------------- */

*   {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
html    {
    margin: 0;
    padding: 0;
}
body    {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden;
}
img, video {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    object-fit: contain;
}
h1, h2, h3, h4, h5, ul, ol, p, span {
    margin: 0;
    padding: 0;
    font-weight: normal;
    font-style: normal;
    font-size: 1rem;
    list-style: none;
}
table {
    table-layout: fixed;
    border-collapse: collapse;
}
button {
    font-family: sans-serif;
    cursor: pointer;
    background-color: transparent;
    border: 0;
    padding: 0;
}
details > summary {
    list-style: none;
}
details > summary::-webkit-details-marker {
    display: none;
}

/* CSS VARIABLES (CUSTOM PROPERTIES) */
/* ----------------------------------------------------- */

:root {
    --bgCol: black;
    --textCol: rgb(134, 134, 134);
    --hovCol: rgb(70, 70, 70);

    --high1: lightgray;
    --high2: white;

    --col1: rgb(75, 140, 220);
    --altGray: rgb(105,105,105, 0.6);

    --bodyPad: 5px;
    --smWidth: 100%;

    --selCol: black;
    --selBg: rgba(210, 210, 210, 0.8);
}
html.light body {
    --bgCol: rgb(252,252,252);
    --textCol: rgb(131, 131, 131);
    --hovCol: lightgrey;

    --high1: black;
    --high2: dimgray;

    /* --col1: blue; */
    --col1: rgb(0, 90, 255);
    --col1Inverse: rgb(255,165,0)
}

/* OVERALL & QUICK LOADS (TEXT ) */
/* ----------------------------------------------------- */

html, button {
    font-family: 'Arial', Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-size: 20px;
    line-height: 1.25;
    letter-spacing: -0.01em;
    scroll-behavior: smooth;
    -webkit-tap-highlight-color: transparent !important;
}
#search {
    --pagefind-ui-font: 'Arial', Arial, Helvetica, sans-serif;
}

button {
    color: var(--high1);
    color: var(--textCol);
}
button:focus-visible {
    outline: 0;
}

strong, .strong {
    color: var(--high1);
    font-weight: normal;
}

body {
    background-color: var(--bgCol);
    color: var(--textCol);
    max-width: 100vw;
}
#bodyCol {
    min-height: 100vh;
    padding: 0 var(--bodyPad);
    display: flex;
    flex-direction: column;
    transition: opacity 0.1s ease;
}
br.spacer {
    user-select: none;
}

/* TEXT SIZES */
/* ------------------ */
html:has(.fontsize-xs) {
    font-size: 0.9rem;
    line-height: 1.35;
}
html:has(.fontsize-s) {
    font-size: 1.05rem;
    line-height: 1.3;
}
html:has(.fontsize-m) {
    font-size: 1.25rem;
    line-height: 1.3;
}
html:has(.fontsize-l) {
    font-size: 1.45rem;
    line-height: 1.2;
}
html:has(.fontsize-xl) {
    font-size: 1.6rem;
    line-height: 1.15;
}

/* secondary font-size on larger textsize ops */
html:has(.fontsize-l) .sm,
html:has(.fontsize-xl) .sm {
    /* font-size: 0.75em; */
}


/* SITE HEADER: NAMETEXT & VIEW OPS */
/* ----------------------------------------------------- */

#siteheader {
    max-width: calc(21/24 * 100%);
    mix-blend-mode: difference;
}
#siteheader a {
    color: dimgray;
}
.nameText {
    position: relative;
    left: -5px;
    padding: 0 5px;
    padding-right: 2px;
    background-color: transparent;
    transition: background-color 0.2s ease;
}

.nameText:hover,
.nameText:focus-visible,
#qrBG .nameText:hover,
#qrBG .nameText:focus-visible {
    background-color: var(--high2);
    transition: background-color 0.2s ease;
    outline: 0;
}
html.light .nameText:hover,
html.light .nameText:focus-visible,
html.light #qrBG .nameText:hover,
html.light #qrBG .nameText:focus-visible {
    background-color: var(--bgCol);
    outline: 0;
}

/* MAIN */
/* ----------------------------------------------------- */

#main {
    flex-grow: 1;
    margin-bottom: 2.8rem !important;
}

/* #main > div > br:first-of-type {
    display: none;
} */
main.single {
    display: flex;
    flex-direction: column;
}
.linkarrow {
    position: relative;
    bottom: 0.05em;
    left: -1.11em;
    user-select: none;
}
#sitemap .linkarrow {
    left: -1em;
}

.siteSections .linkarrow svg,
#sitemap .linkarrow svg {
    position: absolute;
    width: 0.93em;

    bottom: 0.3em;
    margin-left: 0.4em;
    padding-right: 0.3em;
    fill: var(--high1);
    transition: fill 0.2s ease;
}
#sitemap .linkarrow svg {
    fill: var(--textCol);
}


.siteSections a:hover .linkarrow svg {
    fill: var(--hovCol);
    transition: fill 0.2s ease;
}
.siteSections:has(.indexBtnOpened) .linkarrow svg {
    fill: var(--textCol);
    transition: fill 0.2s ease;
}
#sitemap a:hover .linkarrow svg {
    fill: var(--hovCol);
    transition: fill 0.2s ease;
}

#featuredGrid.hidden {
    display: none;
}

/* GENERAL TEXT STYLING */
/* ------------------ */

hr {
    border: none;
    margin: 0;
    position: relative;
    top: 0.2rem;
}
hr::before {
    content: '*';
    display: block;
}
ol {
    list-style: decimal;
    padding-left: clamp(1rem, 4.2%, 4.2%);
    padding-left: clamp(1.65rem, 8%, 5%);
    padding-left: 2.4rem;

}
.ol {
    list-style: none;
}
.ol li {
    margin-left: 2.4em;
    text-indent: -1.05em;
}

ul li::before{
    content: "—";
    content: "\00A0~ ";
}
ul li {
    padding-left: 1.1em;
    text-indent: -1.1em;
}
main sup {
    line-height: 0;
    position: ;
}
main p + p {
    text-indent: clamp(1rem, 4.2%, 4.2%);
}
.cite {
    position: relative;
    bottom: 0.5em;
    font-size: 0.675em;
    left: -0.2em;
    padding-left: 0.1rem;
    cursor: pointer;
    color: var(--high1);
    transition: color 0.2s ease-in;
}
.cite:hover,
.cite:focus-visible,
.cite.highlighted:hover,
.cite.highlighted:focus-visible {
    color:var(--col1);
    transition: color 0.2s ease;
    outline: 0;    
}
.cite.highlighted,
.highlighted span {
    background-color: var(--selBg);
    color: var(--selCol);
    transition: color 0.2s ease, background-color 0.2s ease;
}

.inactive {
    cursor: not-allowed;
    opacity: 0.4;
    user-select: none;
}
.text-xs {
    font-size: 0.575rem;
}
.toCite {
    cursor: pointer;
    transition: color 0.2s ease;
    /* text-decoration: underline; */
    padding-right: 0.2rem;
    /* scroll-margin-top: 1rem; */
}
.toCite:hover,
.toCite:focus-visible {
    color: var(--col1);
    transition: color 0.2s ease;
    outline: 0;    
}
span.anchor, span.cite {
    /* display: inline-block;
    scroll-margin-top: 1rem; */
}
span.anchor {
    /* line-height: 0; */
}


/* MAIN IMAGE CLASS STYLES */
/* ------------------ */
.txtImg img,
.txtImg svg {
    border: 1px solid var(--altGray);
    /* width: 100%; */
    display: block;
    /* margin-top: 1.3rem; */
}
.txtImg > div:has(video) {
    border: 1px solid var(--altGray);
}
.txtImg button svg {
    border: 0;
}
.txtImg + .txtImg {
    /* margin-top: 0; */
}

.border-none img {
    border: 0 !important;
}
img.dark-invert {
    filter: invert(1);
}
html.light img.dark-invert {
    filter: invert(0);
}
html.light img.multiply {
    mix-blend-mode: multiply;
}

/* media query dev and below xwide*/
#pageHeader {
    color: var(--high1);
    /* position: sticky;
    top: 0; */
}
.fontsize-xs #pageHeader {
    margin-top: 2.95rem;
}
.fontsize-s #pageHeader {
    margin-top: 2.8rem;
}
.fontsize-m #pageHeader {
    margin-top: 2.7rem;
}
.fontsize-l #pageHeader {
    margin-top: 2.4rem;
}
.fontsize-xl #pageHeader {
    margin-top: 2.3rem;
}


#viewOps > div, #viewOps br {
    display: none;
}
/* #main > div:first-of-type > br:nth-of-type(2) {
    display: none;
} */


/* TEXT OPS */
/* ------------------ */
#viewOps {
    user-select: none;
}
#viewOps > #textOps {
    display: flex;
}

#viewOps button {
    /* background-color: aliceblue; */
    font-size: 1rem;
    padding: 0.25rem;
    
}
#viewOps .buttonWrap {
    /* background-color: var(--altGray); */
    border-radius: 50%;
    width: 0.9rem;
    height: 0.9rem;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.2s ease;
}
#viewOps button svg {
    width: 0.6rem;
    transition: fill 0.2s ease-in;
}
#viewOps .buttonWrap:first-of-type {
    margin-right: -0.2rem;
}
#viewOps .buttonWrap:last-of-type {
    margin-left: -0.25rem;
}
#viewOps svg {
    width: 1rem;
    fill: var(--textCol);
}

/* hoverstyles */
#textOps button:hover .buttonWrap svg,
#textOps button:focus-visible .buttonWrap svg,
#widthOps button:hover .buttonWrap svg,
#widthOps button:focus-visible .buttonWrap svg,
#textOps:has(button:hover) > svg,
#textOps:has(button:focus-visible) > svg,
#widthOps:has(button:hover) > svg,
#widthOps:has(button:focus-visible) > svg {
    fill: var(--col1);
    transition: fill 0.2s ease;
}
html.light #textOps button:hover .buttonWrap svg,
html.light #textOps button:focus-visible .buttonWrap svg,
html.light #widthOps button:hover .buttonWrap svg,
html.light #widthOps button:focus-visible .buttonWrap svg,
html.light #textOps:has(button:hover) > svg,
html.light #textOps:has(button:focus-visible) > svg,
html.light #widthOps:has(button:hover) > svg,
html.light #widthOps:has(button:focus-visible) > svg {
    fill: var(--col1Inverse);
}

#textOps > svg,
#widthOps > svg {
    transition: fill 0.2s ease;
}


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

/* see all button, featured buttons */
#featBtn span, #seeAllBtn span {
    border-radius: 0;
    padding-left: 0.6em;
    padding-right: 0.45em;
}
#featBtn, #seeAllBtn {
    position: relative;
    bottom: 0.1em;
}
.indexOpened {
    display: grid !important;
}
.seeAll #featuredGrid {
    display: none;
}
.seeAll #seeAllFilters {
    display: block !important;
}
.seeAll #allGrid {
    display: grid !important;
}
.seeAll #featTxt,
.seeAll #seeAllBtn {
    display: none;
}
.seeAll #ssTags, .seeAll #featBtn {
    display: block !important;
}

#featured.openedIndex #allGrid,
#featured.openedIndex #featuredGrid,
#featured.openedIndex #seeAllFilters,
#featured.openedIndex .toggleFeat {
    display: none !important;
}

/* site sections */
.siteSections span.comma {
    display: inline-block;
    user-select: none;
}
.siteSections span.comma:last-of-type {
    display: none;
}
.siteSections a {
    /* text-decoration-color: var(--high1); */
}
.siteSections {
    /* user-select: none; */
}
.siteSections .ssfiledUnder a:hover,
.siteSections .ssfiledUnder a:focus-visible {
    background-color: transparent;
    color: var(--col1);
    text-decoration-color: var(--col1);
}
.siteSections:has(.indexBtnOpened) button a,
.siteSections:has(.indexBtnOpened) a {
    color: var(--textCol);
    text-decoration-color: var(--textCol);
    transition: color 0.2s ease, text-decoration-color 0.2s ease, background-color 0.2s ease;
}
.siteSections:has(.indexBtnOpened) button:hover a,
.siteSections:has(.indexBtnOpened) button:focus-visible a {
    color: var(--col1);
    text-decoration-color: var(--col1);
    transition: color 0.2s ease, text-decoration-color 0.2s ease, background-color 0.2s ease;
}
/* direct outline (shop) */
.siteSections:has(.indexBtnOpened) a:hover,
.siteSections:has(.indexBtnOpened) a:focus-visible {
    color: var(--hovCol);
    text-decoration-color: var(--hovCol);
    transition: color 0.2s ease, text-decoration-color 0.2s ease, background-color 0.2s ease;
}
.siteSections:has(.indexBtnOpened) .indexBtnOpened {
    /* opacity: 1;; */
}
.siteSections:has(.indexBtnOpened) .indexBtnOpened a {
    /* color: var(--col1); */
    color: var(--high1);
    text-decoration-color: var(--high1);
    /* text-decoration-color: var(--col1); */
}

/* the x mark when selecting a filter */
.ssfiledUnder a::after {
    content: "\00A0 \2715";
    line-height: 0;
    width: 0;
    display: inline-block;
    overflow: hidden;
    position: relative;
    /* left: 0.1rem; */
    font-size: 0.9rem;
    transition: padding 0.2s ease;
    text-decoration: underline;
    text-decoration-thickness: 1px;
}
.indexBtnOpened a::after {
    /* padding-left: 0.1rem; */
    padding-right: 0.2rem;
    width: auto;
    overflow: visible;
    transition: padding 0.2s ease;
}
/* .fontsize-m .ssfiledUnder a::after,
.fontsize-l .ssfiledUnder a::after,
.fontsize-xl .ssfiledUnder a::after {
    padding-right: 0.1rem;
} */

.filter .postTag {
    /* margin-right: 0.2rem; */
}
.filterClicked .postTag {
    color: var(--high1);
}

.siteSections button .postTag {
    color: var(--high1);
}



/* SITENAV */
/* ----------------------------------------------------- */

#siteNav {
    /* this changes after 180px*/
    display: none;
}
#siteNav,
#siteNavRepl {
    mix-blend-mode: difference;
    z-index: 200;
    right: 0rem;
}
/* all 3 have the same dimensions */
#toggleSM svg,
#closeComments svg,
.closeImgModal svg,
#closeQR svg,
#closeSearch svg,
.closeCartModal {
    width: 2.4rem
}

/* #toggleSM + close button */
/* ------------------ */

#toggleSM {
    cursor: pointer;
    background-color: transparent;
    outline: 0;
    border: 0;
    padding: 0;
    display: block;
    margin-left: auto;
}

#toggleSM svg,
.closeImgModal svg,
#closeComments svg,
#closeQR svg,
#closeSearch svg,
.closeCartModal svg {
    fill: var(--high1);
    transition: fill 0.2s ease;
}
html.light #toggleSM svg,
html.light .closeImgModal svg,
html.light #closeComments svg,
html.light #closeQR svg,
html.light #closeSearch svg,
html.light .closeCartModal svg {
    fill: var(--bgCol);
}
#toggleSearch svg,
#iconSearch svg {
    fill: var(--textCol);
    transition: fill 0.2s ease;
}
#iconSearch {
    display: none !important;
}

#toggleSM:focus-visible svg,
#toggleSM:hover svg,
#toggleSearch:focus-visible svg,
#toggleSearch:hover svg,
.closeImgModal:focus-visible svg,
.closeImgModal:hover svg,
#closeComments:focus-visible svg,
#closeComments:hover svg,
#closeQR:focus-visible svg,
#closeQR:hover svg,
#closeSearch:focus-visible svg,
#closeSearch:hover svg,
.closeCartModal:focus-visible svg,
.closeCartModal:hover svg {
    fill: var(--col1);
    transition: fill 0.2s ease;
}
html.light #toggleSM:focus-visible svg,
html.light #toggleSM:hover svg,
html.light #toggleSearch:focus-visible svg,
html.light #toggleSearch:hover svg,
html.light .closeImgModal:focus-visible svg,
html.light .closeImgModal:hover svg,
html.light #closeComments:focus-visible svg,
html.light #closeComments:hover svg,
html.light #closeQR:focus-visible svg,
html.light #closeQR:hover svg,
html.light #closeSearch:focus-visible svg,
html.light #closeSearch:hover svg,
html.light .closeCartModal:focus-visible svg,
html.light .closeCartModal:hover svg {
    fill: var(--col1Inverse);
}

#toggleSM.opened svg {
    transform: rotate(-45deg);
    transform-origin: center;
    transition: transform 0.2s ease, fill 0.2s ease;
}
#toggleSM.closed svg {
    transform: rotate(0deg);
    transform-origin: center;
    transition: transform 0.2s, fill 0.2s ease;
}
#toggleSM.opened #cross2 {
    opacity: 0;
    transition: transform 0.2s ease;
}


/* LINKS / ANCHORS */
/* ----------------------------------------------------- */

a {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: var(--textCol);
    text-underline-offset: 0.2em;
}
a, a:visited, a:active {
    color: var(--high1);
    /* color: var(--textCol); */
}
.single a {
    /* color: var(--textCol); */
}
main > div a {
    background-color: transparent;
    transition: text-decoration-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}
main > div a:hover,
main > div a:focus-visible {
    color: var(--hovCol);
    background-color: var(--high1);
    text-decoration-color: var(--hovCol);
    transition: text-decoration-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
    outline: 0;
}
html.light main > div a:hover,
html.light main > div a:focus-visible {
    text-decoration-color: var(--textCol);
}


/* INDEX GRID */
/* ----------------------------------------------------- */

/* thumbnails */
.thumb {
    margin-bottom: 1.3rem;
    margin-bottom: 1.1rem;
}
#featured .thumb {
    /* grid-column: span 2; */
}
.thumb .tagThumb {
}
.thumb .tagThumb .specs {
    display: inline-block;
    color: var(--textCol);
    text-decoration: none;
}

.thumb .imgWrap,
span.list .imgWrap {
    transition: background-color 0.2s ease;
    padding: 1px;
    margin-bottom: 4px;
    overflow: hidden;
    position: relative;
    z-index: 10;
}
.thumb img {
    border: 1px solid var(--altGray);
}
.thumb .title span {
    padding: 1px;
    padding-top: 4px;
    padding-right: 2px;
}
.indexgrid .filedUnder + span {
    display: inline-block;
}
.thumb a {
    transition: opacity 0.2s ease;
}
.flex {
    display: flex;
    justify-content: space-between;
    align-items: start;
    /* justify-content: end; */
    /* align-items: baseline; */
}

/* on homepage, lineheights to adjust for links within each sitesection button*/
/* .ssfiledUnder a {
    display: inline-block;
}
.ssfiledUnder,
.ssfiledUnder a,
.ssfiledUnder span,
.ssfiledUnder + span {
    line-height: 1.2;
    overflow: hidden;
}
html:has(.fontsize-s) .ssfiledUnder,
html:has(.fontsize-s) .ssfiledUnder a,
html:has(.fontsize-s) .ssfiledUnder span,
html:has(.fontsize-s) .ssfiledUnder + span {
    line-height: 1.25;
}
html:has(.fontsize-m) .ssfiledUnder,
html:has(.fontsize-m) .ssfiledUnder a,
html:has(.fontsize-m) .ssfiledUnder span,
html:has(.fontsize-m) .ssfiledUnder + span {
    line-height: 1.4;
}
html:has(.fontsize-l) .ssfiledUnder,
html:has(.fontsize-l) .ssfiledUnder a,
html:has(.fontsize-l) .ssfiledUnder span,
html:has(.fontsize-l) .ssfiledUnder + span {
    line-height: 1.3;
    overflow: hidden;
}
html:has(.fontsize-xl) .ssfiledUnder,
html:has(.fontsize-xl) .ssfiledUnder a,
html:has(.fontsize-xl) .ssfiledUnder span {
    line-height: 1.3;
} */



/* hoverstyles */
.thumb span {
    transition: background-color 0.2s ease;
}
.indexgrid .thumb a:hover .imgWrap,
.indexgrid .thumb a:focus-visible .imgWrap,
.indexgrid .thumb a:hover span, 
.indexgrid .thumb a:focus-visible span {
    color: var(--hovCol);
    background-color: var(--high1);
    transition: color 0.2s ease, background-color 0.2s ease;
}
.indexgrid a {
    transition: opacity 0.2s ease;
}
/* on hover, unfocus every other thumbnail (reduce opacity) */
.indexgrid:has(a:hover) a,
.indexgrid:has(a:focus-visible) a {
    /* opacity: 0.8; */
    transition: opacity 0.2s ease;
}
/* above doesn't apply to updates grid */
.updatesDetails .indexgrid:has(a:hover) a,
.updatesDetails .indexgrid:has(a:focus-visible) {
    opacity: 1;
}
.indexgrid:has(a:hover) a:hover,
.indexgrid:has(a:focus-visible) a:focus-visible {
    opacity: 1;
}

.indexgrid p.title {
    margin-bottom: 0.1rem;
}
html:has(#section) .indexgrid p.title {
    /* margin-bottom: 0.2rem; */
}


/* SPECIFIC INDEXGRIDS/ LIST PAGE GRIDS 
(DESIGN, ART, PRINTS/SHOP, UPDATES, TEXTS, ETC) */
/* ----------------------------------------------------- */

/* FILTERS (in DESIGN section) */
/* ------------------ */
.cardInvisible {
    display: none !important;
}
button.filter {
    /* margin-right: 0.2rem; */
}


/* the x mark when seleting a filter */
.filter .postTag::after {
    content: "\0020 \2715";
    line-height: 0;
    width: 0;
    display: inline-block;
    overflow: hidden;
    position: relative;
    left: 0.1rem;
    font-size: 0.9rem;
    transition: padding 0.2s ease;
}
.filterClicked .postTag::after {
    padding-left: 0.2rem;
    width: auto;
    overflow: visible;
    transition: padding 0.2s ease;
    color: var(--high1);
}
.fontsize-m .filterClicked .postTag::after,
.fontsize-l .filterClicked .postTag::after,
.fontsize-xl .filterClicked .postTag::after {
    padding-right: 0.1rem;
}

.filter .postTag {
    /* margin-right: 0.2rem; */
}
.filterClicked .postTag {
    color: var(--high1);
}


/* hoverstyles */
.filter .postTag:hover,
.filter:focus-visible .postTag {
    outline-color: var(--col1);
    color: var(--col1);
    transition: color 0.2s ease, outline-color 0.2s ease;
}
.filterClicked .postTag:hover,
.filterClicked:focus-visible .postTag {
    color: var(--textCol);
    /* color: var(--high1); */
    color: var(--col1);
    /* outline-color: var(--textCol); */
}
.filterClicked .postTag:hover::after,
.filterClicked:focus-visible .postTag:after {
    color: var(--col1);
}

/* UPDATES (LIST) STYLING: */
/* ------------------ */

/* YEAR (collapsible title) */
details.updatesDetails > summary {
    cursor: pointer;
    transition: color 0.2s ease;
    display: inline-block;
    position: relative;
    /* border-bottom: 1px solid var(--altGray); */
}
details.updatesDetails > summary > span:first-of-type {
    padding-right: 0.2rem;
}
details.updatesDetails > summary:hover,
details.updatesDetails > summary:focus-visible {
    color: var(--high1);
    transition: color 0.2s ease;
    outline: 0;
}


/* THUMBS */

/* remove extra spacing around text in the grid*/
.textGrid .thumb span {
    padding: 0;
}
/* an extra first paragraph gets inserted when manually truncating the post on grid */
.updatesTxtPreview > p:nth-of-type(2),
.updatesTxtSummary > p:nth-of-type(2) {
    text-indent: 0;
}

/* title */
.textGrid .title {
    color: var(--high1);
    /* margin-bottom: 0.43rem; */
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: var(--textCol);
    text-underline-offset: 0.2em;
}
/* preview text / img gap  */
.textGrid .imgWrap {
    margin-bottom: 0;
}
.imgWrap + .updatesTxtSummary,
.imgWrap + .updatesTxtPreview {
    /* padding-top: 0.4rem; */
}
.textGrid a:has(.updatesTxtSummary),
.textGrid a:has(.updatesTxtPreview),
.textGrid a:has(.textSpecs)  {
    color: var(--textCol);
    text-decoration: none;
}

/* hoverstyles */
.textGrid p.title span,
.updatesTxtSummary span {
    transition: background-color 0.2s ease;
}
.textGrid a:hover .updatesTxtSummary span {
    background-color: var(--high1);
    transition: background-color 0.2s ease;
}


/* TEXT GRID STYLING: */
/* ------------------ */
.textGrid:has(.textSpecs) p.title {
    margin-bottom: 0rem;
}
.textGrid .textSpecs {
    /* margin-bottom: 0.43rem; */
}
.textGrid .textSpecs span {
    padding-bottom: 4px;
}

.textGrid p.title span, 
.textGrid .updatesTxtPreview span {
    padding-bottom: 4px;
}

.textGrid .specs > div {
    /* display: inline-block; */
}
.textGrid:has(.imgWrap + p span) .imgWrap,
.textGrid:has(.updatesTxtPreview) .imgWrap {
    margin-bottom: 4px;
    margin-top: 3px;
}
.textGrid .imgWrap + p span,
.textGrid .updatesTxtPreview span {
    padding-top: 4px;
}


/* VAULT / GALLERY / VAULTGALLERY */
/* ----------------------------------------------------- */

/* SHOP THUMBS ON HOMEPAGE */
/* if pricing turns up (print/shop) */
p.shopCapt {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 0.3rem;
    line-height: 1;
    gap: 0.2rem;
    transition: color 0.2s ease;
    /* align-items: baseline; */
}
p.shopCapt > span:first-of-type {
    padding-left: 1px;
    padding-right: 2px;
}
.gallery p.shopCapt {
    margin-top: 0.5rem;
    margin-bottom: 0.2rem;
}
.gallery p.shopCapt > span:first-of-type {
    padding-left: 0;
}


/* gallery thumbs, in general */
.gallery .big {
    /* spans the entire grid */
    grid-column: 1 / -1;
    /* margin-bottom: 2.4rem; */
}
.galleryImg,
.gallerySwiperImg {
    cursor: pointer;
}
.noAdjustSize img {
    cursor: default;
}

/* carousel images + captions */
.carouselCapt {
    padding: 0.5rem 0.4rem;
    padding: 0.5rem 1rem;
    padding-top: 0.4rem;
    text-align: center;
}
.carouselCapt.center {
    text-align: center;
}
.carouselCapt.left {
    text-align: left;
}
.carouselCapt.scan {
}
.carouselCapt p {
    line-height: 1.1;
}
.swiper-slide:has(.scan) {
    background-color: black;
    color: rgb(134, 134, 134);
}
.white .swiper-slide {
    background-color: white;
    color:  rgb(131, 131, 131);
}
/* html.white .white .swiper-slide {
    color: var(--textCol);
} */
.swiper-slide:has(.white) {
    background-color: white;
    color: dimgray;
}

.swiper-slide img,
.swiper-slide video {
    margin: auto 0;
}
.swiper-slide:has(.carouselCapt) img,
.swiper-slide:has(.carouselCapt) video {
}


/* gallery thumbs, in the shop */
.gallery p.title span {
    padding: 0;
}
.gallery .thumb .zoomIn,
.gallery .thumb .swiper {
    margin-bottom: 4px;
}
.gallery .thumb .swiper-slide {
    margin-bottom: 0;
}
.gallery .swiper img {
    border: 0;
}

.shop p.title {
    /* margin-bottom: 0; */
}
.shop .big {
    /* margin-top: 2.6rem; */
    margin-bottom: 2.6rem;
}

/* other settings */
.centreCapt p.title {
    text-align: center;
}

/* CONTAINER QUERY: 
on a single-column layout, bigCaption is visible by default */
.gallery {
    container-type: inline-size;
    container-name: gallery;
}

.bigCaption a,
.bigCaption a:hover,
.bigCaption a:focus-visible {
    transition: text-decoration-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

/* GALLERY: BIGCAPTION VISIBLE ONLY ON CLICK*/

.gallery .bigCaption {
    display: none;
}
.gallery .big .bigCaption {
    display: block;
}

.gallery .ellipses {
    display: block;
    line-height: 0.8;
    user-select: none;
}
.gallery .ellipses span {
    position: relative;
    bottom: 0.3rem;
}
.gallery .big .ellipses {
    display: none;
}


.shop .bigCaption {
    display: block;
    height: 2.8rem;
    overflow: hidden;
    transition: height 0.2s ease;
}
.fontsize-l .shop .bigCaption,
.fontsize-xl .shop .bigCaption {
    height: 2.5rem;
}
.shop .big .bigCaption {
    height: auto;
}

.shop .zoomIn:hover ~ p.shopCapt,
.shop .zoomIn:focus-visible ~ p.shopCapt {
    color: var(--high1);
    transition: color 0.2s ease;
}
.shop .big .zoomIn:hover ~ p.shopCapt,
.shop .big .zoomIn:focus-visible ~ p.shopCapt {
    color: var(--textCol);
}

.gallery .zoomIn {
    transition: opacity 0.2s ease, outline 0.2s ease;
}
.gallery .zoomIn:focus-visible {
    /* outline: 0;
    opacity: 0.9;
    outline: 1px solid var(--col1);
    transition: opacity 0.2s ease, outline 0.2s ease; */
}

.shop .big .bigCaption {
    /* display: block; */
    /* margin-top: 0.4rem; */
    margin-bottom: 0.8rem;
    height: auto;
}
.shop .big p.shopCapt > span:first-of-type {
    color: var(--high1);
    /* margin-top: 1rem; */
}

/* show all currencies only when big */
.shop .price {
    display: flex;
}
.shop .price span {
    display: none;
}
.shop .price span.currency,
.shop .big .price span {
    display: block;
}
.shop .price span:before {
    content: "\00A0\00B7\00A0"
}
.shop .price span.currency:before {
    content: "";
}
.shop .big span.currency {
    order: -4;
    color: var(--high1);
}

/* view more logic */

div.viewMore {
    display: flex;
    /* padding-top: calc(50% - 1.4rem); */
    justify-content: center;
}
.viewMore button.clipped span:nth-of-type(2), 
.viewMore button.clipped span:last-of-type {
    display: none;
}
.viewMore button.opened span {
    display: none; 
}
.viewMore button.opened span:nth-of-type(2), 
.viewMore button.opened span:last-of-type {
    display: inline;
}
.galleryExpanded .thumb {
    display: block !important;
}


/* IFRAME */
/* ----------------------------------------------------- */

#main div.iframe iframe {
    border: 0;
    width: 100%;
    height: 80vh;
}
#main div.iframeWrap {
    background-color: white;
    border-bottom-left-radius: 0.2rem;
    border-bottom-right-radius: 0.2rem;
}
/* whole 'browser' block incl. toolbar */
#main div.iframe {
    border: 1px solid rgb(65, 65, 65);
    border-radius: 0.2rem;
}
html.light #main div.iframe {
    border: 1px solid lightgray;
}

/* TOOLBAR */
/* ------------------ */
.iframe .toolbar {
    text-align: center;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 2rem;
    padding: 0.2rem 0.2rem;
    padding-top: 0.25rem;
    border-bottom: 1px solid rgb(65, 65, 65);
}
html.light .iframe .toolbar {
    border-bottom: 1px solid lightgray;
}
.iframe .toolbar > span:first-of-type {
    display: none;
}
@media(min-width: 650px) {
    .iframe .toolbar > span:first-of-type {
        display: block;
    }
    .iframe .toolbar {
        justify-content: space-between;
    }
}

/* .iframe .url {
    display: block;
    color: dimgray;
    padding: 0 0.8rem;
    border-radius: 1.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1;
    transition: color 0.2s ease, background-color 0.2s ease;
    display: none;
} */
.iframe .url {
    display: none;
}
/* iframe newtab */
.iframe .newTab svg {
    width: 0.6rem;
    fill: var(--textCol);
}
.iframe .newTab a {
    width: 1.2rem;
    height: 1.2rem;
    padding: 0.25rem;
    border-radius: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--bgCol);
    transition: background-color 0.2s ease;
    border: 1px solid rgb(65, 65, 65);
}
html.light .iframe .newTab a {
    border: 1px solid lightgray;
}
/* hover styles*/
.iframe .newTab a:hover,
.iframe .newTab a:focus-visible {
    background-color: var(--high1);
    border-color: var(--high1);
    transition: background-color 0.2s ease, border-color 0.2s ease;
}
.iframe .newTab a:hover svg,
.iframe .newTab a:focus-visible svg {
    fill: var(--bgCol);
    transition: fill 0.2s ease;
}

/* .iframe .toolbar:has(.newTab a:hover) .url,
.iframe .toolbar:has(.newTab a:focus-visible) .url {
    background-color: var(--high1);
    color: var(--bgCol);
    transition: color 0.2s ease, background-color 0.2s ease;
}
html.light .iframe .toolbar:has(.newTab a:hover) .url,
html.light .iframe .toolbar:has(.newTab a:focus-visible) .url {
    color: var(--selBg);
} */




/* ANCHORS */
/* ----------------------------------------------------- */
#anchors {
    --scrollBtn: 0.8rem;
}
#anchors {
    position: relative;
    /* background-color: antiquewhite; */
    top: -0.55rem;
}

#anchors .scrollBtn {
    display: inline-block;
    margin: 0;
    padding: 0;
    line-height: 0;
    padding: 0.25rem 0.15rem;
    /* margin-bottom: 0.6rem; */
}
/* regular anchorlinks */
#anchors .scrollBtn span {
    display: inline-block;
    /* background-color: var(--bgCol); */
    border: 1px solid var(--altGray);
    width: var(--scrollBtn);
    height: var(--scrollBtn);
    border-radius: 50%;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}
html.light #anchors .scrollBtn span {
    /* background-color: var(--high1); */
}

/* scroll to top button */
button.top {
    padding: 0;
    cursor: pointer;
    position: absolute;
    top: -1.65rem;
    border: 0;
}
button.top svg {
    width: 1rem !important;
    margin-left: -0.1rem;
}
#anchors .hidden {
    cursor: default !important;
    opacity: 0 !important;
    transition: opacity 0.4s ease-out;
}

/* hover effects */
#anchors .scrollBtn:hover span,
#anchors .scrollBtn:focus-visible span {
    background-color: var(--high1);
    border-color: var(--high1);
    /* background-color: var(--col1);
    border-color: var(--col1); */
    transition: background-color 0.2s ease, border-color 0.2s ease;
}
html.light #anchors .scrollBtn:hover span,
html.light #anchors .scrollBtn:focus-visible span {
    background-color: dimgray;
    border-color: dimgray;
    /* background-color: yellow;
    border-color: yellow; */
    transition: background-color 0.2s ease, border-color 0.2s ease;
}
#anchors .scrollBtn:focus-visible {
    outline: 0;
}

/* currentDot */
#anchors .currentDot span {
    background-color: rgb(80,80,80);
    border-color: rgb(80,80,80);
    transition: background-color 0.2s ease, border-color 0.2s ease;
}
/* to top */
#anchors button.top span {
    /* for alignment test */
    border: 0;
    /* background-color: var(--bgCol) !important; */
}
html.light #anchors button.top span {
    /* background-color: var(--high1) !important;  */
}
#anchors button.top:hover svg,
#anchors button.top:focus-visible svg {
    fill: var(--col1);
    /* fill: var(--high1); */
}
html.light #anchors button.top:hover svg,
html.light #anchors button.top:focus-visible svg {
    fill: var(--col1Inverse);
    /* fill: var(--bgCol); */
}

#anchors button.top:hover span,
#anchors button.top:focus-visible span {
    background-color: transparent;
}
html.light #anchors button.top:hover span,
html.light #anchors button.top:focus-visible span {
    background-color: transparent;
}

/* anchors (overall) hover effect */
#anchors {
    opacity: 0.8;
    transition: opacity 0.2s ease;
}
html.light #anchors {
    opacity: 0.5;
}
#anchors:hover,
#anchors:focus-visible,
html.light #anchors:hover,
html.light #anchors:focus-visible 
    {
    opacity: 1;
    transition: opacity 0.2s ease;
    outline: 0;
}



/* FILED UNDER (on indexgrid / featured) */
/* ------------------ */

.filedUnder {
    text-align: left;
    line-height: 1;
    /* margin-top: 0.1rem; */
}
.filedUnder span {
    padding: 0;
}
.filedUnder span:nth-of-type(2) {
    padding-left: 0.85rem;
    position: relative;
}
.filedUnder span:nth-of-type(2):before {
    content: "\25B7";
    font-size: 0.55em;
    position: absolute;
    top: 0.7em;
    left: 0.1rem;
    margin-right: 0.5em;
}
.indexgrid .filedUnder span::before {
    top: 0.8em;
}
/* reduce space on small fontsize thumbs*/
body.fontsize-xs div.specs:has(.filedUnder) {
    margin-top: -0.2rem;
}

/* hoverstyles */
.filedUnder span {
    transition: color 0.2s ease;
}
.filedUnder:hover span,
.filedUnder:focus-visible span {
    color: var(--col1);
    transition: color 0.2s ease, border-color 0.2s ease;
}
.filedUnder:hover span:nth-of-type(2):before,
.filedUnder:focus-visible span:nth-of-type(2):before {
    content: "\25B6";
    font-size: 0.55em;
}

/* FILED UNDER (SINGLE PAGE) */
/* ----------------------------------------------------- */
#indexing .filedUnder {
    border: 1px solid var(--altGray);
    user-select: none;
    line-height: 1;
    padding: 0 6px;
    padding-right: 8px;
    position: relative;
    top: 0em;
    transition: color 0.2s ease, border-color 0.2s ease;
}
#indexing .filedUnder span {
    position: relative;
    top: -0.1em;
}
/* switch off 'home'*/
.filedUnder span:first-of-type {
    display: none;
}
#indexing .updates span:last-of-type,
.indexgrid .updates span:last-of-type {
    display: none;
}

/* the slash in between sections*/
.filedUnder span:nth-of-type(3)::before {
}
.filedUnder:has(span:nth-of-type(3)) span:nth-of-type(2)::after {
    content: "/";
    font-size: 1rem;
    position: static;
    margin-left: 0.25em;
    margin-right: -0.1rem;
    margin-right: 0.2rem;
    /* font-size: 0.8em; */
    /* position: relative;
    bottom: 2px; */
}
#indexing .updates:has(span:nth-of-type(3)) span:nth-of-type(2)::after,
.indexgrid .updates:has(span:nth-of-type(3)) span:nth-of-type(2)::after {
    display: none;
}


/* hover style*/
#indexing .filedUnder:hover,
#indexing .filedUnder:focus-visible{
    border: 1px solid var(--col1);
    transition: color 0.2s ease, border-color 0.2s ease;
}
/* adjust button text on different fontsizes */
body.fontsize-xs #indexing .filedUnder {
    top: 0.1em;
}
body.fontsize-xs #indexing .filedUnder span {
    top: -0.2em;
}
body.fontsize-xs #indexing .filedUnder span::before {
    top: 0.85em;
}
body.fontsize-s #indexing .filedUnder span::before {
    top: 0.82em;
}
/* on larger font sizes*/
body.fontsize-m #indexing .filedUnder,
body.fontsize-l #indexing .filedUnder,
body.fontsize-xl #indexing .filedUnder {
    line-height: 1.25;
    top: -0.02em;
}
body.fontsize-m #indexing .filedUnder span,
body.fontsize-l #indexing .filedUnder span,
body.fontsize-xl #indexing .filedUnder span {
    top: -0.03em;
}


/* BUY BUTTON (follows filedunder styling) */
/* ----------------------------------------------------- */

.buyButton {
    text-align: left;
    line-height: 1;
    margin-top: 0.1rem;
    border: 1px solid var(--altGray);
    user-select: none;
    padding: 0 8px;
    /* padding-right: 8px; */
    position: relative;
    top: 0em;
    transition: color 0.2s ease, border-color 0.2s ease;
    cursor: pointer;   
    background-color: var(--bgCol); 
}
.buyButton span {
    padding: 0;
    position: relative;
    top: -0.1em;
    transition: color 0.2s ease;
}

/* hover style*/
.buyButton:hover,
.buyButton:focus-visible {
    color: var(--col1);
    border: 1px solid var(--col1);
    transition: color 0.2s ease, border-color 0.2s ease;
}
.buyButton svg {
    transition: fill 0.2s ease;   
}
.buyButton:hover svg,
.buyButton:focus-visible svg {
    fill: var(--col1);
    transition: fill 0.2s ease;
}

/* adjust button text on different fontsizes */
.fontsize-xs .buyButton {
    top: 0.1em;
}
.fontsize-xs .buyButton span {
    top: -0.15em;
}
/* on larger font sizes*/
.fontsize-m .buyButton,
.fontsize-l .buyButton,
.fontsize-xl .buyButton {
    line-height: 1.25;
    top: -0.02em;
}
.fontsize-m .buyButton span,
.fontsize-l .buyButton span,
.fontsize-xl .buyButton span {
    top: -0.03em;
}

/* VARIATIONS ON THE BUY / ADD TO CART BUTTON */

/* CLOSE ICON (appears in addDetails shortcode) */
.buyButton span.close {
    /* top: 0; */
    font-size: 0.9rem;
    padding-left: 0.25rem;
    padding-right: 0.1rem;
}

/* DOWNLOAD BUTTON (appears in addDownloadBtn shortcode) */
a:has(.buyButton) {
    text-decoration: none;
    color: var(--textCol);
}
a:has(.buyButton):hover {
    background-color: transparent;
}
.downloadIcon svg {
    width: 0.8rem;
    fill: var(--textCol);
    position: relative;
    top: 0.1rem;
}
.fontsize-xs .downloadIcon svg {
    top: 0.18rem;
}
a.download {
    display: inline-block;
    transition: color 0.2s ease;
}
a.download:focus-visible,
.shortcodeDetails summary:focus-visible {
    color: var(--col1);
    transition: color 0.2s ease;
}
.shortcodeDetails:focus-visible .buyButton,
a.download:focus-visible .buyButton {
    border-color: var(--col1);
    transition: border-color 0.2s ease;
}
a.download:focus-visible svg {
    fill: var(--col1);
    transition: fill 0.2s ease;
}


/* CART MODAL */
/* ----------------------------------------------------- */

#cartModal.cartOpened {
    display: block;
    z-index: 400;
    overflow-x: hidden;
}

/* region / currency select */
#region {
    font-size: 1rem;
    border-radius: 0;
    border: 0px solid var(--altGray);
    border: none;
    box-shadow: 0;
    color: var(--textCol);
    background-color: var(--bgCol);
    border: 1px solid var(--textCol);
    transition: border-color 0.2s ease, color 0.2s ease;
}
#region:focus-visible,
#region:hover {
    outline: 0;
    border: 1px solid var(--col1);
    transition: border-color 0.2s ease, color 0.2s ease;
    color: var(--high1);
}
#region option {
    color: var(--textCol);
}

/* open cart button (cart icon) */
#toggleSM.opened ~ #openCartModal {
    display: none;
}
#openCartModal {
    padding: 0.1rem 0.4rem;
}
#openCartModal svg {
    fill: var(--high1);
    width: 2rem;
    transition: fill 0.2s ease;
}
html.light #openCartModal svg {
    fill: var(--bgCol);
}
#openCartModal:hover svg,
#openCartModal:focus-visible svg {
    fill: var(--col1);
    transition: fill 0.2s ease;
}
html.light #openCartModal:hover svg,
html.light #openCartModal:focus-visible svg {
    fill: var(--col1Inverse);
    transition: fill 0.2s ease;
}



/* 'VIEW MORE' DETAILS (SHORTCODE) -- on INFO page */
/* ----------------------------------------------------- */

.shortcodeDetails[open] summary .buyButton:first-of-type {
    display: none;
}
.shortcodeDetails summary {
    display: inline-block;
    transition: color 0.2s ease;
}
.shortcodeDetails summary:focus-visible {
    outline: 0;
}
.shortcodeDetails summary:focus-visible .buyButton {
    border-color: var(--col1);
    transition: border-color 0.2s ease;
}
.shortcodeDetails summary span {
    /* padding-bottom: 0.1rem; */
}



/* TAGS */
/* ----------------------------------------------------- */
#tags {
    display: inline-block;
}
#tags span:last-of-type {
    display: none;
}
.postTag {
    outline: 1px solid var(--altGray);
    border-radius: 1rem;
    padding: 0.25rem 10px;
    text-decoration: none;
    user-select: none;
    display: inline-block;
    line-height: 1.3;
    line-height: 0.8;
    margin-right: 0.3rem;
    margin-bottom: 0.1rem;
    transition: background-color 0.2s ease, color 0.2s ease, outline 0.2s ease;
}
.postTag:first-of-type {
    margin-top: 0.2rem;
}
body.fontsize-xs .postTag:first-of-type {
    margin-top: 0.3rem;
}
#tags .postTag,
.exploreTags .postTag {
    color: var(--textCol);
}
#tags .postTag:hover,
#tags .postTag:focus-visible,
.exploreTags .postTag:hover,
.exploreTags .postTag:focus-visible {
    color: var(--bgCol);
    /* outline: 1px solid var(--high1); */
    transition: background-color 0.2s ease, color 0.2s ease, outline 0.2s ease;
}



/* PAGE GRID (COLUMN GUIDES) */
/* ----------------------------------------------------- */

#pageGrid {
    width: calc(100% - (2 * var(--bodyPad)));
    height: 100vh;
    position: fixed;
    left: var(--bodyPad);
    bottom: 0;
    display: flex;
    padding: 0 ;
    color: greenyellow;
    opacity: 20%;
}
/* #pageGrid {display: none;} */
#pageGrid div {
    flex-grow: 1;
    flex-basis: 0;
    background-color: lightgray;
}
#pageGrid div:nth-of-type(even) {
    background-color: lightpink;
}


/* SITEMAP / SITE MAP */
/* ----------------------------------------------------- */

#sitemap {
    width: var(--smWidth);
    overflow-x: hidden;
}

#sitemap > div {
    border-left: 1px solid var(--altGray);
}
#sitemap hr {
    padding-left: var(--bodyPad);
    position: relative;
    top: 0.3rem;
}
#sitemap #smThumbOps {
    display: none;
}

#sitemap h3,
#sitemap .h3 {
    border-bottom: 1px solid var(--altGray);;
    display: inline-block;
    padding: 0 var(--bodyPad);
    cursor: pointer;
    position: relative;
    /* line-height: 1.1; */
}
#sitemap ul > details[open] > h3,
#sitemap ul > details[open] > .h3 {
    position: sticky;
    top: 0;
    z-index: 20;
    background-color: var(--bgCol);
}

#sitemap a {
    /* background-color: var(--bgCol); */
    text-decoration: none;
    color: var(--textCol);
    display: inline-block;
    line-height: 1.3;
    /* border-bottom: 1px solid var(--altGray); */
    /* text-decoration: underline;
    text-decoration-color: var(--altGray);
    text-decoration-thickness: 1px;
    text-underline-offset: 4px; */
}

/* html:has(.fontsize-s) #sitemap a {
    line-height: 1.27;
}
html:has(.fontsize-md) #sitemap a {
    line-height: 1.28;
} */
/* html:has(.fontsize-l) #sitemap a {
    line-height: 1.15;
}
html:has(.fontsize-xl) #sitemap a {
    line-height: 1.15;
} */

#sitemap div.list {
    padding-left: var(--bodyPad);
}
#sitemap div.list span.list:first-of-type a {
    padding-top: 0.05rem;
}

.sitemapDetails .sitemapDetails h3,
.sitemapDetails .sitemapDetails .h3 {
    border-left: 1px solid var(--altGray);
}

span.list a {
    border-bottom: 1px solid var(--altGray);
    border-left: 1px solid var(--altGray);
    width: 100%;
}

/* the one with the title and arrow */
span.list a > div:last-of-type {
    display: flex !important;
    flex-wrap: nowrap;
    gap: 0.4rem;
    justify-content: space-between;
    align-items: baseline;
    align-items: top !important;
}
.sitemapDetails .sitemapDetails div.list {
    border-left: 1px solid var(--altGray);
}
.sitemapDetails .sitemapDetails:last-of-type div.list {
    border-left: 0;
}
#sitemap span.smLink {
    text-decoration: none;
    background-color: ;
    flex-basis: 0.8rem;
    flex-shrink: 0;
    display: ;
    padding-right: 1px;
}
#sitemap span.smLink svg {
    fill: var(--textCol);
}


/* currentsection, currentpage styling */
#currentPage,
#currentPage a,
#sitemap .scrolled,
#sitemap .scrolled a {
    color: var(--high1);
}
#sitemap span#currentPage a:focus-visible span span,
#sitemap span#currentPage a:hover span span {
    background-color: transparent;
    color: var(--high1);
}
#sitemap span#currentPage a:focus-visible .smLink svg,
#sitemap span#currentPage a:hover .smLink svg {
    fill: var(--textCol);
}

/* scrollintoview offset */
/* one-level nesting */
body.fontsize-xs .scrolled {
    scroll-margin-top: calc(1.35rem + 1px);
}
.scrolled {
    scroll-margin-top: calc(1.3rem + 1px);
}
body.fontsize-l .scrolled {
    scroll-margin-top: calc(1.2rem + 1px);
}
body.fontsize-xl .scrolled {
    scroll-margin-top: calc(1.15rem + 1px);
}
/* 2-level nesting */
/* body.fontsize-xs details details .scrolled {
    scroll-margin-top: calc(2.7rem + 1px);
}
details details .scrolled {
    scroll-margin-top: calc(2.6rem + 1px);
}
body.fontsize-l details details .scrolled {
    scroll-margin-top: calc(2.4rem + 1px);
}
body.fontsize-xl details details .scrolled {
    scroll-margin-top: calc(2.3rem + 1px);
} */


/* turns up only when top-level details/summary is opened */
/* #sitemap:has(ul>details[open]) .top,
#sitemap:has(ul>details[open]) .top a {
    color: var(--high1);   
} */
#sitemap details[open] summary,
#sitemap details[open] summary a {
    color: var(--high1);   
    transition: color 0.2s ease;
}

#sitemap .sitemapDetails .sitemapDetails:has(.smDesc)[open] .h3,
#sitemap .sitemapDetails .sitemapDetails:has(.smDesc)[open] h3 {
    border-bottom: 0 ;
}
#sitemap .sitemapDetails .sitemapDetails[close] .h3,
#sitemap .sitemapDetails .sitemapDetails[close] h3 {
    /* border-bottom: 1px solid var(--altGray) ; */
}
.smDesc {
    border-left: 1px solid var(--altGray);
    border-bottom: 1px solid var(--altGray);
    padding-left: 5px;;
}


/* hover styles */
/* ------------------ */
/* top arrows markers */
#sitemap summary,
#sitemap summary::before a {
    transition: color 0.2s ease;
}
#sitemap summary:hover,
#sitemap summary:focus-visible,
#sitemap summary:hover a,
#sitemap summary:focus-visible a,
#sitemap summary:hover > #currentPage,
#sitemap summary:focus-visible > #currentPage {
    color: var(--high1);
    color: var(--col1);
    transition: color 0.2s ease;
    outline: 0
}
#sitemap details[open] summary:hover,
#sitemap details[open] summary:focus-visible,
#sitemap details[open] summary:hover a,
#sitemap details[open] summary:focus-visible a {
    color: var(--col1);   
    transition: color 0.2s ease;
}


/* single pages */
#sitemap span.list a span span {
    transition: background-color 0.2s ease, color 0.2s ease;
    padding-right: 0.2rem;
    padding-left: 0.2rem;
    line-height: 1.2;
}
#sitemap span.list a:hover span span,
#sitemap span.list a:focus-visible span span,
#sitemap span.list a:hover .imgWrap,
#sitemap span.list a:focus-visible .imgWrap {
    /* display: inline; */
    color: var(--hovCol);
    background-color: var(--high1);
    transition: background-color 0.2s ease, color 0.2s ease;
}

#sitemap span.list .smLink svg {
    transition: fill 0.2s ease;
}
#sitemap span.list a:hover .smLink svg,
#sitemap span.list a:focus-visible .smLink svg {
    fill: var(--high1);
    transition: fill 0.2s ease;
}
#sitemap a:focus-visible {
    outline: 0;
}

/* details as direct pages (e.g. info) */
/* ------------------ */
#sitemap h3.top {
    transition: background-color 0.2s ease;
}
#sitemap h3.top:hover,
#sitemap h3.top:focus-visible,
#sitemap h3.top:hover a,
#sitemap h3.top:focus-visible a {
    background-color: var(--high1);
    transition: background-color 0.2s ease;
    outline: 0
}
#sitemap h3.top:hover::before,
#sitemap h3.top:focus-visible::before {
    color: var(--high1);
    transition: color 0.2s ease;
    outline: 0
}


#sitemap h3.top:hover > a > span,
#sitemap h3.top:focus-visible > a > span {
    transition: color 0.2s ease; 
}
#sitemap h3.top:hover > a > span,
#sitemap h3.top:focus-visible > a > span {
    color: var(--hovCol);
    transition: color 0.2s ease;
}
#sitemap h3.top > a:focus-visible {
    background-color: var(--high1);
    color: var(--hovCol);
    transition: color 0.2s ease, background-color 0.2s ease;
}
#sitemap h3.top > a:focus-visible #currentPage {
    color: var(--hovCol);
    transition: color 0.2s ease, background-color 0.2s ease;
}


/* to list page (e.g. updates, photos) */
/* ------------------ */
#sitemap summary:has(a) a,
#sitemap summary:has(a) a {
    transition: background-color 0.2s ease;
}
/* #sitemap summary:has(a) a:hover,
#sitemap summary:has(a) a:focus-visible, */
#sitemap summary.h3:has(a:hover), 
#sitemap summary.h3:has(a:focus-visible) {
    background-color: var(--high1);
    transition: background-color 0.2s ease;
    outline: 0
}

#sitemap .top:has(a),
#sitemap .top:has(a) {
    padding: 0;
}
/* updates details / link */
#sitemap .top:has(a) a {
    padding: 0 5px;
    transition: color 0.2s ease;
    line-height: 1.45;
}
html:has(.fontsize-s) #sitemap .top:has(a) a {
    line-height: 1.4;
}
html:has(.fontsize-m) #sitemap .top:has(a) a {
    line-height: 1.35;
}
html:has(.fontsize-l) #sitemap .top:has(a) a {
    line-height: 1.3;
}
html:has(.fontsize-xl) #sitemap .top:has(a) a {
    line-height: 1.3;
}

#sitemap summary.top:has(a) a:hover,
#sitemap summary.top:has(a) a:focus-visible,
#sitemap summary:has(a) a:hover,
#sitemap summary:has(a) a:focus-visible {
    color: var(--hovCol);
    transition: color 0.2s ease;
    outline: 0
}

/* plus/minus icons */
span.smPlus {
    position: absolute;
    right: -1rem;
    top: 0.02rem;
    top: 0;
    /* background-color: var(--bgCol); */
    /* background-color: red; */
    padding: 0 0.3rem;
    opacity: 0.8;
    transition: opacity 0.2s ease;
}
span.smPlus svg {
    width: 0.6rem;
    fill: var(--textCol);
    transition: fill 0.2s ease;
}

#sitemap summary:hover span.smPlus,
#sitemap summary:focus-visible span.smPlus {
    /* opacity: 1;
    transition: opacity 0.2s ease; */
}
#sitemap summary:hover svg,
#sitemap summary:focus-visible svg,
.updatesDetails summary:hover svg,
.updatesDetails summary:focus-visible svg {
    fill: var(--high1);
    fill: var(--col1);
}
#sitemap summary:has(a):hover svg,
#sitemap summary:has(a):focus-visible svg {
    fill: var(--textCol);       
}
#sitemap summary:has(a) .smPlus:hover svg,
#sitemap summary:has(a) .smPlus:focus-visible svg {
    fill: var(--high1);
    fill: var(--col1);
}
#sitemap summary:has(a):focus-visible svg {
    fill: var(--high1);
    fill: var(--col1);
}
/* becomes minus*/
#sitemap details[open] > summary svg rect:last-of-type,
.updatesDetails[open] > summary svg rect:last-of-type {
    display: none;
}
#sitemap details[open] > summary.top .smPlus {
    /* background-color: var(--bgCol); */
    opacity: 1;
}

/* add margin below opened subsection */
.sitemapDetailsTop[open] > div.list {
    margin-bottom: 0.25rem;
}

/* GRID VIEW */
/* ------------------ */
@media(min-width: 240px) {
    .smGrid div.list,
    .smGrid div.list div.list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
        grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
        /* align-items: stretch; */
        /* margin-top: -1px; */
    }
    .smGrid div.list:has(div.list) {
        display: block;
        margin-top: 0;
    }

    .smGrid span.list {
        /* padding: 4px; */
        background-color: ;
        border-left: 1px solid var(--altGray);
        border-bottom: 1px solid var(--altGray);
    }
    .smGrid span.list a {
        display: flex !important;
        align-items: start !important;
        border: 0;
    }

    /* title + arrow block */
    .smGrid span.list a > div:last-of-type{
        flex-grow: 1;
        padding: 0.1rem 0;
    }

    /* title */
    .smGrid span.list span {
        line-height: 1.2;
    }

    /* show the thumbnail */
    .smGrid span.list a .imgWrap {
        display: block !important;
        margin-bottom: 0;
        max-width: 3.5rem;
        flex-shrink: 0;
    }
    .fontsize-l .smGrid span.list a .imgWrap,
    .fontsize-xl .smGrid span.list a .imgWrap {
        max-width: 3.2rem;
    }

    .fontsize-xs .smGrid span.list a .imgWrap,
    .fontsize-s .smGrid span.list a .imgWrap {
    }

    .smGrid img {
        border: 1px solid var(--altGray);
    }

    /* currentsection, currentpage styling */
    .smGrid #currentPage a > .imgWrap,
    .smGrid #currentPage a span span,
    #sitemap .smGrid .scrolled a > .imgWrap,
    #sitemap .smGrid .scrolled a span span {
        background-color: var(--high1) !important;
        color: var(--hovCol) !important;
    }

}



/* IMAGE MODAL */
/* ----------------------------------------------------- */
/* FOR DEV: media query, keep after 650px */

.modalWrapper {
    display: none;
    /* position: relative; */
    position: fixed;
    z-index: 600;
}
.imgModal {
    position: fixed;
    height: 100vh;
    width: 100vw;
    left: 0;
    top: 0;
    z-index: 600;
}
.imgModalWrap {
    width: 100%;
    cursor: -moz-default !important;
    cursor: -webkit-default !important;
    cursor: default !important;
    padding-right: 10px;;
    /* padding: 1rem; */
}
.imgModal .imgModalWrap img,
.imgModal .imgModalWrap svg,
.imgModal .imgModalWrap video {
    width: auto;

    max-height: calc(100dvh);
    min-height: calc(100dvh);

    /* max-height: calc(100dvh - 2rem);
    min-height: calc(100dvh - 2rem);   */
    border: 1px solid var(--altGray);
    position: relative;
    z-index: 200;

    cursor: -moz-move;
    cursor: -webkit-move;
    cursor: move;

    border: 0;
    /* same as button height + padding */
    padding-bottom: calc(1.2rem + 10px); 
    padding-top: calc(1.2rem + 5px); 
    /* background-color: var(--bgCol); */
}
.imgModal .imgModalWrap svg {
    max-width: 100%;
    margin: 0 auto;
    display: block;
}

/* + - buttons, modal close, and modalBG */
.imgModalBtns {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
   
    display: flex;
    justify-content: center;
    z-index: 700;
    mix-blend-mode: difference;
}

.imgModalBtns button {
    width: calc(1.2rem + 10px);
    height: calc(1.2rem + 10px);
    padding: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.imgModalBtns .buttonWrap {
    border-radius: 50%;
    width: 1.2rem;
    height: 1.2rem;

    padding: 0.2rem;
    display: flex;
    justify-content: center;
    align-items: center;
}
.imgModalBtns svg {
    width: 1rem;
    fill: var(--textCol);
    transition: fill 0.2s ease;
}
.imgModalBtns button:hover svg,
.imgModalBtns button:focus-visible svg {
    fill: var(--col1);
    transition: fill 0.2s ease;
}
html.light .imgModalBtns button:hover svg,
html.light .imgModalBtns button:focus-visible svg {
    /* fill: var(--bgCol); */
    fill: var(--col1Inverse);
}

.modalCaption {
    position: fixed;
    top: 2px;
    top: 0;
    left: 5px;
    z-index: 700;
    padding-right: 2.5rem;
    padding-top: 0.1rem;
}
.fontsize-xs .modalCaption p,
.fontsize-s .modalCaption p {
    line-height: 1.2;
}
.fontsize-m .modalCaption p,
.fontsize-l .modalCaption p,
.fontsize-xl .modalCaption p {
    line-height: 1.1;
}
.closeImgModal,
.closeCartModal {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 700;
    mix-blend-mode: difference;
}
.closeImgModal svg,
.closeCartModal svg {
    transform: rotate(45deg);
    transform-origin: center;
}
.imgModalBG {
    background-color: antiquewhite;
    background-color: var(--bgCol);
    opacity: 0.96;
    opacity: 1;
    position: absolute;
    top: 0;
    left: 0;
    height: 100dvh;
    width: 100vw;
}

/* zoom in / fullscreen function */
.zoomIn {
    position: relative;
}
.imgZoom {
    position: absolute;
    right: 1px;
    bottom: 1px;
    z-index: 40;
    line-height: 0;

    width: 2.3rem;
    height: 2.3rem;
    
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.2s ease;
    mix-blend-mode: difference;

    display: flex;
    justify-content: center;align-items: center;
    /* mix-blend-mode: normal; */
    /* opacity: 1; */
}
.imgZoom svg {
    width: 1.25rem;
    fill: rgba(255,255,255,0.5);
    /* fill: var(--textCol); */
    transition: fill 0.2s ease;
}

.zoomIn:hover > img,
.zoomIn:focus-visible > img,
.zoomIn:hover > div:has(svg),
.zoomIn:focus-visible > div:has(svg) {
    opacity: 0.9;
    transition: opacity 0.2s ease;
}

.zoomIn > div:has(svg) {
    transition: opacity 0.2s ease;
}
.zoomIn:hover .imgZoom,
.zoomIn:focus-visible .imgZoom {
    opacity: 1;
    transition: opacity 0.2s ease;
}
.imgZoom:hover svg,
.imgZoom:focus-visible svg {
    fill: rgba(255,255,255,1);
    transition: fill 0.2s ease;
}
.imgZoom:focus-visible {
    opacity: 1;    
    transition: 0.2s ease;
}

.txtImg img {
    /* transition: opacity 0.2s ease; */
}
.txtImg:has(.imgZoom:hover) img,
.txtImg:has(.imgZoom:focus-visible) img {
    /* opacity: 0.8;
    transition: opacity 0.2s ease; */
}



/* SINGLE PAGE INDEXING */
/* ----------------------------------------------------- */

/* listed on */
/* ------------------ */
#listed_on .comma:last-of-type {
    display: none;
}
.comma:last-child {
    display: none;
}

/* specs */
/* ------------------ */
#specs > div {
    display: inline-block;
}
#specs > div:last-of-type .dot {
    display: none;
}
#specs .dot {
}

/* share */
/* ------------------ */
#shareIcons {
    display: inline-block;
}
#share svg {
    fill: var(--high1);
    fill: var(--textCol);
    width: 0.9rem;
    position: relative;
    top: 0.1rem;
    transition: fill 0.2s ease;
    margin: 0 0.1rem;
}
#share button:hover svg,
#share button:focus-visible svg {
    fill: var(--col1);
    transition: fill 0.2s ease-in;
}
#showQR {
    margin-right: 0.1rem;
}
#webShare svg {
    width: 1rem;
    top: 0.15rem;
    /* width: 0.9rem; */
}

/* comments icon */
/* ------------------ */
.openComments {
    padding: 0;
    text-align: left;
}
.single .openComments {
    color: var(--textCol);
    text-decoration: none;
}
.openComments svg {
    width: 1rem;
    margin: 0 0.1rem;
    margin-right: 0.25rem;
    position: relative;
    top: 0.1rem;
}
.openComments svg path {
    fill: var(--bgCol);
}
.openComments svg path:last-of-type {
    fill: var(--textCol);
    transition: fill 0.2s ease;
}

.openComments span:last-of-type {
    /* display: inline-block; */
    transition: color 0.2s ease;
}
#ama:hover svg path:last-of-type,
#ama:focus-visible svg path:last-of-type,
.openComments:hover svg path:last-of-type,
.openComments:focus-visible svg path:last-of-type {
    fill: var(--col1);
    transition: fill 0.2s ease;
}
.openComments:hover span:last-of-type,
.openComments:focus-visible span:last-of-type {
    color: var(--col1);
    transition: color 0.2s ease;
}

/* variations / comments icon on INFO page */
#about-me .openComments {
    line-height: 0;
}
#ama svg path:last-of-type {
    fill: var(--high1);
}
#ama {
    color: var(--high1);
    transition: text-decoration-color 0.2s ease, color 0.2s ease;
}
#ama:hover,
#ama:focus-visible {
    color: var(--col1);
    text-decoration-color: var(--col1);
    transition: text-decoration-color 0.2s ease, color 0.2s ease;
}


/* QR BG + IMAGE */
/* ------------------ */
#qrBG {
    background-color: var(--bgCol);

    width: 100vw;
    max-height: 100vh;
    height: 100vh;

    position: fixed;
    top: 0;
    left: 0;
    z-index: 70;
    z-index: 404;
    opacity: 0.96;
    display: flex;
    justify-content: center;
    align-items: center;

    overflow: hidden;
    display: none;
}
html.light #qrBG {
    opacity: 0.96;
}
#qr {
    padding: 0 15px;
    padding-top: ;
    text-align: ;
    width: 100%;

    word-break: break-all;
    background-color: ;
    margin-bottom: 4vh;
    background-color: ;
    /* max-width: 40vh; */

    width: clamp(300px, 33vh, 30vw);
    max-width: 33vh;
}
#qr img {
    max-height: 40vh;
    margin-bottom: 1.2rem;
    background-color: ;
    opacity: 0.75;
    /* opacity: 1; */
    filter: invert(1);
    padding: 2px;
}
html.light #qr img {
    filter: invert(0);
    /* opacity: 0.9; */
    opacity: 1;
}
#qrBG .nameText {
    position: fixed;
    top: 0;
    left: 0;
    color: dimgray;
    mix-blend-mode: difference;
    transition: background-color 0.2s ease;
}


/* MEDIA QUERIES (QR) */
/* ----------------------------------------------------- */

/* after breakpoint 2 */
/* ------------------ */
@media(min-width: 800px){
    #qrBG {
        z-index: 50;
        z-index: 404;
    }    
}

/* after breakpoint 4 */
/* ------------------ */
@media(min-width: 1600px){
    #qr p {
        text-align: center;
    }
}

/* up to heightpoint 4 */
/* ------------------ */
@media(max-height: 500px){
    #qr {
        margin-bottom: 1vw;
        max-width: 50vh;
    }
    #qr img {
        max-height: 50vh;
        margin-bottom: clamp(0.5rem, 1.5rem, 10vh);
    }
}
/* up to heightpoint 2 */
/* ------------------ */
@media(max-height: 300px){

    #qr {
        margin-bottom: 0;
        max-width: 50%;
    }
    #qr img {
        max-height: 50vh;
    }
    #qr p {
        text-align: center;
        padding-left: 0.2rem;
    }
}

/* up to heightpoint 1 */
/* ------------------ */
@media(max-height: 150px){

    #qr {
        margin-bottom: 0;
    }
    #qr img {
        margin-bottom: 0;
        max-height: 90vh;
    }

    #qr p {
        display: none;
    }
}



/* NEXTPREV */
/* ----------------------------------------------------- */

/* buttons (arrowheads) only */
#nextPrevBtns .nextPrevBtn {
    display: none;
}

#nextPrev {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem;
    grid-column-gap: 0rem;
    justify-content: space-between;
}
#nextPrev a #prevTitle,
#nextPrev a #nextTitle {
    color: var(--textCol);
    background-color: transparent;
    transition: background-color 0.2s ease, color 0.2s ease;
}
#prevTitle {
    /* padding-right: 0.1rem; */
}
#nextPrev a:first-of-type {
    display: flex;
    gap: 0.45rem;
}
#nextPrev a:last-of-type {
    margin-left: auto;
    padding-left: 1.25em;
}
#nextMob svg, #prevMob svg {
    width: 0.8rem;
    position: relative;
    top: 0.1em;
    fill: var(--textCol);
    transition: fill 0.2s ease;
}
#nextTitle {
    margin-right: 0.35rem;
}
#nextMob {
    display: inline-block;
    /* margin-left: 0.35rem; */
}
#nextPrev a:hover #prevTitle span,
#nextPrev a:focus-visible #prevTitle span, 
#nextPrev a:hover #nextTitle span,
#nextPrev a:focus-visible #nextTitle span,
#nextPrev a #nextTitle.hovered span,
#nextPrev a #prevTitle.hovered span {
    color: var(--hovCol);
    background-color: var(--high1);
    transition: background-color 0.2s ease, color 0.2s ease;
}

#nextPrev a:hover #nextMob svg,
#nextPrev a:focus-visible #nextMob svg,
#nextPrev a:hover #prevMob svg,
#nextPrev a:focus-visible #prevMob svg  {
    fill: var(--high1);
    transition: fill 0.2s ease;
}



/* NOTES & REFERENCES */
/* ----------------------------------------------------- */

#footnotes a, #references a {
    /* word-break: break-all; */
    white-space: pre-wrap; /* CSS3 */
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    word-wrap: break-word; /* Internet Explorer 5.5+ */
}


/* COMMENTS */
/* ----------------------------------------------------- */

#commentWrap,
#searchWrap,
#cartModal {
    position: fixed;
    right: 0;
    top: 0;
    width: var(--smWidth);
    z-index: 350;
    border-left: 1px solid var(--altGray);
    min-height: 100vh;
    max-height: 100vh;
    padding-left: var(--bodyPad);
    
    /* padding-right: var(--bodyPad); */
    background-color: var(--bgCol);
}
#cartModal {
    display: none;
}

#commentWrap {
    border-left: 0;
}
#commentWrap.closed {
    display: none;
}
#commentWrap.opened {
    display: block;
}
#cusdis_thread iframe {
    /* min-height: calc(100vh - 3.2rem); */
    min-height: calc(100vh - 0px);
    max-height: calc(100vh - 0px);
}

#closeComments,
#closeQR {
    mix-blend-mode: difference;
    position: fixed;
    right: 0;
    top: 0;
    padding: 0;
}
#closeComments svg,
#closeQR svg,
#closeSearch svg {
    transform: rotate(45deg);
    transform-origin: center;
}
#commentWrap > span {
    display: block;
    /* padding-right: 2.2rem; */
}
/* remove the little arrow for the sitemap, when the commentbox is opened */
html:has(#commentWrap.opened) #sitemap .top::before{
    opacity: 0;
    transition: opacity 0.2s ease;
    display: none;
}
html:has(#searchWrap.opened) #sitemap {
    display: none;
}


/* SEARCH FN */
/* ----------------------------------------------------- */

#searchWrap {
    display: none;
    border-left: 0;
    z-index: 303;
    background-color: ;
    background-color: transparent;
}
#searchWrap > div {
    overflow-y: scroll;
    overflow-x: hidden;
    max-height: 100dvh;
    /* padding-bottom: 0.2rem; */
}
#searchWrap > div > div {
    border-left: 1px solid var(--altGray);
    background-color: var(--bgCol);
}
/* fix for overflow */
#searchWrap:has(.pagefind-ui__message) > div > div {
    padding-bottom: 0.2rem;
}
/* switch off if there are results */
#searchWrap:has(.pagefind-ui__result) > div > div,
#searchWrap:has(.pagefind-ui__button) > div > div {
    padding-bottom: 1px;
}
#searchWrap:has(.pagefind-ui__result) .pagefind-ui__message {
    border-left: 1px solid var(--altGray);
    border-bottom: 1px solid var(--altGray);    
}
#searchWrap:has(.pagefind-ui__result) .pagefind-ui__message {
    padding-left: 1px;
}

/* title, 'search this site' */
#searchWrap span.title {
    display: inline-block;
    padding-left: 5px;
    /* border-left: 1px solid var(--altGray); */
    padding-top: 0.05rem;
    padding-bottom: 1.35rem;
    position: sticky;
    top: 0;
    background-color: var(--bgCol);
    z-index: 20;
    width: 100%;
}
.fontsize-s #searchWrap span.title {
    padding-bottom: 1.45rem;
}
.fontsize-m #searchWrap span.title {
    padding-bottom: 1.3rem;
}
.fontsize-l #searchWrap span.title,
.fontsize-xl #searchWrap span.title {
    padding-bottom: 1.25rem;
}

#searchWrap #search p {
    /* word-break: break-all; */
    white-space: pre-wrap; /* CSS3 */
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    word-wrap: break-word; /* Internet Explorer 5.5+ */
}


/* PAGEFIND UI OVERRIDES */

/* the whole form */
#search .pagefind-ui__form {
    /* margin-right: 2.5rem;
    margin-right: 5px;; */
}

/* input box */
#search .pagefind-ui__search-input {
    background-color: var(--bgCol);
    color: var(--high1);
    /* color: var(--textCol); */
    outline: 0;
    border: 0;
    margin-left: ;
    /* border-left: 1px solid var(--altGray); */
    border-bottom: 1px solid var(--altGray);
    transition: color 0.2s ease, border-color 0.2s ease;
    border-radius: 0;
    height: 1.6rem;
    font-weight: normal;
    font-size: 1rem;
    padding: 0px 4px;
    padding-right: 2.6rem !important;
    overflow-y: hidden;

    position: sticky;
    top: 2.72rem;
    z-index: 20;
}
.fontsize-s #search .pagefind-ui__search-input {
    top: 2.8rem;
    height: 1.35rem;
}
.fontsize-m #search .pagefind-ui__search-input {
    top: 2.65rem;
    height: 1.42rem;
}
.fontsize-l #search .pagefind-ui__search-input {
    top: 2.48rem;
    height: 1.3rem;
}
.fontsize-xl #search .pagefind-ui__search-input {
    top: 2.45rem;
    height: 1.25rem;
}
#search .pagefind-ui__search-input:hover,
#search .pagefind-ui__search-input:focus-visible {
    color: var(--col1);
    border-color: var(--col1);
    transition: color 0.2s ease, border-color 0.2s ease;
    outline: 0
}

/* input box's placeholder */
#search .pagefind-ui__search-input.svelte-1d60ae3::placeholder {
    color: var(--textCol);
    opacity: 0.5;
    user-select: none;
}
/* pagefind search icon */
#search .pagefind-ui__form.svelte-1d60ae3:before {
    display: none;
}
/* 'clear' msg */
#search .pagefind-ui__search-clear {
    position: fixed;
    z-index: 30;
    right: 0;
    top: auto;
    top: 0.25rem;
    top: 3rem;
    /* bottom: 0.2rem; */
    height: auto;
    border-radius: 0;
    padding: 0 0.35rem;
    padding-right: 0.35rem;
    color: var(--textCol);
    background-color: var(--bgCol);
    transition: color 0.2s ease;
    font-size: 0.8rem;
    /* display: none; */
    user-select: none;
}
.fontsize-m #search .pagefind-ui__search-clear {
    top: 2.9rem;
}
.fontsize-l #search .pagefind-ui__search-clear,
.fontsize-xl #search .pagefind-ui__search-clear {
    /* top: 0.18rem; */
    top: 2.7rem;
}

/* 'clear' hoverstyle */
#search .pagefind-ui__search-clear:hover,
#search .pagefind-ui__search-clear:focus-visible {
    color: var(--col1);
    transition: color 0.2s ease;
    outline: 0
}   

/* SEARCH RESULTS */

#search .pagefind-ui__drawer {

}
/* target only when there's results */
#search:has(.pagefind-ui__result) .pagefind-ui__drawer {
    padding-left: 5px;
}
#search .pagefind-ui__results-area {
    margin-top: 0;
}
/* no. of results*/
#search .pagefind-ui__message {
    font-weight: normal;
    padding: 0;
    color: var(--textCol);
    padding-left: 3px;;
    padding-right: 8px;;
    margin-bottom: 0;
    font-size: 1rem;
    font-size: 0.8rem;
    font-style: italic;
    padding-top: 0.3rem;
    /* padding-bottom: 0.15rem; */
    display: inline-block;
}
#search .pagefind-ui__message.svelte-1d60ae3 {
    height: auto;
    /* line-height: 1.4;
    line-height: 1; */
    line-height: 1.5;
}
.fontsize-xs #search .pagefind-ui__message.svelte-1d60ae3 {
    line-height: 1.4;
}


/* list ol */
#search .pagefind-ui__results {
}
#search .pagefind-ui__results p {
    font-size: 1rem;
    color: var(--textCol);
    line-height: 1.2;
}
/* list-items li */
#search .pagefind-ui__result {
    border-top: 0;
    border: 0;
    border-bottom: 1px solid var(--altGray);
    border-left: 1px solid var(--altGray);
    padding: 0;
    /* padding-left: 5px; */
    /* padding-top: 0.15rem; */
    padding-bottom: 1.4rem;
    /* padding-bottom: 5px; */
    padding-right: 0.5rem;
    /* gap: 0.5rem;
    gap: 0.2rem; */
    gap: 0px;
}
/* switch off for load more btn */
#searchWrap:has(.pagefind-ui__button) .pagefind-ui__result:last-of-type {
    border-bottom: 1px;
}
#search .pagefind-ui__result-inner {
    margin-top: 0;
    /* flex-shrink: 1; */
    /* flex-grow: 0; */
    word-wrap: break-word;
    min-width: 20px;
}
#search .pagefind-ui__result:first-of-type {
    /* margin-top: 1.6rem; */
    /* padding-top: 5px; */
    border-top: 0;
}
#search .pagefind-ui__result:last-of-type {
    padding-bottom: 0;
}


/* page excerpt */
#search .pagefind-ui__result-excerpt {
    min-width: 20px;
    margin-top: -1px;
    transition: background-color 0.2s ease;
}
#search .pagefind-ui__result-excerpt::after {
    content: "\00A0 ..."
}

/* li thumbnail */
#search .pagefind-ui__result-thumb {
    position: static;

    width: calc(4rem - 1px);
    min-width: calc(4rem - 1px);
    max-width: calc(4rem - 1px);

    margin-top: 0rem;
    display: flex;
    align-items: center;
    /* aspect-ratio: 4 / 3; */
    aspect-ratio: auto;
    /* padding: 0.5rem 0px; */
    padding: 1px;
    padding-right: 2px;
    transition: background-color 0.2s ease;
}
#search .pagefind-ui__result-image {
    position: static;
    transform: translate(0);
    border-radius: 0;
    /* aspect-ratio: 4 / 3; */
    aspect-ratio: none;
    object-fit: cover;
    margin: 0;
    width: 100%;
    border: 1px solid var(--altGray);
    /* max-height: none;
    aspect-ratio: none; */
}

/* result title*/
#search .pagefind-ui__result-title a {
    font-size: 1rem;
    font-weight: normal;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: var(--textCol);
    text-underline-offset: 0.2em;
    color: var(--high1);
    transition: color 0.2s ease, background-color 0.2s ease;
    /* color: var(--textCol); */
}
#search .pagefind-ui__result-title {
    /* margin-top: 0.3rem; */
    margin-top: 0.1rem;
}

/* hoverstyles */
#search .pagefind-ui__result-title:hover a, 
#search .pagefind-ui__result-title:focus-visible a {
    background-color: var(--high1);
    color: var(--bgCol);
    transition: color 0.2s ease, background-color 0.2s ease;
}
/* change bg colour for img and excerpt */
#search .pagefind-ui__result:has(.pagefind-ui__result-title:hover) .pagefind-ui__result-thumb, 
#search .pagefind-ui__result:has(.pagefind-ui__result-title:focus-visible) .pagefind-ui__result-thumb,
#search .pagefind-ui__result:has(.pagefind-ui__result-title:hover) .pagefind-ui__result-excerpt,
#search .pagefind-ui__result:has(.pagefind-ui__result-title:focus-visible) .pagefind-ui__result-excerpt {
    background-color: var(--high1);
    color: var(--hovCol);
    transition: color 0.2s ease, background-color 0.2s ease;
}
#search .pagefind-ui__result:has(.pagefind-ui__result-title:hover) mark,
#search .pagefind-ui__result:has(.pagefind-ui__result-title:focus-visible) mark {
    background-color: transparent;
    color: var(--hovCol);
    transition: color 0.2s ease, background-color 0.2s ease;
}

#search:has(.pagefind-ui__result-title:hover a) .pagefind-ui__result, 
#search:has(.pagefind-ui__result-title:focus-visible a) .pagefind-ui__result {
    /* background-color: var(--high1);
    transition: background-color 0.2s ease; */
    /* opacity: 0.7;
    transition: opacity 0.2s ease; */
}
#search:has(.pagefind-ui__result-title:hover a) .pagefind-ui__result:has(.pagefind-ui__result-title:hover a), 
#search:has(.pagefind-ui__result-title:focus-visible a) .pagefind-ui__result:has(.pagefind-ui__result-title:hover a) {
    opacity: 1;
}
/* repeated result link*/
#search .pagefind-ui__result-nested .pagefind-ui__result-link {
    display: none;
}
#search .pagefind-ui__result-nested {
    padding-left: 0;
}
#search .pagefind-ui__result-nested.svelte-4xnkmf.svelte-4xnkmf:first-of-type {
    padding-top: 0;
}

/* text highlight */
#search mark {
    background-color: var(--selBg);
    color: var(--selCol);
    transition: color 0.2s ease, background-color 0.2s ease;
}

/* 'load more' button */
#search .pagefind-ui__button {
    margin: 0;
    padding: 0.2rem 5px;
    margin-top: 0.4rem;
    height: auto;
    width: 7.2rem;
    color: var(--textCol);
    background-color: transparent;
    font-weight: normal;
    font-size: 0.8rem;
    border: 1px solid var(--altGray);
    border-radius: 0;
    outline: 0;
    transition: color 0.2s ease, border-color 0.2s ease;
}
#search .pagefind-ui__button:hover,
#search .pagefind-ui__button:focus-visible {
    color: var(--col1);
    border-color: var(--col1);
    transition: color 0.2s ease, border-color 0.2s ease;
    outline: 0
}



/* FOOTER */
/* ----------------------------------------------------- */

footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    padding: 0 var(--bodyPad);
    padding-right: 8px;
    padding-bottom: calc(0.2rem + 1px);
    position: relative;
    bottom: -1px;
    z-index: 500;
    /* top: 0.8rem; */
    background-color: var(--bgCol);
}

#footer > div {
    /* margin-bottom: 0.2rem; */
}
.footerL {
    margin-right: 20px;
}
.footerL span {
    display: inline-block;
}
.footerR {
    background-color: ;
    display: block;
    user-select: none;
}
.footerR > div,
.footerFns > div {
    display: inline-block;
}
.footerFns {
    background-color: ;
}

/* footer functions: #darkMode button */
/* ------------------ */
#darkMode {
    background-color: ;
    position: relative;
    top: 1px;
    display: inline-block;
    background-color: ;
}
#darkMode input {
    display: none;
}
#darkMode label {
    border: 1px solid var(--textCol);
    background-color: var(--bgCol);
    border-radius: 1rem;
    width: 1.75rem;
    height: 0.9rem;
    display: inline-block;
    cursor: pointer;
    display: ;
    position: relative;
    transition: border-color 0.2s ease;
}
/* the dot */
#darkMode label::after {
    content: '';
    position: absolute;
    height: calc(0.9rem - 8px);
    width: calc(0.9rem - 8px);
    background-color: var(--textCol);
    border-radius: 100px;
    top: 3px;
    right: 3px;
    left: auto;
    transition: left 0.2s ease, right 0.2s ease, width 0.2s ease, background-color 0.2s ease;
}
/* the dot shifts */
#darkMode input:checked + label::after {
    right: auto;
    left: 3px;
}

/* the button */
#darkMode > button {
    background-color: ;
    /* margin: 0; */
    padding: 0 0.25rem;
    position: relative;
    left: 0.25rem;
}
#darkMode > button svg {
    width: 0.8rem;
    fill: var(--textCol);
    position: relative;
    bottom: 1px;
    transition: fill 0.2s ease;
}

/* hoverstyles */
#darkMode label:hover,
#darkMode label:focus-visible,
#darkMode:has(button:hover) label,
#darkMode:has(button:focus-visible) label {
    border-color: var(--col1);
    transition: border-color 0.2s ease;
    outline: 0
}
#darkMode label:hover::after,
#darkMode label:focus-visible::after,
#darkMode:has(button:hover) label::after,
#darkMode:has(button:focus-visible) label::after {
    background-color: var(--col1);
    transition: left 0.2s ease, right 0.2s ease, width 0.2s ease, background-color 0.2s ease;
    width: calc(0.9rem - 7px);
}
#darkMode input:checked:hover + label::after,
#darkMode input:checked:focus-visible + label::after {
    background-color: var(--col1);
}

#darkMode:has(label:hover) svg,
#darkMode:has(label:focus-visible) svg {
    fill: var(--col1);
    transition: fill 0.2s ease;
}
#darkMode > button:hover svg,
#darkMode > button:focus-visible svg {
    fill: var(--col1);
    transition: fill 0.2s ease;
}

/* footer icons */
/* ------------------ */
.footerR .icons {
    display: ;
    background-color: ;
    display: inline-flex;
    align-items: center;
    background-color: ;

    background-color: ;
    margin-top: 0.2rem;
}
footer .icons div {
    display: inline-block;
    background-color: ;
    width: 1rem;
    position: relative;
    bottom: 0px;
}
.icons div {
    /* margin-right: 0; */
}
/* gmail */
.icons .gmail {
    background-color: ;
    width: 1.2rem;
    margin-right: 0.8rem;
    /* bottom: 1px; */
}
/* insta */
.icons .insta {
    width: 0.95rem;
    /* margin-right: 0.2rem; */
    top: 0.06rem;
}
/* patreon */
#footerFns .icons div:last-of-type {
    margin-right: 0;
}
footer svg {
    fill: var(--textCol);
    transition: 0.2s ease;
}
footer .icons a:hover svg,
footer .icons a:focus-visible svg {
    fill: var(--high1);
    transition: 0.4s ease;
}
footer .icons a:focus-visible {
    outline: 0;
}
footer.icons::before {
    content: "---";
    color: var(--high1);
}



/* 404 PAGE */
/* ----------------------------------------------------- */
#fourOhFour .pagelinks {
    padding-left: 2.4rem;
}
#fourOhFour .pagelinks li {
    background-color: ;
    text-indent: -3.7rem !important;
    padding-left: 3.7rem;
}
.fourOhFourPageCestors span {
    display: none;
}
.fourOhFourPageCestors span:last-of-type {
    display: inline;
}

.exploreTags .postTag {
    margin-bottom: 0.4rem;
}



/* MEDIA QUERIES */
/* ----------------------------------------------------- */

/* AFTER BREAKPOINT 1: 180px */
/* ------------------ */
/* sitenav & sitemap turn up as pos: fixed */
@media(min-width: 180px) {
    .smTitleMobile {
        display: none;
    }
    #siteNav,
    #siteNavRepl {
        display: block;
        position: fixed;
        right: 0;
        top: 0;
        z-index: 300;
    }
    #sitemap {
        position: fixed;
        z-index: 200;
        top: 0;
        right: 0;
        padding-left: var(--bodyPad);
        overflow-y: scroll;
    }
    #sitemap > div {
        background-color: var(--bgCol);
        padding-right: calc(100% * 2/24);
        padding-right: var(--bodyPad);
        padding-right: 10px;
    }
    #sitemap.opened {
        display: block;
    }
    #sitemap.closed {
        display: none;
    }
    body > .spacer:last-of-type {
        display: none;
    }
    #searchWrap:has(.pagefind-ui__result) {
        padding-bottom: 6.66rem;
    }
}
/* AFTER BREAKPOINT 1B: 240px */
/* ------------------ */
/* siteheader is pos: sticky.
different breakpoint due siteheader breaking into 2 lines */
@media(min-width: 240px) {
    #siteheader {
        position: sticky;
        top: -1.36rem;
        z-index: 200;
        /* left: 0; */
    }
    .indexgrid {
        display: grid;
        align-items: start;
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        grid-column-gap: var(--bodyPad);
        grid-column-gap: 0.6rem;
    }

    #sitemap > div {
        padding-right: calc(100% * 4/24);
        padding-right: 2.5rem;
    }
    /* search button */
    #toggleSearch {
        display: none;
    }
    #toggleSM.opened + #toggleSearch {
        display: block;
    }
    #toggleSearch,
    #iconSearch {
        width: 1.35rem;
        margin-left: auto;
        margin-right: 0.5rem;
        margin-top: 0.05rem;
        opacity: 0.8;
    }
    .fontsize-m #toggleSearch,
    .fontsize-m  #iconSearch {
        margin-top: -0.05rem;
    }
    .fontsize-l #toggleSearch,
    .fontsize-l  #iconSearch,
    .fontsize-xl #toggleSearch,
    .fontsize-xl  #iconSearch {
        margin-top: -0.3rem;
    }

    #toggleSearch:hover,
    #toggleSearch:focus-visible {
        opacity: 1;
        outline: 0
    }
    /* searchwrap, once opened*/
    #searchWrap.opened {
        display: block;
    }
    #iconSearch {
        cursor: default;
        display: block;
    }

    /* thumbnail options */
    #sitemap #smThumbOps {
        /* display: block; */
        display: none;
        border-left: 0 !important;

        position: fixed;
        top: 0;
        right: 2.3rem;

        background-color: ;
        padding: 0;
        /* padding-top: 0.2rem; */
    }
    /* turns up only when top-level details/summary is opened */
    body:has(#sitemap ul>details[open]) #smThumbOps {
        display: block;
    }
    #smThumbOps button {
        line-height: 0;

        border: 0;
        outline: 0;
        padding: 0.25rem 0.2rem;
        padding-top: 0.35rem;
        margin: 0;
        background-color: var(--bgCol);
    }
    .fontsize-l #smThumbOps button,
    .fontsize-xl #smThumbOps button {
        padding: 0.2rem 0.2rem;
        padding-top: 0.25rem;
    }

    #smThumbOps svg {
        width: 0.9rem;
        fill: var(--textCol);
        transition: fill 0.2s ease;
    }
    #smThumbOps button:hover svg,
    #smThumbOps button:focus-visible svg {
        fill: var(--col1);
        transition: fill 0.2s ease;
    }
    button#showGrid {
        display: ;
        /* margin-top: -0.4rem; */
    }
    button#showList {
        /* display: none; */
        /* margin-right: -0.2rem; */
    }
}

/* AFTER BREAKPOINT 1C: 333px and up to BREAKPOINT 2B: 480px */
/* ------------------ */
/* searchwrap padding-right */
@media(min-width: 333px) and (max-width: 480px){
    /* pagefind results ol */
    #search .pagefind-ui__results {
        padding-right: 2.5rem; /* switches off after 480px*/
    }
}

/* UP TO BREAKPOINT 2: 360px, AND AFTER BREAKPOINT 1 */
/* ------------------ */
/* max-height on sitemap */
@media(min-width:180px) and (max-width: 360px) {
    #sitemap {
        min-height: 100dvh;
        max-height: 100dvh;   
        padding-bottom: 3.6rem; 
    }
    html:has(.dblLineFooter) #sitemap {
        padding-bottom: 6.3rem;
    }

    #searchWrap > div {
        padding-bottom: 3.6rem; 
    }
    html:has(.dblLineFooter) #searchWrap > div {
        padding-bottom: 6.3rem;
    }

}

/* UP TO BREAKPOINT 2: 360px */
/* break long links on v narrow viewports */
/* ------------------ */
@media(max-width: 360px) {
    main > div a {
        /* word-break: break-all; */
        white-space: pre-wrap; /* CSS3 */
        white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
        white-space: -pre-wrap; /* Opera 4-6 */
        white-space: -o-pre-wrap; /* Opera 7 */
        word-wrap: break-word; /* Internet Explorer 5.5+ */
    }
    .postTag {
        /* display: inline; */
    }
}

/* AFTER BREAKPOINT 2: 360px */
/* ------------------ */
/* siteheader is pos: fixed */
/* main gets a margin-right, sitemap has a margin left */
@media(min-width: 360px) {
    :root {
        --smWidth: calc(21/24 * 100% - 1rem)
    }
    #sitemap {
        /* padding-left: 1rem; */
        max-height: 100dvh;
        min-height: 100dvh;

        /* padding-bottom: 1.8rem; */
        padding-bottom: 2rem;
    }
    html:has(.dblLineFooter) #sitemap {
        padding-bottom: 4.2rem;
    }

    #searchWrap > div {
        /* padding-bottom: 1.8rem; */
        padding-bottom: 2rem;
    }
    html:has(.dblLineFooter) #searchWrap > div {
        padding-bottom: 4.2rem;
    }

    main {
        padding-right: calc(100% * 2/24);
    }    
    #commentWrap {
        width: var(--smWidth);
        border-left: 1px solid var(--altGray);
    }
    #searchWrap {
        min-height: auto;
        padding-left: 0;
        width: var(--smWidth);
    }
    #searchWrap > div {
        /* border: 0; */
    }
    #searchWrap:has(.pagefind-ui__result) {
        /* padding-bottom: 3.6rem; */
    }
    
}

/* AFTER BREAKPOINT 2: 360px and up to BREAKPOINT 2B: 480px */
/* ------------------ */
/* searchwrap padding-right */
@media(min-width: 360px) and (max-width: 480px){
    #sitemap {
        padding-left: 0;
    }
}
/* AFTER BREAKPOINT 2B: 480px */
/* ------------------ */
/* page anchors come in */
@media(min-width: 480px) {
    :root {
        --smWidth: calc(18/24 * 100%);
    }
    main {
        padding-right: calc(100% * 3/24);
    }
    #sitemap {
        padding-left: 1rem;    
    }
    html:has(.dblLineFooter) #sitemap {
        padding-bottom: 3.2rem;
    }
    #sitemap > div {
        padding-right: calc(100% * 4/24);
        /* padding-right: 2.5rem; */
    }
    #searchWrap {
        width: calc(var(--smWidth) - 1rem);
    }
    #commentWrap {
        width: calc(var(--smWidth) - 1rem);
    }
    #searchWrap > div {
    }
    html:has(.dblLineFooter) #searchWrap > div {
        padding-bottom: 3.2rem;
    }

    #viewOps > #anchors {
        position: fixed;
        /* top: 5.5rem; */
        right: 0.7rem;
        display: flex;
        gap: 0;
        max-height: calc(100vh - 5.5rem);
        flex-direction: column;
        flex-wrap: wrap;
        align-content: start;
        transition: opacity 0.2s ease;
        /* display: none; */
    }
    .fontsize-xs #viewOps > #anchors {
        top: 5.75rem;
    }
    .fontsize-s #viewOps > #anchors {
        top: 5.5rem;
    }
    .fontsize-m #viewOps > #anchors {
        top: 5.4rem;
    }
    .fontsize-l #viewOps > #anchors {
        top: 5rem;
    }
    .fontsize-xl #viewOps > #anchors {
        top: 4.8rem;
    }
    #search .pagefind-ui__form {
        margin-right: calc((100% * 4/24) + 0.4rem);
        margin-right: calc((100% * 4/24) + 0rem);
    }
    #search .pagefind-ui__search-clear {
        right: calc(100% * 3/24)
    }
    
    /* HOVER ARROWS ON SITEMAP SUBSECTION TITLES */
    #sitemap .top {
        position: relative;
    }
    #sitemap .top::before {
        content: "\25B7";
        font-size: 0.55rem;
        position: absolute;
        left: -0.8rem;
        top: 0.3rem;
        opacity: 0; 
        transition: opacity 0.4s ease;
    }
    
    #sitemap .top:hover::before,
    #sitemap .top:focus-visible::before,
    #sitemap details:hover .top::before,
    #sitemap details:focus-visible .top::before,
    #sitemap summary.hovered::before,
    #sitemap h3:has(.hovered)::before {
        opacity: 1;
        transition: opacity 0.4s ease;
    }
    #sitemap #currentSection::before {
        content: "\25B6";
        opacity: 1;
        font-size: 0.55em;
    }
}

/* UP TO BREAKPOINT 3: 650px, AND AFTER BREAKPOINT 1 */
/* ------------------ */
/* remove nametext when menu is open + 
tweaks to textOps positioning */
@media(min-width:180px) and (max-width: 650px) {
    html:has(#sitemap.opened) .nameText {
        display: none;
    }
    html:has(#sitemap.opened) #siteheader {
        top: 0;
    }
    html:has(#sitemap.opened) #textOps {
        position: relative;
    }
    html:has(#sitemap.opened) .fontsize-s #textOps {
        top: -1px
    }
    html:has(#sitemap.opened) .fontsize-m #textOps {
        top: -1px;
    }
    html:has(#sitemap.opened) .fontsize-l #textOps {
        top: -0.15rem;
        top: calc( (-1) * 0.13rem - 1px);
    }
    html:has(#sitemap.opened) .fontsize-xl #textOps {
        top: -0.2rem;
        top: calc( (-1) * 0.18rem - 1px);
    }

    html:has(#sitemap.opened) .fontsize-xs #pageHeader {
        margin-top: 4.35rem;
    }
    html:has(#sitemap.opened) .fontsize-s #pageHeader {
        margin-top: 4.15rem;
    }
    html:has(#sitemap.opened) .fontsize-m #pageHeader {
        margin-top: 4.05rem;
    }
    html:has(#sitemap.opened) .fontsize-l #pageHeader {
        margin-top: 3.6rem;
    }
    html:has(#sitemap.opened) .fontsize-xl #pageHeader {
        margin-top: 3.4rem;
    }

    .indexgrid {
        grid-template-columns: repeat(auto-fill, minmax(135px, 1fr));
        gap: 6px;
    }   
    
}

/* UP TO BREAKPOINT 3: 650px, AND AFTER BREAKPOINT 2B */
/* ------------------ */
/* tweaks to thumbOps positioning */
@media(min-width:480px) and (max-width: 650px) {
    .fontsize-xs #sitemap #smThumbOps,
    .fontsize-s #sitemap #smThumbOps {
        right: auto;
        left: calc((100vw * 21/24) - 0.2rem );
    }    
    /* on prints/shop page, reposition anchors to not clash with the cart icon */
    html:has(#shopPage) .fontsize-xs #anchors {
        margin-top: 1.7rem;
    }
    html:has(#shopPage) #anchors {
        margin-top: 1.6rem;
    }
    html:has(#shopPage) .fontsize-l #anchors,
    html:has(#shopPage) .fontsize-xl #anchors {
        margin-top: 2.2rem;
    }

    .indexgrid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        /* gap: 0.4rem; */
    }   

}

/* UP TO BREAKPOINT 3: 650px */
/* ------------------ */
/* remove nametext when menu is open */
@media(max-width: 650px) {
    #navCov,
    #commentBG,
    #cartCov {
        opacity: 1;
    }

    .zoomIn:hover > img.noFullscreen,
    .zoomIn:focus-visible > img.noFullscreen ,
    .zoomIn:hover > div:has(svg),
    .zoomIn:focus-visible > div:has(svg) {
        opacity: 1;
        transition: opacity 0.2s ease;
    }


}
/* AFTER BREAKPOINT 3: 650px */
/* ------------------ */
/* d:flex on siteheader.
textOps is pos: fixed; widthOps comes in.
sitemap gets halved.
nextprev buttons appear as pos:sticky */
@media(min-width: 650px) {
    :root {
        --smWidth: calc(12/24 * 100%);
        --mainWidth: calc(16/24 * 100%);
    }
    #siteheader {
        position: fixed;
        top: 0;
        left: 0;
        display: flex;
        justify-content: space-between;
        background-color: ;
    }
    .nameText {
        position: static;
    }

    html:has(.dblLineFooter) #sitemap,
    html:has(.dblLineFooter) #searchWrap > div {
        padding-bottom: 2.1rem;
    }
    #sitemap > div {
        /* padding-right: calc(100% * 4/24); */
        padding-right: 2.5rem;
    }

    /* PAGE HEADER */
    .fontsize-xs #pageHeader {
        margin-top: 4.35rem;
    }
    .fontsize-s #pageHeader {
        margin-top: 4.2rem;
    }
    .fontsize-m #pageHeader {
        margin-top: 4.1rem;
    }
    .fontsize-l #pageHeader {
        margin-top: 3.8rem;
    }
    .fontsize-xl #pageHeader {
        margin-top: 3.7rem;
    }


    /* SEARCH */
    #search .pagefind-ui__form {
        margin-right: 0;
    }
    #searchWrap:has(.pagefind-ui__result) {
        padding-bottom: 1.8rem;
    }
    #search .pagefind-ui__search-clear {
        right: 0;
    }

    /* MAIN MARGINS + SPACING */
    /* ------------------ */
    main {
        padding: 0;
        width: calc(16/24 * 100%);
        margin: 0 calc(4/24 * 100%);
    }
    /* narrow */
    #bodyCol.narrow main {
        width: calc(12/24 * 100%);
        margin: 0 calc(6/24 * 100%);
    }
    /* wide */
    #bodyCol.wide main {
        width: calc(22/24 * 100%);
        margin: 0 calc(1/24 * 100%);

        /* margin: 0 calc(2/24 * 100%);
        margin-left: 0; */
    }

    /* TEXT OPS, WIDTH OPS, ANCHORS: */
    /* ------------------ */

    /* TEXT OPS */
    #textOps {
        position: fixed;
        right: calc(100% * 6/24);
        width: calc(100% * 3/24);;
        display: flex;
        justify-content: center;
        /* background-color: antiquewhite; */
        /* justify-content: end; */
    }
    html:has(#sitemap.opened) #textOps,
    html:has(#commentWrap.opened) #textOps,
    html:has(#cartModal.cartOpened) #textOps {
        right: calc(100% * 12/24);
        margin-right: -0.2rem;
    }

    /* WIDTH OPS */
    #viewOps #widthOps {
        position: fixed;
        top: 0;
        left: calc(100% * 18/24);
        width: calc(100% * 3/24);;
        display: flex;
        align-items: center;
        /* background-color: burlywood; */
        /* justify-content: end; */
    }

    /* ANCHORS */
    #viewOps {
        position: fixed;
        left: calc(100% * 20/24);
    }
    #viewOps #anchors {
        padding-left: 0.6em;
        position: relative;
        align-content: start;
        width: calc(100vw * 3/24);
        /* background-color: darkblue; */
        right: auto;
    }
    .fontsize-xs #viewOps > #anchors {
        top: 4.5rem;
    }
    .fontsize-s #viewOps > #anchors {
        top: 4.3rem;
    }
    .fontsize-m #viewOps > #anchors {
        top: 4.25rem
    }
    .fontsize-l #viewOps > #anchors {
        top: 3.8rem;
    }
    .fontsize-xl #viewOps > #anchors {
        top: 3.63rem;
    }
    
    /* narrow */
    #bodyCol.narrow #viewOps {
        left: calc(100% * 18/24);
    }
    #bodyCol.narrow #viewOps #anchors {
        padding-left: 0.85em;
    }

    /* wide */
    #bodyCol.wide #viewOps {
        left: auto;
        right: 0.7rem;
    }
    #bodyCol.wide #viewOps #anchors {
        width: calc(100vw * 1/24);
        background-color: ;
        align-items: end;
        align-content: end;
    }

    /* SPACING */
    #viewOps br {
        display: block;
    }
    #main > div:first-of-type > br:first-of-type,
    #main > div:first-of-type > br:nth-of-type(2) {
        /* display: block; */
    }
    
    /* ACTIVATE STICKY ARROWS FOR PAGENEXT & PAGEPREV */
    #nextPrevBtns .nextPrevBtn {
        display: block;
    }
    #nextMob, #prevMob {
        display: none;
    }
    #nextPrevBtns {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        grid-column-gap: 1rem;
        justify-content: space-between;
        /* display: none; */
    }
    .nextPrevBtn svg {
        fill: var(--textCol);
        opacity: 1;
        width: 1.6rem;
        padding: 2px;
        transition: fill 0.2s ease;
    }
    .nextPrevBtn:hover svg,
    .nextPrevBtn:focus-visible svg,
    #prevBtn.hovered svg,
    #nextBtn.hovered svg {
        fill: var(--high1);
        transition: fill 0.2s ease;
    }
    html.light .nextPrevBtn:hover svg,
    html.light .nextPrevBtn:focus-visible svg,
    html.light #prevBtn.hovered svg,
    html.light #nextBtn.hovered svg {
        fill: var(--bgCol);
    }
    #nextPrev a:focus-visible {
        outline: 0;
    }


    /* previous page button */
    #nextPrevBtns a:last-of-type {
        margin-left: auto;
        padding-left: 1.25em;
    }
    /* next prev titles */
    #nextPrev {
        display: flex;
        justify-content: space-between;
        flex-wrap: nowrap;
        position: relative;
        top: 1.35rem;
        z-index: 20;
        gap: 0.5rem;
        align-items: end;
    }
    #nextPrev a {
        text-decoration: none;
        /* color: var(--textCol); */
        display: flex;
    }
    #nextPrev a:has(#prevTitle) {
        justify-content: end;
    }
    #nextTitle, #prevTitle {
        margin-right: 1.9rem;
        display: inline;
        line-height: 1.2;
        flex-shrink: 1;
        text-align: right;
        padding-bottom: 0.02rem;
    }
    #prevTitle {
        text-align: left;
        margin-right: 0;
        margin-left: 1.9rem;
    }
    #nextPrevBtns {
        display: flex;
        position: sticky;
        bottom: 0;
        mix-blend-mode: difference;
        /* z-index: 500; */
    }
    #nextPrev {
        position: relative;
        /* z-index: 505; */
    }

    body > .spacer:nth-last-of-type(2) {
        display: none;
    }

}

/* UP TO BREAKPOINT 4: 800px, AND AFTER BREAKPOINT 1: 180px */
/* ------------------ */
@media(min-width: 180px) and (max-width: 800px) {
    #navCov,
    #commentBG,
    #cartCov {
        display: none;
        position: fixed;
        width: 100vw;
        height: 100vh;
        left: 0;
        top: 0;
        background-color: var(--bgCol);
        /* background-color: transparent; */
        z-index: 101;
    }
}
/* UP TO BREAKPOINT 4: 800px, AND AFTER BREAKPOINT 2: 360px */
/* ------------------ */
@media(min-width: 360px) and (max-width: 800px) {
    #navCov,
    #commentBG,
    #cartCov {
        opacity: 0.93;
    }
}
/* UP TO BREAKPOINT 4: 800px, AND AFTER BREAKPOINT 3: 650px */
/* ------------------ */
/* searchwrap padding */
@media(min-width: 650px) and (max-width: 800px) {
    /* pagefind results ol */
    #search .pagefind-ui__results {
        padding-right: 2.5rem; /* switches off after 800px ?*/
    }
    .fontsize-l #search .pagefind-ui__results,
    .fontsize-xl #search .pagefind-ui__results {
        padding-right: 0;
    }
    .indexgrid {
        grid-template-columns: repeat(auto-fill, minmax(135px, 1fr));
        grid-column-gap: 0.6rem;
    }   
}

/* UP TO BREAKPOINT 4: 800px */
/* ------------------ */
@media(max-width: 800px) {
    #commentBG {
        display: none;
        position: fixed;
        width: 100vw;
        height: 100vh;
        left: 0;
        top: 0;
        background-color: var(--bgCol);
        /* background-color: transparent; */
        z-index: 50;
    }
    html:has(#sitemap.opened) #viewOps #anchors,
    html:has(#commentWrap.opened) #viewOps #anchors,
    html:has(#cartModal.cartOpened) #viewOps #anchors {
        display: none;
    }
}
/* AFTER BREAKPOINT 4: 800px */
/* ------------------ */
/* sitemap gets right column.
page converts to 2-col layout when sm is opened.
*/
@media(min-width: 800px) {
    :root {
        --smWidth: calc(8/24 * 100%);
        --mainWidth: calc(15/24 * 100%);
        --mainMargin: calc(100% * 1/24);;
        --mainMLeft: 0px;
    }
    #sitemap > div {
        padding-right: 0;
        padding-right: calc(100vw * 2/24);
    }
    #sitemap {
        /* padding-right: calc(100% * 2/24); */
        padding-bottom: 0;
        min-height: calc(100dvh - 2rem);
        max-height: calc(100dvh - 2rem);
    }

    .indexgrid {
        grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
        gap: 0.5rem;
    }


    /* thumbnail options */
    #sitemap #smThumbOps {
        right: 2.75rem;
    }
    .fontsize-xs #sitemap #smThumbOps {
        right: auto;
        left: calc((100vw * 22/24) );
    }

    html:has(.dblLineFooter) #sitemap,
    html:has(.dblLineFooter) #searchWrap > div,
    html:has(.updatesFooter) #sitemap,
    html:has(.updatesFooter) #searchWrap > div {
        padding-bottom: 0;
        min-height: calc(100dvh - 4rem);
        max-height: calc(100dvh - 4rem);
    }
    #search .pagefind-ui__form {
        margin-right: 0;
    }
    #searchWrap {
        max-height: calc(100dvh - 4rem);
    }

    #commentWrap {
        padding-left: 0;
        border-left: 0;
    }

    .fontsize-xs #searchWrap:has(.pagefind-ui__result) {
        padding-bottom: 2rem;
    }
    .fontsize-s #searchWrap:has(.pagefind-ui__result) {
        padding-bottom: 1.8rem;   
    }
    #searchWrap:has(.pagefind-ui__result) {
        padding-bottom: 1.9rem;
    }
    .fontsize-l #searchWrap:has(.pagefind-ui__result) {
        padding-bottom: 2.75rem;
    }
    .fontsize-xl #searchWrap:has(.pagefind-ui__result) {
        padding-bottom: 1.4rem;
    }

    /* MAIN MARGINS + SPACING */
    /* ------------------ */
    main {
        width: calc(16/24 * 100%);
        margin: 0 calc(4/24 * 100%);
        margin-left: calc((4/24 * 100%) - var(--mainMLeft));
        margin-right: calc((4/24 * 100%) + var(--mainMLeft));
    }
    html:has(#sitemap.opened) main,
    html:has(#commentWrap.opened) main,
    html:has(#cartModal.cartOpened) main {
        margin-left: 0;
    }
    /* narrow */
    #bodyCol.narrow main {
        width: calc(11/24 * 100%);
        margin: 0 calc(6.5/24 * 100%);
        margin-left: calc((6.5/24 * 100%) - var(--mainMLeft));
        margin-right: calc((6.5/24 * 100%) + var(--mainMLeft));
    }
    html:has(#sitemap.opened) #bodyCol.narrow main,
    html:has(#commentWrap.opened) #bodyCol.narrow main,
    html:has(#cartModal.cartOpened) #bodyCol.narrow main {
        margin-left: calc(100% * 3/24);
    }
    /* wide */
    #bodyCol.wide main {
        width: calc(20/24 * 100%);
        margin: 0 calc(2/24 * 100%);
        margin-left: calc((2/24 * 100%) - var(--mainMLeft));
        margin-right: calc((2/24 * 100%) + var(--mainMLeft));
    }

    /* TEXTOPS, WIDTH OPS, ANCHORS: */
    /* ------------------ */

    /* TEXTOPS */
    #textOps {
        background-color: ;
        width: calc(100% * 2.5/24);
        right: calc(100% * 4/24);
        right: calc((100% * 4/24) + var(--mainMLeft));
        /* padding-left: 1rem; */
        background-color: ;
        justify-content: start;
    }
    html:has(#sitemap.opened) #textOps,
    html:has(#commentWrap.opened) #textOps,
    html:has(#cartModal.cartOpened) #textOps {
        right: calc(100% * 10/24);
        justify-content: center;
    }

    /* WIDTH OPS */
    #viewOps #widthOps {
        background-color: ;
        left: calc(100% * 20/24);
        left: calc((100% * 20/24) - var(--mainMLeft));
        /* margin-left: -0.2rem; */
    }
    html:has(#sitemap.opened) #widthOps,
    html:has(#commentWrap.opened) #widthOps,
    html:has(#cartModal.cartOpened) #widthOps {
        left: calc(100% * 14/24);
        margin-left: -0.0rem;
    }

    /* ANCHORS */
    #viewOps {
        /* background-color: aliceblue; */
        width: calc(100% * 2/24);
        left: calc(100% * 20/24);
        left: calc((100% * 20/24) - var(--mainMLeft));
    }
    #viewOps #anchors {
        padding-left: 0.8rem;
        background-color: ;
    }
    html:has(#sitemap.opened) #anchors,
    html:has(#commentWrap.opened) #anchors,
    html:has(#cartModal.cartOpened) #anchors {
        display: none;
    }

    /* narrow */
    #bodyCol.narrow #viewOps {
        left: calc(100% * 17.5/24);
        left: calc((100% * 17.5/24) - var(--mainMLeft));
    }
    #bodyCol.narrow #viewOps #anchors {
        padding-left: 0.85rem;
    }
    /* #bodyCol.narrow #viewOps {
        left: calc(100% * 18/24);
    }
    .fontsize-xs #bodyCol.narrow #viewOps #anchors {
        padding-left: 1rem;
    }

    .fontsize-l #bodyCol.narrow #viewOps #anchors,
    .fontsize-xl #bodyCol.narrow #viewOps #anchors {
        padding-left: 0.6rem;
    } */
    html:has(#sitemap.opened) #bodyCol.narrow #viewOps,
    html:has(#commentWrap.opened) #bodyCol.narrow #viewOps,
    html:has(#cartModal.cartOpened) #bodyCol.narrow #viewOps {
        left: calc(100% * 14/24);
    }
    html:has(#sitemap.opened) #bodyCol.narrow #anchors,
    html:has(#commentWrap.opened) #bodyCol.narrow #anchors,
    html:has(#cartModal.cartOpened) #bodyCol.narrow #anchors {
        display: flex;
        padding-left: 0.9em;
    }
    
    /* wide */
    #bodyCol.wide #viewOps {
        left: calc(100% * 22/24);
        left: calc((100% * 22/24) - var(--mainMLeft));
    }
    #bodyCol.wide #viewOps #anchors {
        align-items: start;
        align-content: start;;
        width: calc(100vw * 2/24);
    }

    /* GALLERY: BIGCAPTION HOVER EFFECT */
    .shop .bigCaption,
    .fontsize-l .shop .bigCaption,
    .fontsize-xl .shop .bigCaption {
        /* display: none; */
        height: 0;
        overflow: hidden;
        transition: height 0.2s ease;
    }
    .shop .zoomIn:hover ~ .bigCaption,
    .shop .zoomIn:focus-visible ~ .bigCaption {
        height: 2.8rem;
        transition: height 0.2s ease;
    }
    .fontsize-l .shop .zoomIn:hover ~ .bigCaption,
    .fontsize-xl .shop .zoomIn:hover ~ .bigCaption,
    .fontsize-l .shop .zoomIn:focus-visible ~ .bigCaption,
    .fontsize-xl .shop .zoomIn:focus-visible ~ .bigCaption {
        height: 2.5rem;
    }
    .shop .big .zoomIn ~ .bigCaption,
    .fontsize-l .shop .big .zoomIn ~ .bigCaption,
    .fontsize-xl .shop .big .zoomIn ~ .bigCaption {
        height: auto;
    }

}

/* AFTER BREAKPOINT 4B: 880px */
/* ------------------ */
@media(min-width: 880px) {
    .fontsize-s #sitemap #smThumbOps {
        right: auto;
        left: calc((100vw * 22/24) );
    }
}


/* AFTER BREAKPOINT 3 AND UP TO BREAKPOINT 5 */
/* ------------------ */
@media(min-width: 650px) and (max-width: 1024px) {

    /* on prints/shop page, reposition anchors on wide view so it doesn't clash with the cart icon */
    html:has(#shopPage) .fontsize-xs .wide #anchors {
        margin-top: 3rem;
    }
    html:has(#shopPage) .wide #anchors {
        margin-top: 2.75rem;
    }
    html:has(#shopPage) .fontsize-l .wide #anchors,
    html:has(#shopPage) .fontsize-xl .wide #anchors {
        margin-top: 3.4rem;
    }
}

/* AFTER BREAKPOINT 5: 1024px */
/* ------------------ */
@media(min-width: 1024px) {
    :root {
        --smWidth: calc(7/24 * 100%);
        --mainWidth: calc(15/24 * 100%);
        --mainMargin: calc(100% * 1/24);;
        --mainMLeft: 0px;
    }

    /* MAIN MARGINS + SPACING */
    /* ------------------ */
    main {
        width: calc(13/24 * 100%);
        margin: 0 calc(5.5/24 * 100%);
        margin-left: calc((5.5/24 * 100%) - var(--mainMLeft));
        margin-right: calc((5.5/24 * 100%) + var(--mainMLeft));
    }
    html:has(#sitemap.opened) main,
    html:has(#commentWrap.opened) main,
    html:has(#cartModal.cartOpened) main {
        margin: 0 calc(2/24 * 100%)
    }
    /* narrow */
    #bodyCol.narrow main {
        background-color:;
        width: calc(9/24 * 100%);
        margin: 0 calc(7.5/24 * 100%);
        margin-left: calc((7.5/24 * 100%) - var(--mainMLeft));
        margin-right: calc((7.5/24 * 100%) + var(--mainMLeft));
    }
    html:has(#sitemap.opened) #bodyCol.narrow main,
    html:has(#commentWrap.opened) #bodyCol.narrow main,
    html:has(#cartModal.cartOpened) #bodyCol.narrow main {
        margin-left: calc(4/24 * 100%)
    }
    /* wide */
    #bodyCol.wide main {
        background-color:;
        width: calc(17/24 * 100%);
        margin: 0 calc(3.5/24 * 100%);
        margin-left: calc((3.5/24 * 100%) - var(--mainMLeft));
        margin-right: calc((3.5/24 * 100%) + var(--mainMLeft));
    }
    html:has(#sitemap.opened) #bodyCol.wide main,
    html:has(#commentWrap.opened) #bodyCol.wide main,
    html:has(#cartModal.cartOpened) #bodyCol.wide main {
        margin: 0;
    }

    /* TEXTOPS, WIDTH OPS, ANCHORS: */
    /* ------------------ */
    
    /* TEXT OPS */
    #textOps {
        background-color: ;
        right: calc(100% * 5.5/24);
        right: calc((100% * 5.5/24) + var(--mainMLeft));
        width: calc(100% * 2/24);
        padding-left: 0;
        padding-left: 0.4rem;
        justify-content: start;
    }
    html:has(#sitemap.opened) #textOps,
    html:has(#commentWrap.opened) #textOps,
    html:has(#cartModal.cartOpened) #textOps {
        left: calc(100% * 13/24);
        /* margin-left: -0.5em; */
        justify-content: start;
        background-color:;
        padding-left: 0.4rem;
    }

    /* WIDTH OPS */
    #viewOps #widthOps {
        background-color: ;
        width: calc(100% * 2/24);
        left: calc(100% * 18.5/24);
        left: calc((100% * 18.5/24) - var(--mainMLeft));
        background-color: ;
        padding-left: 0.4rem;
    }
    html:has(#sitemap.opened) #viewOps #widthOps,
    html:has(#commentWrap.opened) #viewOps #widthOps,
    html:has(#cartModal.cartOpened) #viewOps #widthOps {
        left: auto;
        right: calc(100% * 7/24);
    }

    /* ANCHORS */
    #viewOps {
        left: calc(100% * 18.5/24);
        left: calc((100% * 18.5/24) - var(--mainMLeft));
    }
    #bodyCol.narrow #viewOps #anchors,
    #bodyCol.mid #viewOps #anchors,
    #bodyCol.wide #viewOps #anchors {
        padding-left: 1.27rem;
    }

    html:has(#sitemap.opened) #viewOps,
    html:has(#commentWrap.opened) #viewOps,
    html:has(#cartModal.cartOpened) #viewOps {
        left: calc(100% * 15/24);
        /* margin-left: -0.25em; */
    }
    html:has(#sitemap.opened) #bodyCol.mid #anchors, 
    html:has(#commentWrap.opened) #bodyCol.mid #anchors,
    html:has(#cartModal.cartOpened) #bodyCol.mid #anchors {
        padding-left: 1.27em;
        display: flex;
    }

    /* narrow */
    #bodyCol.narrow #viewOps {
        left: calc(100% * 16.5/24);
        left: calc((100% * 16.5/24) - var(--mainMLeft));
    }
    html:has(#sitemap.opened) #bodyCol.narrow #viewOps,
    html:has(#commentWrap.opened) #bodyCol.narrow #viewOps,
    html:has(#cartModal.cartOpened) #bodyCol.narrow #viewOps {
        left: calc(100% * 13/24);
        /* margin-left: -0.25em; */
    }
    html:has(#sitemap.opened) #bodyCol.narrow #anchors, 
    html:has(#commentWrap.opened) #bodyCol.narrow #anchors,
    html:has(#cartModal.cartOpened) #bodyCol.narrow #anchors {
        padding-left: 1.27em;
    }

    /* wide */
    #bodyCol.wide #viewOps {
        left: calc(100% * 20.5/24);
        left: calc((100% * 20.5/24) - var(--mainMLeft));

    }
    /* adjust anchors' left padding for fontsizes */
    /* .fontsize-xs #viewOps #anchors {
        padding-left: 1.6rem;
    }
    .fontsize-s #viewOps #anchors {
        padding-left: 1.4rem;
    }
    .fontsize-m #viewOps #anchors {
        padding-left: 1.25rem;
    }
    .fontsize-l #viewOps #anchors {
        padding-left: 1rem;
    }
    .fontsize-xl #viewOps #anchors {
        padding-left: 0.95rem;
    }
    .fontsize-l #bodyCol.narrow #viewOps #anchors,
    .fontsize-xl #bodyCol.narrow #viewOps #anchors,
    #bodyCol.narrow #viewOps #anchors {
        padding-left: 0.9rem;
    } */

}


/* UP TO BREAKPOINT 6: 1200px, AND AFTER BREAKPOINT 4: 800px */
/* ------------------ */
/* searchwrap padding */
@media(min-width: 800px) and (max-width: 1200px) {
    /* pagefind results ol */
    #search .pagefind-ui__results {
        padding-right: 2.5rem; /* switches off after 800px ?*/
        padding-right: calc(100vw * 2/24);
    }
    .fontsize-l #search .pagefind-ui__results,
    .fontsize-xl #search .pagefind-ui__results {
        padding-right: 0;
    }
}
/* BREAKPOINT 6: 1200px */
/* ------------------ */
@media(min-width: 1200px) {
    :root {
        --smWidth: calc(8/24 * 100%);
        --mainWidth: calc(12/24 * 100%);
        --mainMargin: calc(100% * 2/24);;
        --mainMLeft: 5px;
    }

    /* sm thumbnail options */
    .fontsize-m #sitemap #smThumbOps,
    .fontsize-l #sitemap #smThumbOps {
        right: auto;
        left: calc((100vw * 22/24));
    }
    /* SEARCH */
    #search .pagefind-ui__form {
        margin-right: calc(100vw * 2/24);
    }
    #search .pagefind-ui__search-clear {
        right: calc(100vw * 2/24);
    }
    .fontsize-xl #search .pagefind-ui__form {
        /* margin-right: calc(100vw * 1.5/24); */
    }

    .indexgrid {
        grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
        gap: 0.7rem;
    }   

    /* MAIN MARGINS + SPACING */
    /* ------------------ */
    main {
        margin: 0;
        padding: 0;
        margin: 0 calc(6/24 * 100%);
        margin-left: calc((6/24 * 100%) - var(--mainMLeft));
        margin-right: calc((6/24 * 100%) + var(--mainMLeft));;

        width: var(--mainWidth);
    }
    html:has(#sitemap.opened) main,
    html:has(#commentWrap.opened) main,
    html:has(#cartModal.cartOpened) main {
        padding: 0;
        margin: 0;
        background-color: ;
        margin-left: var(--mainMargin);
    }
    /* narrow */
    #bodyCol.narrow main {
        margin: 0 calc(8/24 * 100%);
        margin-left: calc((8/24 * 100%) - var(--mainMLeft));
        margin-right: calc((8/24 * 100%) + var(--mainMLeft));;

        width: calc(8/24 * 100%);
    }
    html:has(#sitemap.opened) #bodyCol.narrow main,
    html:has(#commentWrap.opened) #bodyCol.narrow main,
    html:has(#cartModal.cartOpened) #bodyCol.narrow main {
        margin-left: calc(4/24 * 100%);
        width: calc(8/24 * 100%);
    }
    /* wide */
    #bodyCol.wide main {
        margin: 0 calc(4/24 * 100%);
        margin-left: calc((4/24 * 100%) - var(--mainMLeft));
        margin-right: calc((4/24 * 100%) + var(--mainMLeft));;

        width: calc(16/24 * 100%);
    }
    html:has(#sitemap.opened) #bodyCol.wide main,
    html:has(#commentWrap.opened) #bodyCol.wide main,
    html:has(#cartModal.cartOpened) #bodyCol.wide main {
        margin-left: 0;
        width: calc(16/24 * 100%);
    }

    /* TEXTOPS, WIDTH OPS, ANCHORS: */
    /* ------------------ */
    
    /* TEXT OPS */
    #textOps {
        right: calc((100% * 6/24) + var(--mainMLeft));
    }
    html:has(#sitemap.opened) #textOps,
    html:has(#commentWrap.opened) #textOps,
    html:has(#cartModal.cartOpened) #textOps {
        left: calc(100% * 12/24);
    }

    /* WIDTH OPS */
    #viewOps #widthOps {
        left: calc((100% * 18/24) - var(--mainMLeft));
        margin: 0;
    }
    html:has(#sitemap.opened) #viewOps #widthOps,
    html:has(#commentWrap.opened) #viewOps #widthOps,
    html:has(#cartModal.cartOpened) #viewOps #widthOps {
        left: auto;
        right: calc(100% * 8/24);
    }

    /* ANCHORS */
    #viewOps {
        left: calc((100% * 18/24) - var(--mainMLeft));
    }
    html:has(#sitemap.opened) #viewOps,
    html:has(#commentWrap.opened) #viewOps,
    html:has(#cartModal.cartOpened) #bodyCol.mid #viewOps {
        left: calc(100% * 14/24);
    }

    /* narrow */
    #bodyCol.narrow #viewOps {
        left: calc((100% * 16/24) - var(--mainMLeft));
    }
    html:has(#sitemap.opened) #bodyCol.narrow #viewOps,
    html:has(#commentWrap.opened) #bodyCol.narrow #viewOps,
    html:has(#cartModal.cartOpened) #bodyCol.narrow #viewOps {
        left: calc(100% * 12/24);
    }

    /* wide */
    #bodyCol.wide #viewOps {
        left: calc((100% * 20/24) - var(--mainMLeft));
    }
    #bodyCol.wide #viewOps #anchors {
        align-items: start;
        align-content: start;;
        width: calc(100vw * 3/24);
    }

}

/* BREAKPOINT 6B: 1350px */
/* ------------------ */
@media(min-width: 1350px) {

    .indexgrid {
        background-color: ;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        /* gap: 0.7rem; */
    }    
    /* sm thumbnail options */
    .fontsize-xl #sitemap #smThumbOps {
        right: auto;
        left: calc((100vw * 22/24));
    }
}

/* BREAKPOINT 7: 1600px */
/* ------------------ */
@media(min-width: 1600px) {
    .indexgrid {
        background-color: ;
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: 0.8rem;
        gap: 0.8vw;
    }    
}



/* SELECTION */
/* ----------------------------------------------------- */
:root {
    /* --selBg: rgb(200,200,200,0.90); */
    /* --selCol: dimgray; */
    /* moved to top variables*/
}

::-moz-selection {
    background: var(--selBg);
    color: var(--selCol);
}
::selection {
    background: var(--selBg);
    color: var(--selCol);
}



/* SCROLLBARS */
/* ----------------------------------------------------- */

body {
    --scrollBG: var(--bgCol);
    --scrollOutline: var(--high1);
    --scrollWidth: 10px;
}
#sitemap,
#searchWrap > div,
#cartModal {
    --scrollWidth: 0px;
}

body,
#sitemap,
#searchWrap > div,
#cartModal {
    /* Non-Standard, But More Styling-Capable Properties */
    &::-webkit-scrollbar {
      width: var(--scrollWidth);
    }
    &::-webkit-scrollbar-thumb {
        background: var(--bgCol);
        border: 1px solid dimgray;
        border-radius: 5px;
    }
    &::-webkit-scrollbar-track {
      background: var(--scrollBG);
    }
    /* Standardized Properties */
    @supports not selector(::-webkit-scrollbar) {
      scrollbar-color: var(--high1);
      scrollbar-width: thin;
    }
}

body::-webkit-scrollbar,
#sitemap::-webkit-scrollbar,
#searchWrap > div::-webkit-scrollbar,
#cartModal > div::-webkit-scrollbar {
    width: var(--scrollWidth);
}
body::-webkit-scrollbar-thumb {
    background: var(--bgCol);
    border: 1px solid dimgray;
    border-radius: 5px;
}
body::-webkit-scrollbar-track {
    background: var(--bgCol);
}