blame | history | patch | commit | commitdiff | ignore whitespace
Jake Vanderwerf
3 hours ago 748c931c827c09bc59b776e41d27643af9cac332 
 all.css


@@ -6,8 +6,8 @@


Description: A base theme for Jake Van clients


Requires at least: 6.4


Tested up to: 6.4


Requires PHP: 7.0


Version: 1.279


Requires PHP: 8.0


Version: 1.6.0


License: GNU General Public License v2 or later


License URI: http://www.gnu.org/licenses/gpl-2.0.html


Text Domain: jv


@@ -15,158 +15,205 @@


/*************************************************************


VARIABLES


*************************************************************/


:root{


    /* Layout */


    --narrow: min(500px, 50vw);


    --maxWidth: min(768px, 65vw);


    --alignWide: min(1024px, 90vw);


    --alignMed: min(962px, 82.5vw);


:root {


    /*****************************


    Layout


    *****************************/


    --half: min(384px, 17.5vw);


    --narrow: min(500px, 62.5vw);


    --content: min(768px, 65vw);


    --wider: min(900px, 75vw);


    --wide: min(1024px, 90vw);


    --full: 100vw;


    /* Margin */


    --mr: auto;


    --ml: auto;


    --mt: 1rem;


    --mb: 1rem;


    --p-x: 1.5rem;


    --p-y: .5rem;


    --setMargin: var(--mt) var(--mr) var(--mb) var(--ml);


    --insetMargin: var(--mt) calc((var(--maxWidth) - var(--narrow)) / 2 + var(--mr)) var(--mb) var(--ml);


    --height: 4rem;


    --doubleHeight: 8rem;


    --offHeight: 5rem;


    --maxHeight: calc(100vh - var(--height) - var(--height));


    --offScreen: -200vw;




    --gap: .5rem;


    --wrap: wrap;


    /*****************************


    Sizing


    *****************************/


    --chip: 1.5rem;


    --chipchip: 3rem;


    --chip_: 2rem;


    --btn: 4rem;


    --btn_: 5rem;


    --btnbtn: 8rem;


    --maxHeight: calc(100vh - var(--btnbtn));




    /*****************************


    Flex


    *****************************/


    --dir: row;


    --justify: center;


    --align: center;


    --dir: row;


    /* Typography */


    --w: 1.2em; /** Icon **/


    --wrap: wrap;


    --gap: .5rem;




    --filter: grayscale(.3) sepia(.4);


    --dashed: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23151515' stroke-width='1' stroke-dasharray='12%2c18%2c36' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");


    --dashed-action: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23B7332E' stroke-width='1' stroke-dasharray='12%2c18%2c36' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");


    /*****************************


    Typography


    *****************************/


    --w: 1.2em; /** For icons **/




    --font-base: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;


    --heading: 'Aleo', var(--font-base);


    --body: 'Josefin Slab', var(--font-base);


    --hWeight: 900;


    --hlight: 400;


    --bWeight: 400;


    --bBold: 700;


    --bLight: 200;


    --fw-h-light: 400;


    --fw-h: 900;


    --fw-h-bold: 900;


    --fw-b-light: 200;


    --fw-b: 400;


    --fw-b-bold: 700;




    /* Font sizes */


    --enormous: calc(26vh - 4rem);


    --xxxlarge: clamp(2.5rem, 1.429rem + 2.857vw, 4rem);


    --xxlarge: clamp(2rem, 1.286rem + 1.905vw, 3rem);


    --xlarge: clamp(1.6rem, .957rem + 1.714vw, 2.5rem);


    --large: clamp(1.3rem, .6rem + 1.867vw, 2rem);


    --xmedium: clamp(1.4rem, .971rem + 1.143vw, 2rem);


    --medium: clamp(1.1rem, .993rem + .286vw, 1.25rem);


    --small: clamp(.95rem, .879rem + .19vw, 1.05rem);


    --extra-small: clamp(.75rem, 1.1337rem + -1.2278vw, .059375rem);


    /* Colours


    For best results, generate colours from base colours using: https://uicolors.app/generate/


    or sass darken/lighten by 5%: http://scg.ar-ch.org/


    For DUOTONE: https://cssduotone.com/


    */


    --mixBlendMode: darken;


    --txt-small: clamp(.75rem, 1.1337rem + -1.2278vw, .059375rem);


    --txt-x-small: clamp(.95rem, .879rem + .19vw, 1.05rem);


    --txt-medium: clamp(1.1rem, .993rem + .286vw, 1.25rem);


    --txt-x-medium: clamp(1.4rem, .971rem + 1.143vw, 2rem);


    --txt-large: clamp(1.3rem, .6rem + 1.867vw, 2rem);


    --txt-x-large:clamp(1.6rem, .957rem + 1.714vw, 2.5rem);


    --txt-xx-large: clamp(2rem, 1.286rem + 1.905vw, 3rem);


    --txt-xxx-large: clamp(2.5rem, 1.429rem + 2.857vw, 4rem);


    --txt-enormous: calc(26vh - 4rem);




    /*****************************


    Colours


    *****************************/


    --filter: grayscale(.3) sepia(.4);


    --filterNone: grayscale(0) sepia(0);




    --mix-blend-mode: darken;


    --coverBlend: overlay;


    --coverIndex: 2;


    --light-0: #fafafa;


    --light-50: #fcfbfb;


    --light-100: #f1eded;


    --light-200: #e6dfdf;


    --dark-0: #201313;


    --dark-50: #261717;


    --dark-100: #2d1b1b;


    --dark-200: #331e1e;


    --action-0: #B7332E;


    --action-50: #a32d29;


    --action-100: #8e2824;


    --action-200: #7a221f;


    --secondary-0: #E8A737;


    --secondary-50: #e59d20;


    --secondary-100: #d48f18;


    --secondary-200: #bd7f16;


    --light-0: 239,239,239;     /* #efefef; */


    --light-50: 226,226,226;    /* #e2e2e2; */


    --light-100: 213,213,213;   /* #d5d5d5; */


    --light-200: 201,201,201;   /* #c9c9c9; */




    --success: #22C55E;


    --successBack: #d4edda;


    --successText:#155724;


    --warning: #E8A737;


    --error: #EF4444;


    --errorBack: #f8d7da;


    --errorText: #721c24;


    --dark-0: 21,21,21;         /* #151515; */


    --dark-50: 34,34,34;        /* #222222; */


    --dark-100: 46,46,46;       /* #2e2e2e; */


    --dark-200: 59,59,59;       /* #3b3b3b; */




    --action-0: 255,0,128;      /* #ff0080; */


    --action-50: 255,38,146;    /* #ff2492; */


    --action-100: 255,71,164;   /* #ff47a4; */


    --action-200: 255,107,181;  /* #ff6bb5; */


    --action-contrast: var(--light-0);


    --secondary-contrast: var(--light-0);


    --light-rgb: 250,250,250;


    --dark-rgb: 16,4,4;


    --action-rgb: 183,51,46;


    --secondary-rgb: 232,167,55;




    --rgba-subtle: rgba(var(--c),.05);


    --rgba-subtle-hover: rgba(var(--c),.1);


        --action-comp: oklch(from rgb(var(--action-0)) .8 .26 h);


        --action-tri: oklch(from rgb(var(--action-0)) .82 .2 calc(h - 120));


        --action-mono: oklch(from rgb(var(--action-0)) .3 .04 h);


    --secondary-0: 214,145,33;  /* #D69121; */


    --secondary-50: 255,196,33; /* #ffc421; */


    --secondary-100: 255,205,68;/* #ffcd44; */


    --secondary-200: 255,215,104;/* #ffd768; */


    --secondary-contrast: var(--light-0);


        --secondary-comp: oklch(from rgb(var(--secondary-0)) .8 .26 h);


        --secondary-tri: oklch(from rgb(var(--secondary-0)) .82 .2 calc(h - 120));


        --secondary-mono: oklch(from rgb(var(--secondary-0)) .3 .04 h);




    --success: 76,175,80;         /* #4CAF50; */


    --successLight: 234,246,235;    /* #eaf6eb; */


    --successDark: 14,33,15;     /* #0e210f; */


    --successBack: var(--successLight);


    --successText: var(--successDark);


    --warning: 232,167,55;    /* #E8A737; */


    --warningLight: 253,247,238;/* #fdf7ee; */


    --warningDark: 52,35,6;      /* #342306; */


    --warningBack: var(--warningLight);


    --warningText: var(--warningDark);


    --error: 183,51,46;        /* #B7332E; */


    --errorLight: 250,235,234;   /* #faebea; */


    --errorDark: 40,11,10;    /* #280b0a; */


    --errorBack: var(--errorLight);


    --errorText: var(--errorDark);




    --base: var(--light-0);


    --base-50: var(--light-50);


    --base-100: var(--light-100);


    --base-200: var(--light-200);




    --contrast: var(--dark-0);


    --contrast-50: var(--dark-50);


    --contrast-100: var(--dark-100);


    --contrast-200: var(--dark-200);


    --c: var(--light-rgb);


    --base-rgb: var(--light-rgb);


    --contrast-rgb: var(--dark-rgb);




    /* Stacking */






    --contrast-comp: oklch(from rgb(var(--contrast)) .8 .26 h);


    --contrast-tri: oklch(from rgb(var(--contrast)) .82 .2 calc(h - 120));


    --contrast-mono: oklch(from rgb(var(--contrast)) .3 .04 h);


    --base-comp: oklch(from rgb(var(--base)) .8 .26 h);


    --base-tri: oklch(from rgb(var(--base)) .82 .2 calc(h - 120));


    --base-mono: oklch(from rgb(var(--base)) .3 .04 h);






    --tone-a: rgb(var(--contrast));


    --tone-b: rgb(var(--base));




    --duo-dark: oklch(from var(--tone-a) .22 c h);


    --duo-light: oklch(from var(--tone-b) .78 c h);




    --shimmer: rgba(var(--contrast),0) 0%,


    rgba(var(--contrast),.05) 50%,


    rgba(var(--contrast),0) 100%;




    --op-1: .05;


    --op-2: .15;


    --op-3: .25;


    --op-45: .45;


    --op-4: .66;


    --op-5: .75;


    --op-6: .85;




    /*****************************


    Shadows


    *****************************/


    --shdw-inset: inset 0 0 4px 1px;


    --shdw: 0 0 4px;


    --shdw-down: 0 6px 5px -5px;


    --shdw-right: 6px 0 5px -5px;


    --shdw-left: -6px 0 5px -5px;


    --shdw-up: 0 -6px 5px -5px;


    --shdw-subtle: 0 25px 20px -20px;


    --shdw-subtle-right: 10px 0 20px -20px;


    --shdw-none: transparent 0 0 0;




    /*****************************


    Stacking


    *****************************/


    --z-1: 5;


    --z-2: 10;


    --z-3: 15;


    --z-4: 20;


    --z-5: 50;


    --z-6: 100;


    --z-top: 999;


    --z-topper: 1000;


    --zz-top: 999999;


    --z-above: 9999999;


    /* Overlays */


    --rgb-subtle: .05;


    --rgb-subtle-hover: .15;


    --rgb-light: .25;


    --rgb-medium: .66;


    --rgb-heavy: .85;


    --overlay-light: rgba(var(--c), .25);


    --overlay-medium: rgba(var(--c), .66);


    --overlay-heavy: rgba(var(--c), .85);


    --shimmer: rgba(var(--dark-rgb),0) 0%,


    rgba(var(--dark-rgb),.05) 50%,


    rgba(var(--dark-rgb),0) 100%;


    /* Shadows */


    --shadow: rgba(var(--dark-rgb),.45) 0px 0px 4px;


    --shadow-down: rgba(var(--dark-rgb),.45) 0 6px 5px -5px;    /* Bottom */


    --shadow-right: rgba(var(--dark-rgb),.45) 6px 0 5px -5px;   /* Right */


    --shadow-left: rgba(var(--dark-rgb), .45) -6px 0 5px -5px;   /* Left */


    --shadow-up: rgba(var(--dark-rgb), .45) 0 -6px 5px -5px;     /* Up */


    --subtle: rgba(var(--dark-rgb), .45) 0px 25px 20px -20px;


    --subtleRight: rgba(var(--dark-rgb), .45) 10px 0 20px -20px;


    --shadow-none: transparent 0px 0px 0px;


    /* Rounding */


    --innerRadius: 4px;


    --outerPadding: 1rem;


    --outerRadius: calc(var(--innerRadius) + var(--outerPadding));


    /* Transitions */


    --function:cubic-bezier(.47,.24,.07,.47);


    --timing: .25s;


    --transition-base: var(--timing) var(--function);


    --transition-color: background-color var(--transition-base),


    color var(--transition-base), border var(--transition-base);


    --transition-transform: transform var(--transition-base);


    --transition-size: width var(--transition-base),


    height var(--transition-base),max-width var(--transition-base), max-height var(--transition-base);


    --z-7: 999;


    --z-8: 1000;


    --z-9: 999999;


    --z-10: 9999999;




    /**** SPACING ****/


    /*****************************


    Rounding


    *****************************/


    --radius: 4px;


    --p-outer: 1rem;


    --radius-outer: calc(var(--radius) + var(--p-outer));


    --p-y: var(--sp1);


    --p-x: var(--sp1);


    /*****************************


    Transitions


    *****************************/


    --trans-fn: cubic-bezier(.47,.24,.07,.47);


    --trans-t: .25s;


    --trans-base: var(--trans-t) var(--trans-fn);


    --trans-color: background-color var(--trans-base),


    color var(--trans-base), border var(--trans-base);


    --trans-transform: transform var(--trans-base);


    --trans-size: width var(--trans-base),


    height var(--trans-base),max-width var(--trans-base), max-height var(--trans-base);


    --trans-vis: opacity var(--trans-base);




    /*****************************


    Spacing


    *****************************/


    --sp1: clamp(0.5rem, 0.714vw + 0.321rem, 1rem);      /* 8px â†’ 16px */


    --sp2: clamp(0.75rem, 1.071vw + 0.482rem, 1.5rem);   /* 12px â†’ 24px */


    --sp3: clamp(1rem, 1.429vw + 0.643rem, 2rem);        /* 16px â†’ 32px */


@@ -175,91 +222,61 @@


    --sp6: clamp(3rem, 4.286vw + 1.929rem, 6rem);        /* 48px â†’ 96px */


    --sp7: clamp(4rem, 5.714vw + 2.571rem, 8rem);        /* 64px â†’ 128px */




    --offScreen: -200vw;


    /*****************************


    Scrollbar


    *****************************/


    --sb-width: 8px;


    --sb-track: rgb(var(--base-100));


    --sb-thumb: rgb(var(--action-0));


    --sb-thumb-hover: rgb(var(--action-50));


    --sb-thumb-border: 2px solid rgb(var(--base-50));


    --sb-radius: 4px;




    /*!** Icons **!*/


    /*--quote: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23000000" viewBox="0 0 256 256"><path d="M116,72v88a48.05,48.05,0,0,1-48,48,8,8,0,0,1,0-16,32,32,0,0,0,32-32v-8H40a16,16,0,0,1-16-16V72A16,16,0,0,1,40,56h60A16,16,0,0,1,116,72ZM216,56H156a16,16,0,0,0-16,16v64a16,16,0,0,0,16,16h60v8a32,32,0,0,1-32,32,8,8,0,0,0,0,16,48.05,48.05,0,0,0,48-48V72A16,16,0,0,0,216,56Z"></path></svg>');*/


    /*--minus: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="%23151515" viewBox="0 0 256 256"><path d="M208,36H48A12,12,0,0,0,36,48V208a12,12,0,0,0,12,12H208a12,12,0,0,0,12-12V48A12,12,0,0,0,208,36Zm4,172a4,4,0,0,1-4,4H48a4,4,0,0,1-4-4V48a4,4,0,0,1,4-4H208a4,4,0,0,1,4,4Zm-40-80a4,4,0,0,1-4,4H88a4,4,0,0,1,0-8h80A4,4,0,0,1,172,128Z"></path></svg>');*/


    /*--plus: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="%23151515" viewBox="0 0 256 256"><path d="M208,36H48A12,12,0,0,0,36,48V208a12,12,0,0,0,12,12H208a12,12,0,0,0,12-12V48A12,12,0,0,0,208,36Zm4,172a4,4,0,0,1-4,4H48a4,4,0,0,1-4-4V48a4,4,0,0,1,4-4H208a4,4,0,0,1,4,4Zm-40-80a4,4,0,0,1-4,4H132v36a4,4,0,0,1-8,0V132H88a4,4,0,0,1,0-8h36V88a4,4,0,0,1,8,0v36h36A4,4,0,0,1,172,128Z"></path></svg>');*/


    /*--close: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23151515" viewBox="0 0 256 256"><path d="M208,36H48A12,12,0,0,0,36,48V208a12,12,0,0,0,12,12H208a12,12,0,0,0,12-12V48A12,12,0,0,0,208,36Zm4,172a4,4,0,0,1-4,4H48a4,4,0,0,1-4-4V48a4,4,0,0,1,4-4H208a4,4,0,0,1,4,4ZM162.83,98.83,133.66,128l29.17,29.17a4,4,0,0,1-5.66,5.66L128,133.66,98.83,162.83a4,4,0,0,1-5.66-5.66L122.34,128,93.17,98.83a4,4,0,0,1,5.66-5.66L128,122.34l29.17-29.17a4,4,0,1,1,5.66,5.66Z"></path></svg>');*/


    /*--chevron: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="%23151515" viewBox="0 0 256 256"><path d="M128,28A100,100,0,1,0,228,128,100.11,100.11,0,0,0,128,28Zm0,192a92,92,0,1,1,92-92A92.1,92.1,0,0,1,128,220Zm42.83-110.83a4,4,0,0,1,0,5.66l-40,40a4,4,0,0,1-5.66,0l-40-40a4,4,0,0,1,5.66-5.66L128,146.34l37.17-37.17A4,4,0,0,1,170.83,109.17Z"></path></svg>');*/


    /*--details: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23151515" viewBox="0 0 256 256"><path d="M210.83,98.83l-80,80a4,4,0,0,1-5.66,0l-80-80a4,4,0,0,1,5.66-5.66L128,170.34l77.17-77.17a4,4,0,1,1,5.66,5.66Z"></path></svg>');*/


    /*--shop: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23151515" viewBox="0 0 256 256"><path d="M28.15,95A3.81,3.81,0,0,0,28,96v16a36,36,0,0,0,16,29.92V216a4,4,0,0,0,4,4H208a4,4,0,0,0,4-4V141.92A36,36,0,0,0,228,112V96a3.81,3.81,0,0,0-.17-1.08L213.5,44.7A12,12,0,0,0,202,36H54A12,12,0,0,0,42.5,44.7Zm22-48.08A4,4,0,0,1,54,44H202a4,4,0,0,1,3.84,2.9L218.7,92H37.3ZM100,100h56v12a28,28,0,0,1-56,0ZM36,112V100H92v12a28,28,0,0,1-41.37,24.59,4,4,0,0,0-1.31-.76A28,28,0,0,1,36,112ZM204,212H52V145.94a36,36,0,0,0,44-17.48,36,36,0,0,0,64,0,36,36,0,0,0,44,17.48Zm2.68-76.17a3.94,3.94,0,0,0-1.3.76A28,28,0,0,1,164,112V100h56v12A28,28,0,0,1,206.68,135.83Z"></path></svg>');*/


    /*--style: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23151515" viewBox="0 0 256 256"><path d="M224,92H170.61l9.33-51.28a4,4,0,1,0-7.88-1.44L162.48,92H106.61l9.33-51.28a4,4,0,1,0-7.88-1.44L98.48,92H48a4,4,0,0,0,0,8H97L86.84,156H32a4,4,0,0,0,0,8H85.39l-9.33,51.28a4,4,0,0,0,3.22,4.65A3.65,3.65,0,0,0,80,220a4,4,0,0,0,3.94-3.29L93.52,164h55.87l-9.33,51.28a4,4,0,0,0,3.22,4.65,3.65,3.65,0,0,0,.72.07,4,4,0,0,0,3.94-3.29L157.52,164H208a4,4,0,0,0,0-8H159l10.19-56H224a4,4,0,0,0,0-8Zm-73.16,64H95l10.19-56H161Z"></path></svg>');*/


    /*--map: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23151515" viewBox="0 0 256 256"><path d="M128,68a36,36,0,1,0,36,36A36,36,0,0,0,128,68Zm0,64a28,28,0,1,1,28-28A28,28,0,0,1,128,132Zm0-112a84.09,84.09,0,0,0-84,84c0,30.42,14.17,62.79,41,93.62a250,250,0,0,0,40.73,37.66,4,4,0,0,0,4.58,0A250,250,0,0,0,171,197.62c26.81-30.83,41-63.2,41-93.62A84.09,84.09,0,0,0,128,20Zm37.1,172.23A254.62,254.62,0,0,1,128,227a254.62,254.62,0,0,1-37.1-34.81C73.15,171.8,52,139.9,52,104a76,76,0,0,1,152,0C204,139.9,182.85,171.8,165.1,192.23Z"></path></svg>');*/


    /*--theme: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23151515" viewBox="0 0 256 256"><path d="M241.72,113a11.88,11.88,0,0,0-9.73-5H212V88a12,12,0,0,0-12-12H129.33l-28.8-21.6a12.05,12.05,0,0,0-7.2-2.4H40A12,12,0,0,0,28,64V208a4,4,0,0,0,4,4H211.09a4,4,0,0,0,3.79-2.74l28.49-85.47A11.86,11.86,0,0,0,241.72,113ZM40,60H93.33a4,4,0,0,1,2.4.8L125.6,83.2a4,4,0,0,0,2.4.8h72a4,4,0,0,1,4,4v20H69.76a12,12,0,0,0-11.38,8.21L36,183.35V64A4,4,0,0,1,40,60Zm195.78,61.26L208.2,204H37.55L66,118.74A4,4,0,0,1,69.76,116H232a4,4,0,0,1,3.79,5.26Z"></path></svg>');*/


    /*--arrow-up: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23151515" viewBox="0 0 256 256"><path d="M236,192a4,4,0,0,1-4,4H88a4,4,0,0,1-4-4V57.66L42.83,98.83a4,4,0,0,1-5.66-5.66l48-48a4,4,0,0,1,5.66,0l48,48a4,4,0,0,1-5.66,5.66L92,57.66V188H232A4,4,0,0,1,236,192Z"></path></svg>');*/


    /*--colour: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23151515" viewBox="0 0 256 256"><path d="M174,47.75a254.19,254.19,0,0,0-41.45-38.3,8,8,0,0,0-9.18,0A254.19,254.19,0,0,0,82,47.75C54.51,79.32,40,112.6,40,144a88,88,0,0,0,176,0C216,112.6,201.49,79.32,174,47.75Zm9.85,105.59a57.6,57.6,0,0,1-46.56,46.55A8.75,8.75,0,0,1,136,200a8,8,0,0,1-1.32-15.89c16.57-2.79,30.63-16.85,33.44-33.45a8,8,0,0,1,15.78,2.68Z"></path></svg>');*/


    /*--linkIcon:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23151515" viewBox="0 0 256 256"><path d="M236,88.12a50.44,50.44,0,0,1-14.81,34.31l-34.75,34.74A50.33,50.33,0,0,1,150.62,172h-.05A50.63,50.63,0,0,1,100,120a4,4,0,0,1,4-3.89h.11a4,4,0,0,1,3.89,4.11A42.64,42.64,0,0,0,150.58,164h0a42.32,42.32,0,0,0,30.14-12.49l34.75-34.74a42.63,42.63,0,1,0-60.29-60.28l-11,11a4,4,0,0,1-5.66-5.65l11-11A50.64,50.64,0,0,1,236,88.12ZM111.78,188.49l-11,11A42.33,42.33,0,0,1,70.6,212h0a42.63,42.63,0,0,1-30.11-72.77l34.75-34.74A42.63,42.63,0,0,1,148,135.82a4,4,0,0,0,8,.23A50.64,50.64,0,0,0,69.55,98.83L34.8,133.57A50.63,50.63,0,0,0,70.56,220h0a50.33,50.33,0,0,0,35.81-14.83l11-11a4,4,0,1,0-5.65-5.66Z"></path></svg>');*/


    /*--swipeRight: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iIzAwMDAwMCIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0yMTIsMTQwdjM2YzAsMjQuNjYtOC4wOCw0MS4xLTguNDIsNDEuNzlhNCw0LDAsMSwxLTcuMTYtMy41OGMuMDctLjE1LDcuNTgtMTUuNTUsNy41OC0zOC4yMVYxNDBhMTYsMTYsMCwwLDAtMzIsMHY0YTQsNCwwLDAsMS04LDBWMTI0YTE2LDE2LDAsMCwwLTMyLDB2MTJhNCw0LDAsMCwxLTgsMFY2OGExNiwxNiwwLDAsMC0zMiwwVjE3NmE0LDQsMCwwLDEtNy4zOSwyLjExbC0xOC42OC0zMGEuNzUuNzUsMCwwLDEtLjA3LS4xMiwxNiwxNiwwLDAsMC0yNy43MiwxNmwyOS4zMSw1MGE0LDQsMCwwLDEtNi45LDRMMzEuMjIsMTY4YTI0LDI0LDAsMCwxLDQxLjUyLTI0LjA5TDg0LDE2MlY2OGEyNCwyNCwwLDAsMSw0OCwwdjM4LjEzYTI0LDI0LDAsMCwxLDM5Ljk0LDE2LjA2QTI0LDI0LDAsMCwxLDIxMiwxNDBabTM4LjgzLTg2LjgzLTMyLTMyYTQsNCwwLDAsMC01LjY2LDUuNjZMMjM4LjM0LDUySDE3NmE0LDQsMCwwLDAsMCw4aDYyLjM0TDIxMy4xNyw4NS4xN2E0LDQsMCwwLDAsNS42Niw1LjY2bDMyLTMyQTQsNCwwLDAsMCwyNTAuODMsNTMuMTdaIj48L3BhdGg+PC9zdmc+');*/






    --scrollbar-width: 8px;


    --scrollbar-track-color: var(--base-100);


    --scrollbar-thumb-color: var(--action-0);


    --scrollbar-thumb-hover-color: var(--action-50);


    --scrollbar-thumb-border: 2px solid var(--base-50);


    --scrollbar-border-radius: 4px;




    --can-scroll: 0;


    --details: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" fill="%232b1a0d" viewBox="0 0 256 256"><path d="M212.24,100.24l-80,80a6,6,0,0,1-8.48,0l-80-80a6,6,0,0,1,8.48-8.48L128,167.51l75.76-75.75a6,6,0,0,1,8.48,8.48Z"></path></svg>');


    --link: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" fill="%232b1a0d" viewBox="0 0 256 256"><path d="M238,88.18a52.42,52.42,0,0,1-15.4,35.66l-34.75,34.75A52.28,52.28,0,0,1,150.62,174h-.05A52.63,52.63,0,0,1,98,119.9a6,6,0,0,1,6-5.84h.17a6,6,0,0,1,5.83,6.16A40.62,40.62,0,0,0,150.58,162h0a40.4,40.4,0,0,0,28.73-11.9l34.75-34.74A40.63,40.63,0,0,0,156.63,57.9l-11,11a6,6,0,0,1-8.49-8.49l11-11a52.62,52.62,0,0,1,74.43,0A52.83,52.83,0,0,1,238,88.18Zm-127.62,98.9-11,11A40.36,40.36,0,0,1,70.6,210h0a40.63,40.63,0,0,1-28.7-69.36L76.62,105.9A40.63,40.63,0,0,1,146,135.77a6,6,0,0,0,5.83,6.16H152a6,6,0,0,0,6-5.84A52.63,52.63,0,0,0,68.14,97.42L33.38,132.16A52.63,52.63,0,0,0,70.56,222h0a52.26,52.26,0,0,0,37.22-15.42l11-11a6,6,0,1,0-8.49-8.48Z"></path></svg>');


}






body:has(#theme-switcher:checked){


    --action-50: #cb3933;


    --action-100: #d14c47;


    --action-200: #d6605c;


    --secondary-50: #ebb14e;


    --secondary-100: #edbb65;


    --secondary-200: #f0c57c;


    /*****************************


    Colours


    *****************************/


    --mixBlendMode: lighten;


    --coverBlend: multiply;


    --coverIndex: 0;




    --action-50: 219,0,110;     /* #db006e; */


    --action-100: 184,0.92;     /* #b8005c; */


    --action-200: 148,0,74;     /* #94004a; */




    --secondary-50: 216,159,0;  /* #d89f00; */


    --secondary-100: 181,133,0; /* #b58500; */


    --secondary-200: 145,106,0; /* #916a00; */




    --contrast: var(--light-0);


    --contrast-50: var(--light-50);


    --contrast-100: var(--light-100);


    --contrast-200: var(--light-200);


    --contrast: var(--light-rgb);




    --base: var(--dark-0);


    --base-50: var(--dark-50);


    --base-100: var(--dark-100);


    --base-200: var(--dark-200);


    --c: var(--dark-rgb);


    --base-rgb: var(--dark-rgb);


    --contrast-rgb: var(--light-rgb);


    --overlay-light: rgba(var(--c), .25);


    --overlay-medium: rgba(var(--c), .5);


    --overlay-heavy: rgba(var(--c), .85);


    --shimmer: rgba(var(--c),0) 0%,


    rgba(var(--c),.05) 50%,


    rgba(var(--c),0) 100%;


    --shadow: rgba(var(--light-rgb),.45) 0px 0px 4px;


    --shadow-down: rgba(var(--light-rgb),.45) 0 6px 5px -5px;    /* Bottom */


    --shadow-right: rgba(var(--light-rgb),.45) 6px 0 5px -5px;   /* Right */


    --shadow-left: rgba(var(--light-rgb), .45) -6px 0 5px -5px;   /* Left */


    --shadow-up: rgba(var(--light-rgb), .45) 0 -6px 5px -5px;     /* Up */


    --subtle: rgba(var(--light-rgb), .45) 0px 25px 20px -20px;


    --subtleRight: rgba(var(--light-rgb), .45) 10px 0 20px -20px;


    --base: var(--dark-rgb);




    --successBack: #155724;


    --successText:#d4edda;


    --errorBack: #721c24;


    --errorText: #f8d7da;




    /*--dashed: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23fafafa' stroke-width='1' stroke-dasharray='12%2c18%2c36' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");*/


    --successBack: var(--successDark);


    --successText: var(--successLight);


    --warningBack: var(--warningDark);


    --warningText: var(--warningLight);


    --errorBack: var(--errorDark);


    --errorText: var(--errorLight);




    /*--minus: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="%23F9F9F9" viewBox="0 0 256 256"><path d="M208,36H48A12,12,0,0,0,36,48V208a12,12,0,0,0,12,12H208a12,12,0,0,0,12-12V48A12,12,0,0,0,208,36Zm4,172a4,4,0,0,1-4,4H48a4,4,0,0,1-4-4V48a4,4,0,0,1,4-4H208a4,4,0,0,1,4,4Zm-40-80a4,4,0,0,1-4,4H88a4,4,0,0,1,0-8h80A4,4,0,0,1,172,128Z"></path></svg>');*/


    /*--plus: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="%23F9F9F9" viewBox="0 0 256 256"><path d="M208,36H48A12,12,0,0,0,36,48V208a12,12,0,0,0,12,12H208a12,12,0,0,0,12-12V48A12,12,0,0,0,208,36Zm4,172a4,4,0,0,1-4,4H48a4,4,0,0,1-4-4V48a4,4,0,0,1,4-4H208a4,4,0,0,1,4,4Zm-40-80a4,4,0,0,1-4,4H132v36a4,4,0,0,1-8,0V132H88a4,4,0,0,1,0-8h36V88a4,4,0,0,1,8,0v36h36A4,4,0,0,1,172,128Z"></path></svg>');*/


    /*--close: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23F9F9F9" viewBox="0 0 256 256"><path d="M208,36H48A12,12,0,0,0,36,48V208a12,12,0,0,0,12,12H208a12,12,0,0,0,12-12V48A12,12,0,0,0,208,36Zm4,172a4,4,0,0,1-4,4H48a4,4,0,0,1-4-4V48a4,4,0,0,1,4-4H208a4,4,0,0,1,4,4ZM162.83,98.83,133.66,128l29.17,29.17a4,4,0,0,1-5.66,5.66L128,133.66,98.83,162.83a4,4,0,0,1-5.66-5.66L122.34,128,93.17,98.83a4,4,0,0,1,5.66-5.66L128,122.34l29.17-29.17a4,4,0,1,1,5.66,5.66Z"></path></svg>');*/


    /*--chevron: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="%23F9F9F9" viewBox="0 0 256 256"><path d="M128,28A100,100,0,1,0,228,128,100.11,100.11,0,0,0,128,28Zm0,192a92,92,0,1,1,92-92A92.1,92.1,0,0,1,128,220Zm42.83-110.83a4,4,0,0,1,0,5.66l-40,40a4,4,0,0,1-5.66,0l-40-40a4,4,0,0,1,5.66-5.66L128,146.34l37.17-37.17A4,4,0,0,1,170.83,109.17Z"></path></svg>');*/


    /*--details: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="%23F9F9F9" viewBox="0 0 256 256"><path d="M210.83,98.83l-80,80a4,4,0,0,1-5.66,0l-80-80a4,4,0,0,1,5.66-5.66L128,170.34l77.17-77.17a4,4,0,1,1,5.66,5.66Z"></path></svg>');*/


    /*--shop: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23F9F9F9" viewBox="0 0 256 256"><path d="M28.15,95A3.81,3.81,0,0,0,28,96v16a36,36,0,0,0,16,29.92V216a4,4,0,0,0,4,4H208a4,4,0,0,0,4-4V141.92A36,36,0,0,0,228,112V96a3.81,3.81,0,0,0-.17-1.08L213.5,44.7A12,12,0,0,0,202,36H54A12,12,0,0,0,42.5,44.7Zm22-48.08A4,4,0,0,1,54,44H202a4,4,0,0,1,3.84,2.9L218.7,92H37.3ZM100,100h56v12a28,28,0,0,1-56,0ZM36,112V100H92v12a28,28,0,0,1-41.37,24.59,4,4,0,0,0-1.31-.76A28,28,0,0,1,36,112ZM204,212H52V145.94a36,36,0,0,0,44-17.48,36,36,0,0,0,64,0,36,36,0,0,0,44,17.48Zm2.68-76.17a3.94,3.94,0,0,0-1.3.76A28,28,0,0,1,164,112V100h56v12A28,28,0,0,1,206.68,135.83Z"></path></svg>');*/


    /*--style: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23F9F9F9" viewBox="0 0 256 256"><path d="M224,92H170.61l9.33-51.28a4,4,0,1,0-7.88-1.44L162.48,92H106.61l9.33-51.28a4,4,0,1,0-7.88-1.44L98.48,92H48a4,4,0,0,0,0,8H97L86.84,156H32a4,4,0,0,0,0,8H85.39l-9.33,51.28a4,4,0,0,0,3.22,4.65A3.65,3.65,0,0,0,80,220a4,4,0,0,0,3.94-3.29L93.52,164h55.87l-9.33,51.28a4,4,0,0,0,3.22,4.65,3.65,3.65,0,0,0,.72.07,4,4,0,0,0,3.94-3.29L157.52,164H208a4,4,0,0,0,0-8H159l10.19-56H224a4,4,0,0,0,0-8Zm-73.16,64H95l10.19-56H161Z"></path></svg>');*/


    /*--map: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23F9F9F9" viewBox="0 0 256 256"><path d="M128,68a36,36,0,1,0,36,36A36,36,0,0,0,128,68Zm0,64a28,28,0,1,1,28-28A28,28,0,0,1,128,132Zm0-112a84.09,84.09,0,0,0-84,84c0,30.42,14.17,62.79,41,93.62a250,250,0,0,0,40.73,37.66,4,4,0,0,0,4.58,0A250,250,0,0,0,171,197.62c26.81-30.83,41-63.2,41-93.62A84.09,84.09,0,0,0,128,20Zm37.1,172.23A254.62,254.62,0,0,1,128,227a254.62,254.62,0,0,1-37.1-34.81C73.15,171.8,52,139.9,52,104a76,76,0,0,1,152,0C204,139.9,182.85,171.8,165.1,192.23Z"></path></svg>');*/


    /*--theme: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23F9F9F9" viewBox="0 0 256 256"><path d="M241.72,113a11.88,11.88,0,0,0-9.73-5H212V88a12,12,0,0,0-12-12H129.33l-28.8-21.6a12.05,12.05,0,0,0-7.2-2.4H40A12,12,0,0,0,28,64V208a4,4,0,0,0,4,4H211.09a4,4,0,0,0,3.79-2.74l28.49-85.47A11.86,11.86,0,0,0,241.72,113ZM40,60H93.33a4,4,0,0,1,2.4.8L125.6,83.2a4,4,0,0,0,2.4.8h72a4,4,0,0,1,4,4v20H69.76a12,12,0,0,0-11.38,8.21L36,183.35V64A4,4,0,0,1,40,60Zm195.78,61.26L208.2,204H37.55L66,118.74A4,4,0,0,1,69.76,116H232a4,4,0,0,1,3.79,5.26Z"></path></svg>');*/


    /*--arrow-up: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23F9F9F9" viewBox="0 0 256 256"><path d="M236,192a4,4,0,0,1-4,4H88a4,4,0,0,1-4-4V57.66L42.83,98.83a4,4,0,0,1-5.66-5.66l48-48a4,4,0,0,1,5.66,0l48,48a4,4,0,0,1-5.66,5.66L92,57.66V188H232A4,4,0,0,1,236,192Z"></path></svg>');*/


    /*--colour: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23F9F9F9" viewBox="0 0 256 256"><path d="M174,47.75a254.19,254.19,0,0,0-41.45-38.3,8,8,0,0,0-9.18,0A254.19,254.19,0,0,0,82,47.75C54.51,79.32,40,112.6,40,144a88,88,0,0,0,176,0C216,112.6,201.49,79.32,174,47.75Zm9.85,105.59a57.6,57.6,0,0,1-46.56,46.55A8.75,8.75,0,0,1,136,200a8,8,0,0,1-1.32-15.89c16.57-2.79,30.63-16.85,33.44-33.45a8,8,0,0,1,15.78,2.68Z"></path></svg>');*/


    /*--linkIcon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23F9F9F9" viewBox="0 0 256 256"><path d="M236,88.12a50.44,50.44,0,0,1-14.81,34.31l-34.75,34.74A50.33,50.33,0,0,1,150.62,172h-.05A50.63,50.63,0,0,1,100,120a4,4,0,0,1,4-3.89h.11a4,4,0,0,1,3.89,4.11A42.64,42.64,0,0,0,150.58,164h0a42.32,42.32,0,0,0,30.14-12.49l34.75-34.74a42.63,42.63,0,1,0-60.29-60.28l-11,11a4,4,0,0,1-5.66-5.65l11-11A50.64,50.64,0,0,1,236,88.12ZM111.78,188.49l-11,11A42.33,42.33,0,0,1,70.6,212h0a42.63,42.63,0,0,1-30.11-72.77l34.75-34.74A42.63,42.63,0,0,1,148,135.82a4,4,0,0,0,8,.23A50.64,50.64,0,0,0,69.55,98.83L34.8,133.57A50.63,50.63,0,0,0,70.56,220h0a50.33,50.33,0,0,0,35.81-14.83l11-11a4,4,0,1,0-5.65-5.66Z"></path></svg>');*/


    --shimmer: rgba(var(--light-0),0) 0%,


    rgba(var(--light-0),.05) 50%,


    rgba(var(--light-0),0) 100%;


}




/* https://frontendmasters.com/blog/the-coyier-css-starter/ */


@layer reset {


    html {


@@ -274,10 +291,6 @@




    body {


        margin: 0;


        /*padding: 2rem;*/


        /*@media (width < 500px) {*/


        /*    padding: 1rem;*/


        /*}*/


    }




    *,


@@ -340,7 +353,7 @@


    dl {


        margin: 0;


        padding: 0;


        list-style: inside;


        list-style: outside;


        ul,


        ol,


        dl {


@@ -364,9 +377,18 @@


        inline-size: fit-content;


        margin-inline: auto;


    }


    a > img,


    figure img {


        width: 100%;


        height: 100%;


        object-fit: cover;


    }


    figcaption {


        contain: inline-size;


        font-size: 90%;


        background-color: rgba(var(--base),var(--op-3));


        text-align: center;


        font-style: italic;


    }




    input,


@@ -441,13 +463,70 @@


        padding: 1.5rem;


    }




    hr.logo::after,


    hr {


        --margin: 12.5%; /* Half of the remaining 25% */


        --baseWidth: 75%;


        border-style: solid;


        border-width: 1px 0 0;


        border-color: rgb(var(--contrast));


        color: inherit;


        height: 0;


        height: 1px;


        overflow: visible;


        margin-block: 2.5rem;


        width: var(--baseWidth);


    }




    hr.logo {


        --width: calc((rgb(var(--baseWidth)) / 2) - var(--half));


        --half: calc(var(--btn) / 2);


        width: var(--width);


        position: relative;


        margin-left: var(--margin);


    }


        hr.logo::before {


            content: '';


            --circ: calc(var(--btn) + (var(--btn) / 2));


            --rad: calc(var(--circ) / 2);


            background-color: rgb(var(--contrast-100));


            mask-image: var(--icon);


            -webkit-mask-image: var(--icon);


            mask-size: var(--btn);


            -webkit-mask-size: contain;


            mask-repeat: no-repeat;


            -webkit-mask-repeat: no-repeat;


            mask-position: center;


            -webkit-mask-position: center;


            display: block;


            width: var(--circ);


            height: var(--circ);


            position: absolute;


            border-radius: 50%;


            right: calc(-1 * (var(--circ)));


            top: 0;


            transform: translateY(-50%);




        }


    hr.logo::after {


        content: '';


        display: block;


        width: 100%;


        position: absolute;


        z-index: 0;


        top: 0;


        transform: translateY(050%);


        background-color: rgb(var(--contrast));


        height: 1px;


        right: calc((100% + var(--btn_) + 1rem) * -1);


        margin: 0;


    }


    hr.dots {


        border-color: transparent;


        display:flex;


    }


    hr.dots::before {


        content: '.\2003.\2003.';


        margin: 0 auto;


    }




    :target {


@@ -500,84 +579,541 @@


        }


    }


}


/***************************************************************




/*************************************************************


SCROLLBAR


***************************************************************/


*************************************************************/


* {


    scrollbar-width: thin;


    scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);


    scrollbar-color: var(--sb-thumb) var(--sb-track);


}




/* For WebKit browsers (Chrome, Safari, etc.) */


::-webkit-scrollbar {


    width: var(--scrollbar-width);


    height: var(--scrollbar-width);


    width: var(--sb-width);


    height: var(--sb-width);


}




::-webkit-scrollbar-track {


    background: var(--scrollbar-track-color);


    background: var(--sb-track);


}




::-webkit-scrollbar-thumb {


    background-color: var(--scrollbar-thumb-color);


    border-radius: var(--scrollbar-border-radius);


    border: var(--scrollbar-thumb-border);


    background-color: var(--sb-thumb);


    border-radius: var(--sb-radius);


    border: var(--sb-thumb-border);


}




::-webkit-scrollbar-thumb:hover {


    background-color: var(--scrollbar-thumb-hover-color);


    background-color: var(--sb-thumb-hover);


}






body{


    background-color: var(--base-50);


    color: var(--contrast);


    max-width: 100vw;


    overflow-x: hidden;


/*************************************************************


BASE


*************************************************************/


body {


    background-color: rgb(var(--base-50));


    color: rgb(var(--contrast));


    margin: 0;


    font-family: var(--body);


    font-weight: var(--bWeight);


    font-size: var(--medium);


    font-weight: var(--fw-b);


    font-size: var(--txt-medium);


    line-height: 1.4;


    position: relative;


}


body b,


body strong {


    font-weight: var(--bBold);


}






*:target {


    scroll-snap-margin-top: max(6rem, 20vh);


    scroll-margin-top: max(6rem, 20vh);


    outline: double var(--action-0);


    border-radius: var(--outerRadius);


    padding: var(--outerPadding);


}


body.menu_item *:target h2 {


    background-color: var(--action-0);


    color: var(--action-contrast);


    max-width: 100vw;


}


body,


body * {


    transition: background-color var(--transition-base);


    transition-property: background-color, border;


    transition: var(--trans-color)


}


/*************************************************************


LAYOUT


*************************************************************/


html {


    scroll-behavior: smooth;


    overflow-x: clip;


}




.home > section:first-of-type,


.home main {


@media(prefers-reduced-motion){


    html {


        scroll-behavior: unset;


    }


    * {


        transition: none!important;


        animation: none!important;


    }


}


/*body:has(aside.expanded),*/


/*body:has(nav.open:not(.drawer)),*/


/*body:has(dialog[open]),*/


/*body.loading {*/


/*    overflow: hidden;*/


/*    max-height: 100vh;*/


/*}*/




main {


    --gapNarrow: calc((var(--content) - var(--narrow)) / 2);


    --gapContent: calc((var(--wider) - var(--content)) / 2);


    --gapWide: calc((var(--wide) - var(--wider)) / 2);




    display: grid;


    grid-template-columns:


        [full-start] minmax(1rem, 1fr)


        [wide-start] minmax(0, var(--gapWide))


        [wider-start] minmax(0, var(--gapContent))


        [content-start] minmax(0, var(--gapNarrow))


        [narrow-start] min(calc(100% - 2rem), var(--narrow)) [narrow-end]


            minmax(0, var(--gapNarrow)) [content-end]


            minmax(0, var(--gapContent)) [wider-end]


            minmax(0, var(--gapWide)) [wide-end]


            minmax(1rem, 1fr) [full-end];


    min-height: var(--maxHeight);


    grid-auto-rows: max-content;


}


main > * {


    grid-column: content;


}


main > section {


    padding: 3rem 0;


    grid-column: full;


}


main > section > * {


    width: 100%;


    max-width: var(--content);


    margin: var(--sp1) auto;


}


ul {


    max-width: var(--narrow);


    margin: 1rem auto 1rem 3rem;


}


ul ul {


    padding: .25rem 0 .25rem 1rem;


    margin: 0;


}




/* Nested items can use any width */


main .align-narrow {


    grid-column: narrow;


}




main .align-content {


    grid-column: content;


}




main .align-wider {


    grid-column: wider;


    width: 100%;


}




main .align-wide {


    grid-column: wide;


    width: 100%;


}




main .align-full {


    grid-column: full;


    width: 100%;


    max-width: none;


}




/* First child has no top spacing */


main > *:first-child {


    margin-top: 0;


}


/**************************************************************


UTILITY CLASSES


**************************************************************/


body:has(aside.expanded),


body:has(nav.open),


body:has(dialog[open]),


body.loading {




.wp-site-blocks > header {


    position: sticky;


    top: 0;


    z-index: var(--z-8);


    background-color: rgb(var(--base));


    box-shadow: rgba(var(--base), var(--op-45)) var(--shdw-down);


    transition: top var(--trans-base);


}


header a[rel="home"] {


    display: flex;


    align-items: center;


    max-height:var(--btn);


    overflow:hidden;


    margin: 0 auto;


}


.scroll-progress {


    position: absolute;


    inset-inline: 0;


    bottom: 0;


    height: 3px;


    display: flex;


    align-items: center;


    pointer-events: none;


    z-index: var(--z-3);


    background-color: rgb(var(--base-200));


    overflow: hidden;


}


/** PADDING **/




.scroll-progress .bar {


    width: 100%;


    height: 1px;


    transform-origin: left center;


    transform: scaleX(0);


    background: rgb(var(--action-0));


}




footer {


    padding: 1rem;


    background-color: rgb(var(--base));


    color: rgb(var(--contrast-200));


    text-align: center;


    margin: 4rem 0 0;


    position: relative;


    z-index: var(--z-7);


}


    footer p {


        margin: 0 auto;


    }




body:has(nav.fixed.bottom,nav.on-this-page) footer {


    padding-bottom: var(--btn_);


}


@media (min-width:768px) {


    footer {


        padding: 1rem 2rem var(--btn_);


    }


}


*:target {


    scroll-snap-margin-top: var(--btnbtn);


    scroll-margin-top: var(--btnbtn);


    outline: double rgb(var(--action-200));


    background-color: rgb(var(--base));


}




/***********************


PRE/SUB HEADER


***********************/


aside.header,


aside.footer {


    padding: 0 1rem;


    font-size: var(--txt-x-small);


    z-index: var(--z-7);


    background-color: rgb(var(--base-50));


}


aside.header {


    height: var(--chip_);


    --wrap: nowrap;


}


aside.footer p,


aside.header p {


    width: max-content;


}


aside.footer {


    --dir: column;


    background-color:rgb(var(--base-50));


    padding: 1rem;


    border-top: 1px solid rgb(var(--base-200));


}


aside.footer + footer {


    margin-top: 0;


}


aside.header p ,aside.footer p {


    margin: 0.125rem 0;


}


aside.pre {


    position: sticky;


    top: -2rem;


    transition: top var(--trans-base);


}


.scroll-up aside.pre {


    top: 0;


}


.scroll-up .pre ~ header {


    top: calc(var(--chip_) - 2px);


}


/***********************************************************


TYPOGRAPHY


***********************************************************/


body :is(b, strong) {


    font-weight: var(--fw-b-bold);


}




:is(h1, h2, h3, h4, h5, h6) {


    font-family: var(--heading);


    text-transform: uppercase;


    font-weight: var(--fw-h);


    line-height: 1.3;


    margin: 1.5em auto .25em;


    width: 100%;


}


:is(h1,h2,h3,h4,h5,h6), p {


    width: 100%;


}


    .group :is(h1,h2,h3,h4,h5,h6), p {


        width: max-content;


        max-width: 100%;


    }




:is(h1, h2, h3, h4, h5, h6) :is(b, strong) {


    font-weight: var(--fw-h-bold);


    letter-spacing: 2px;


}




:is(h1, h2, h3, h4, h5, h6) small {


    display: block;


    line-height: .8;


    font-family: var(--body);


    font-size: .5em;


}


:is(h1, h2, h3, h4, h5, h6) small :is(b, strong) {


    font-weight: var(--fw-b-bold);


}




:is(h1, h2, h3, h4, h5, h6).inline {


    font-size: 1.2rem;


    font-weight: var(--fw-h-bold);


    display: inline-block;


    margin: 0 2rem 0 0;


    letter-spacing: .05em;


}




:is(h1, h2, h3, h4, h5, h6).inline + * {


    display: inline-block;


    margin: .5rem 0;


}




h1 {


    font-size: var(--txt-xxx-large);


    font-weight: var(--fw-h);


    line-height: 1;


    margin: 10vh auto .25em;


}




h1 small + small {


    display: inline-block;


    font-size: var(--txt-large);


    margin-right: .5rem;


}




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


h3 { font-size: var(--txt-x-large); }


h4 {


    font-weight: 400;


    font-size: var(--txt-large);


}


h5, h6 {


    font-weight: 400;


    font-size: var(--txt-medium);


}




p {


    line-height: 1.6;


}


    .drop-cap::first-letter {


        font-family: var(--heading);


        font-size: var(--btn);


        line-height: 1;


        background-color: rgb(var(--action-0));


        color: rgb(var(--action-contrast));


        float: left;


        font-weight: var(--fw-h-bold);


        margin: 0.1em 0.1em 0.2em 0;


        padding: 0.1em;


    }


    :not(.row >) p:has(+p) {


        margin-bottom: 0;


    }


    :not(.row >) p + p {


        margin-top: 0;


    }




.hint {


    line-height: 1.2;


    font-style: italic;


    font-size: var(--txt-small);


}




mark {


    background-color: rgba(var(--action-0), var(--op-45))!important;


    color: rgb(var(--action-contrast))!important;


    border-top-left-radius: .5em;


    border-bottom-right-radius: .5em;


    padding: 0 .5em;


    corner-shape: bevel;


}




/******************************************************


LINKS


******************************************************/


a {


    color: rgb(var(--action-0));


    border-radius: 4px;


    padding: .125rem;


}


    a:visited {


        color: rgb(var(--action-100));


    }


    a:hover,


    a:visited:hover {


        color: rgb(var(--contrast-50));


        text-decoration: none;


    }




    :is(p, li, h1,h2,h3,h4,h5,h6, small) a:hover {


        color: rgb(var(--action-contrast));


        background-color: rgb(var(--action-0));


    }




    a.logo {


        display: inline-flex;


    }


    .logo img {


        max-width: 150px;


    }


/*****************************************************


ICONS


*****************************************************/


i.icon {


    width: var(--w);


    height: var(--w);


    display: inline-block;


    background-color: currentColor;


    mask-image: var(--icon);


    -webkit-mask-image: var(--icon);


    mask-size: contain;


    -webkit-mask-size: contain;


    mask-repeat: no-repeat;


    -webkit-mask-repeat: no-repeat;


    mask-position: center;


    -webkit-mask-position: center;


    vertical-align: middle;


}




/** SWITCHING ICONS **/


/**** If, say, a button has two icons, one gets hidden on one state, and one gets shown on another, add it here **/




.favourite:not(.favourited) .heart-fill,


.favourite.favourited .heart,


.notifications:not(.has) .bell-ringing,


.notifications.has .bell,


.vote button:not(.voted) .upvoted,


.vote button:not(.voted) .downvoted,


.vote .voted .upvote,


.vote .voted .downvote {


    display: none;


}




.favourite:not(.favourited) .heart,


.favourite.favourited .heart-fill,


.notifications:not(.has) .bell,


.notifications.has .bell-ringing,


.vote button:not(.voted) .upvote,


.vote button:not(.voted) .downvote,


.vote .voted .upvoted,


.vote .voted .downvoted {


    display: block;


}


/*******************************************************


LISTS


*******************************************************/


ol {


    list-style-type: decimal;


}




ul.terms {


    display: grid;


    grid-template-columns: repeat(2, 1fr);


}


    ul.terms li {


        list-style: none;


    }




.term-list.cloud {


    display: flex;


    gap: .25rem;


    margin: var(--sp2) auto;


}


    .term-list.cloud a {


        border-radius: var(--radius);


        background-color: transparent;


        color: rgb(var(--action-0));


        border: 2px solid rgb(var(--action-0));


        padding: 4px 8px;


        position: relative;


    }


        .term-list.cloud a:hover,


        .term-list.cloud a:focus {


            color: rgb(var(--action-contrast));


            background-color: rgb(var(--action-0));


        }


        .term-list a:has(.count) {


            padding-right: 1rem;


        }


        .term-list .count {


            position: absolute;


            top: .25rem;


            right: .25rem;


            /*border-radius: 50%;*/


            /*aspect-ratio: 1;*/


            font-size: var(--txt-small);


            /*background-color: rgb(var(--action-0));*/


            /*color: rgb(var(--action-contrast));*/


        }




.term-list li {


    list-style: none;


}


    .term-list a {


        display: inline-flex;


        width: max-content;


    }


/******************************************************


UTILITY


******************************************************/


.rounded { border-radius: var(--radius-outer); }


.font-small { font-size: var(--txt-x-small); }


.font-medium { font-size: var(--txt-medium); }


.font-large { font-size: var(--txt-large); }


.font-x-large { font-size: var(--txt-x-large); }




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


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


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


.align-center { text-align: center; margin: 0 auto;}


.align-left { text-align: left; margin: 0 auto 0 0;}


.align-right { text-align: right; margin: 0 0 0 auto;}






*[hidden] { display: none!important; }




@media (max-width: 767px){


    .hide-small { display: none; }


}




.width-33,


.width-66,


.width-50,


.width-25,


.width-75 {


    width: 100%;


}




.w-full{


    width: 100%;


}


@media (min-width: 768px){


    .width-50 {


        max-width: 50%;


    }


    .width-25 {


        max-width: 25%;


    }


    .width-75 {


        max-width: 75%;


    }


    .width-33 {


        max-width: 33.333%;


    }


    .width-66 {


        max-width: 66.666%


    }


}


/** SPACING TODO: maybe scan our files for which we actually use? **/


.p-1 {padding: var(--sp1);}


.p-2 {padding: var(--sp2);}


.p-3 {padding: var(--sp3);}


@@ -630,7 +1166,9 @@


.pr-7 { padding-right: var(--sp7); }


.pl-7 { padding-left: var(--sp7); }


.pb-7 { padding-bottom: var(--sp7); }




/** MARGIN **/


.m-0 {margin: 0;}


.m-1 {margin: var(--sp1);}


.m-2 {margin: var(--sp2);}


.m-3 {margin: var(--sp3);}


@@ -684,852 +1222,874 @@


.ml-7 { margin-left: var(--sp7); }


.mb-7 { margin-bottom: var(--sp7); }




.text-center {


    text-align: center;


/******************************************************


COLORS


******************************************************/


.base {


    --color: rgb(var(--base));


}


.text-left {


    text-align: left;


}


.text-right {


    text-align: right;


}






*[hidden] {


    display: none!important;


}




@media (max-width: 767px){


    .hide-small {


        display: none;


    .base-50 {


        --color: rgb(var(--base-50));


    }


}




.width-50 {


    width: 100%;


}


.width-25 {


    width: 50%;


}


.width-75 {


    width: 100%;


}


.w-full,


.width-full {


    width: 100%;


}






@media (min-width: 768px){


    .buttons li.width-50,


    .width-50 {


        width: calc(50% - .3em);


    .base-100 {


        --color: rgb(var(--base-100));


    }


    .width-25 {


        width: calc(25% - .3em);


    .base-200 {


        --color: rgb(var(--base-200));


    }


    .width-75 {


        width: calc(75% - .3em);


.contrast {


    --color: rgb(var(--contrast));


}


    .contrast-50 {


        --color: rgb(var(--contrast-50));


    }


    .contrast-100 {


        --color: rgb(var(--contrast-100));


    }


    .contrast-200 {


        --color: rgb(var(--contrast-200));


    }


.action {


    --color: rgb(var(--action-0));


}


    .action-50 {


        --color: rgb(var(--action-50));


    }


    .action-100 {


        --color: rgb(var(--action-100));


    }


    .action-200 {


        --color: rgb(var(--action-200));


    }


    .action-comp {


        --color: oklch(from rgb(var(--action-0)) l c calc(h + 180));


    }


    .action-tri {


        --color: oklch(from rgb(var(--action-0)) .82 .2 calc(h - 120));


    }


    .action-tri-alt {


        --color: oklch(from rgb(var(--action-0)) .82 .2 calc(h + 120));


    }


.secondary {


    --color: rgb(var(--secondary-0));


}


    .secondary-50 {


        --color: rgb(var(--secondary-50));


    }


    .secondary-100 {


        --color: rgb(var(--secondary-100));


    }


    .secondary-200 {


        --color: rgb(var(--secondary-200));


    }


    .secondary-comp {


        --color: oklch(from rgb(var(--secondary-0)) l c calc(h + 180));


    }


    .secondary-tri {


        --color: oklch(from rgb(var(--secondary-0)) .82 .2 calc(h - 120));


    }


    .secondary-tri-alt {


        --color: oklch(from rgb(var(--secondary-0)) .82 .2 calc(h + 120));


    }


.hvr-bck:hover,


.hvr-bck:focus,


.bck {


    background-color: var(--color);


}


    .bck:not(.overlay).op-1 {


        background-color: rgba(var(--color), var(--op-1));


    }


    .bck:not(.overlay).op-2 {


        background-color: rgba(var(--color), var(--op-2));


    }


    .bck:not(.overlay).op-3 {


        background-color: rgba(var(--color), var(--op-3));


    }


    .bck:not(.overlay).op-4 {


        background-color: rgba(var(--color), var(--op-4));


    }


    .bck:not(.overlay).op-45 {


        background-color: rgba(var(--color), var(--op-45));


    }


    .bck:not(.overlay).op-5 {


        background-color: rgba(var(--color), var(--op-5));


    }


    .bck:not(.overlay).op-6 {


        background-color: rgba(var(--color), var(--op-6));


    }


.hvr-clr:hover,


.hvr-clr:focus,


.clr {


    color: var(--color);


}


.hvr-brdr:hover,


.hvr-brdr:focus,


.brdr {


    border-color: var(--color);


}




.row:not(.icon),


.col {


    --align: center;


    --justify: center;


/******************************************************************


DUOTONE


*****************************************************************//******************************************************************/


.duotone {


    isolation: isolate;


    position: relative;


    overflow: hidden;


    background: rgb(var(--contrast));


}




.cover img,


.cover video,


.duotone img,


.duotone video {


    filter: grayscale(1) sepia(1) contrast(1.1) brightness(1.05);


    mix-blend-mode: multiply;


    z-index: 1;


    position: relative;


}


    /*.duotone::after,*/


    .duotone::before {


        content: '';


        position: absolute;


        inset: 0;


        pointer-events: none;


        z-index: 2;


    }


    .duotone::before {


        mix-blend-mode: color;


        background-color: var(--duo-dark);


        opacity: var(--op-5);


        /*z-index: 1;*/


    }


    .duotone:not(.cover)::after {


        mix-blend-mode: screen;


        background-color: var(--duo-light);


        /*z-index: 2;*/


    }






    .duotone.action {


        --tone-a: rgb(var(--action-0));


        --duo-dark: oklch(from rgb(var(--base)) .18 .02 h);


        --duo-light: oklch(from rgb(var(--action-0)) .72 .28 h);


    }




    .duotone.secondary {


        --tone-a: rgb(var(--secondary-0));


        --duo-dark: oklch(from rgb(var(--base)) .2 .03 h);


        --duo-light: oklch(from rgb(var(--secondary-0)) .82 .18 h);


    }




    .duotone.complement {


        --duo-dark: oklch(from var(--tone-a) .22 .08 calc(h + 180));


        --duo-light: oklch(from var(--tone-a) .8 .26 h);


    }


    .duotone.triadic {


        --duo-dark: oklch(from var(--tone-a) .24 .1 calc(h + 120));


        --duo-light: oklch(from var(--tone-a) .82 .2 calc(h - 120));


    }


    .duotone.monochrome  {


        --duo-dark: oklch(from var(--tone-a) .3 .04 h);


        --duo-light: oklch(from var(--tone-a) .88 .08 h);


    }


    .duotone.film {


        --duo-dark: oklch(from var(--tone-a) .35 .1 h);


        --duo-light: oklch(from var(--dark-0) .96 .02 h);


    }






/******************************************************************//******************************************************************


LAYOUT UTILITIES


******************************************************************/


/** Buttons **/


button,


[type=submit],


a.btn,


.btn + label,


li.btn,


.buttons a,


.buttons li,


/** Item Grid **/


.item-grid .item,


/** popups **/


aside.main,


/** asides **/


aside.header,


aside.footer,


/** Defaults, of course **/




.row.row,


.col.col {


    display: flex;


    justify-content: var(--justify);


    align-items: var(--align);


    gap: var(--gap);


    flex-wrap: var(--wrap);


    flex-direction: var(--dir);


}


.col {


    --dir: column;


}


.row:not(.icon) {


    --dir: row;


}


.col.rev {


    --dir: column-reverse;


}


.row.rev {


    --dir: row-reverse;


}




.nowrap {


    --wrap: nowrap;


}


.col.a-start,


.row.start {


    --justify: flex-start;


}




.col.a-end,


.row.end {


    --justify: flex-end;


}


.col.btw,


.row.btw {


    --justify: space-between;


    --align: center;


    --justify: center;


    --gap: .5rem;


    --wrap: wrap;


    width: 100%;


}


.col.even,


.row.even {


    --justify: space-evenly;


.stretch.stretch > * {


    flex: 1;


}




.col.start,


.row.a-start {


    --align: flex-start;


.col.col { --dir: column; }


.row.row { --dir: row; }


.col.col.rev.rev { --dir: column-reverse; }


.row.row.rev.rev { --dir: row-reverse; }




.nowrap.nowrap { --wrap: nowrap; }


.nowrap.nowrap.stack-small { --wrap: wrap;}


@media (min-width: 768px) {


    .nowrap.nowrap.stack-small { --wrap: nowrap;}


}




.col.end,


.row.a-end {


    --align: flex-end;


}


.row.row.top,


.col.col.left { --align: flex-start; }


.col.col.top,


.row.row.left { --justify: flex-start; }




.abs {


    position: absolute;


}


*:has(>.abs) {


    position: relative;


}


.row.row.btm,


.col.col.right { --align: flex-end; }


.col.col.btm,


.row.row.right { --justify: flex-end; }




.row.row.x-mid,


.col.col.y-mid { --justify: center; }


.row.row.y-mid,


.col.col.x-mid { --align: center; }




.row.row.x-btw,


.col.col.y-btw { --justify: space-between; }


.row.row.y-btw,


.col.col.x-btw { --align: space-between; }




.row.row.x-even,


.col.col.y-even { --justify: space-evenly; }


.row.row.y-even,


.col.col.x-even { --align: space-evenly; }




.row.row.x-around,


.col.col.y-around { --justify: space-around; }


.row.row.y-around,


.col.col.x-around { --align: space-around; }




/*************************************************


POSITION UTILITIES


*************************************************/


.abs { position: absolute; }


*:has(>.abs) { position: relative; }




.abs.top { top: 0; right: 0; left: 0; }


.top-right { top: 0; right: 0; }


.top-left { top: 0; left: 0; }


.abs.btm { bottom: 0; left: 0; right: 0; }


.btm-right { bottom: 0; right: 0; }


.btm-left { bottom: 0; left: 0; }


.edges { inset: 0; }




.hidden {


    transform: scale(0);


    max-width: 0;


    max-height: 0;


    overflow: hidden;


    transition: var(--transition-transform), var(--transition-size);


    transition: var(--trans-transform), var(--trans-size);


}




.visible {


    transform: scale(1);


    max-width: 100%;


    max-height: 100%;


    transition: var(--transition-transform), var(--transition-size);


    transition: var(--trans-transform), var(--trans-size);


}




/******************************************************************


THEME SWITCHER & TOGGLE


THEME SWITCHER


******************************************************************/


.toggle-switch input {


    opacity: 0;


    width: 0;


    height: 0;


    position: absolute;


    left: var(--offScreen);


.field .switch {


    display: inline-flex;


}




.toggle-switch .slider {


.switch .slider {


    --trans-t: .0125s;


    position: relative;


    width: 2rem;


    height: 1rem;


    background-color: var(--base-200);


    width: var(--chipchip);


    height: var(--chip);


    background-color: rgb(var(--base-200));


    border-radius: .75rem;


    overflow: hidden;


    display: flex;


    justify-content: space-evenly;


    justify-content: space-between;


    align-items: center;


    border: 4px solid transparent;


    transition: .3s;


    box-shadow: 0 0 .25rem 0 rgba(var(--contrast-rgb), .125) inset;


    box-shadow: 0 0 .25rem 0 rgba(var(--contrast), .125) inset;


    cursor: pointer;


    margin: 5px;


    transition: var(--trans-color);


}


    .switch .slider::before {


        content: '';


        display: block;


        width: 100%;


        height: 100%;


        position: absolute;


        top: 0;


        left: 0;


        background-color: rgb(var(--base));


        transform: translateX(-1.5rem); /* NOTE: Tied to half of the width defined above */


        border-radius: .75rem;


        transition: var(--trans-transform);


        box-shadow: 0 0 .25rem 3px rgba(var(--contrast), .125);


    }


    .switch :checked ~ .slider::before {


        transform: translateX(1.5rem);


        box-shadow: 0 0 .25rem 3px rgba(var(--base), .25);


    }


    .switch :checked ~ .slider {


        background-color: rgb(var(--action-0));


    }




.toggle-switch .slider::before {


    content: '';


    display: block;


    width: 100%;


    height: 100%;


    position: absolute;


    top:0;


    left: 0;


    background-color: var(--base);


    transform: translateX(-1rem);


    border-radius: .75rem;


    transition: .3s;


    box-shadow: 0 0 .25rem 3px rgba(var(--contrast-rgb), .125);


}




.toggle-switch input:checked ~ .slider::before {


    transform: translateX(1rem);


    box-shadow: 0 0 .25rem 3px rgb(0, 0, 0, 0.25);


}




.toggle-switch input:checked ~ .slider {


    background-color: var(--action-0);


}




.toggle-switch input:active ~ .slider::before {


    transform: translate(0);


}






/*.theme-switcher {*/


/*    position: absolute;*/


/*    opacity: 0;*/


/*    width: 0;*/


/*    height: 0;*/


/*}*/


#theme-switch {


    z-index: 99;


    margin: 0;


    --wrap: nowrap;


    --gap: 1rem;


}


#theme-switch .slider {


    width: 3rem;


    height: 1.5rem;


}


#theme-switch .slider::before {


    transform: translateX(-1.5rem);


}


#theme-switch input:checked ~ .slider::before {


    transform: translateX(1.5rem);


}






/*#theme-switch,*/


/*.toggle-switch {*/


/*    --wrap: nowrap;*/


/*    cursor: pointer;*/


/*}*/


/*#theme-switch,*/


/*.toggle-switch input[type=checkbox] {*/


/*    --h: 2rem;*/


/*    width: calc(var(--h) * 2);*/


/*    height: var(--h);*/


/*    margin: 0 2rem 0 0;*/


/*    left: 0;*/


/*    appearance:none;*/


/*    background: var(--base-200);*/


/*    border: 1px solid var(--base-50);*/


/*    border-radius: var(--h);*/


/*    cursor: pointer;*/


/*    transition: all .3s ease;*/


/*    opacity: 1;*/


/*}*/




/*.toggle-switch input[type=checkbox] {*/


/*    position: relative;*/


/*}*/


/*.toggle-switch {*/


/*    position: relative;*/


/*}*/




@media (max-width: 600px) {


    .switch :active ~ .slider::before {


        transform: translateX(0);


    }


    #theme-switch {


        left: 1rem;


        z-index: var(--z-6);


        margin: 0;


        --wrap: nowrap;


        --gap: 1rem;


    }


    .wp-site-blocks > header {


        padding: 0!important;


    }


        #theme-switch [type=checkbox] {


            position: absolute;


            left: var(--offScreen);


        }


        @media (max-width: 600px) {


            #theme-switch {


                left: 1rem;


            }


        }


:checked ~ .slider .icon-sun-dim {


    --w: .75em;


    margin-top: .25em;


}




/* Icon wrapper styling */


/*#theme-switch .icon {*/


/*    --w: 1em;*/


/*    position: relative;*/


/*    top: 0;*/


/*    margin: 0 .25em;*/


/*    color: var(--contrast-200);*/


/*    z-index: 2;*/


/*    transform: translateX(0);*/


/*}*/






/*#theme-switcher:not(:checked) ~ .sun-dim,*/


/*#theme-switcher:checked ~ .moon {*/


/*    --w: 1.5em;*/


/*    color: var(--contrast);*/


/*}*/




/*#theme-switcher:not(:checked) ~ .moon,*/


/*#theme-switcher:checked ~ .sun-dim {*/


/*    top: -.17rem;*/


/*}*/


/*    #theme-switcher:not(:checked) ~ .sun-dim {*/


/*        color: var(--secondary-0);*/


/*        transform: translate(-2px, 2px);*/


/*    }*/


/*    #theme-switcher:checked ~ .moon {*/


/*        transform: translate(4px, 4px);*/


/*    }*/




/*#theme-switch span,*/


/*.toggle-switch input[type=checkbox]::before {*/


/*    --m: 2px;*/


/*    content: "";*/


/*    position: absolute;*/


/*    top: var(--m);*/


/*    left: var(--m);*/


/*    width: calc(var(--h) - (var(--m) * 2));*/


/*    height: calc(var(--h) - var(--m) * 2);*/


/*    border: 1px solid rgba(var(--contrast-rgb), .2);*/


/*    border-bottom: 3px solid var(--contrast-200);*/


/*    background: var(--base-50);*/


/*    border-radius: 50%;*/


/*    z-index: 1;*/


/*    transform: rotate(360deg);*/


/*    transition: transform var(--transition-base),*/


/*    left var(--transition-base),*/


/*    top var(--transition-base),*/


/*    height var(--transition-base);*/


/*}*/


/*    #theme-switch input:checked ~ span,*/


/*    .toggle-switch input[type=checkbox]:checked::before {*/


/*        left: calc(100% - (var(--h) - var(--m)));*/


/*        transform: rotate(-180deg);*/


/*        transition: transform var(--transition-base), left var(--transition-base);*/


/*    }*/


/*    .toggle-switch input[type=checkbox]:checked {*/


/*        background: var(--action-0);*/


/*    }*/




/*!* Focus States *!*/


/*.theme-switch:focus-visible + label {*/


/*    outline: 2px solid var(--action-0);*/


/*    outline-offset: 2px;*/


/*}*/




/*!* Icon Animations *!*/


/*#theme-switch .icon {*/


/*    transition:*/


/*            transform var(--transition-base),*/


/*            width var(--transition-base),*/


/*            height var(--transition-base),*/


/*            top var(--transition-base),*/


/*            color var(--transition-base);*/


/*}*/




/*#theme-switcher:not(:checked) ~ .icon.dark,*/


/*#theme-switcher:checked ~ .icon.light {*/


/*    transform: rotate(360deg);*/


/*    color: var(--contrast-200);*/


/*}*/


/*#theme-switcher:not(:checked) ~ .icon.light,*/


/*#theme-switcher:checked ~ .icon.dark {*/


/*    transform: rotate(-360deg);*/


/*    color: var(--contrast);*/


/*}*/




/*!* Hover Effects *!*/


/*#theme-switch:hover span {*/


/*    background-color: var(--base-100);*/


/*}*/






/*#theme-switch:hover .icon {*/


/*    color: var(--action-50);*/


/*}*/




/*!* Active State *!*/


/*#theme-switch:active span {*/


/*    transform: scale(.97);*/


/*}*/




/***********************************************************


SMOOTH SCROLLING


***********************************************************/


html {


    scroll-behavior: smooth;


.slider .icon-moon {


    --w: .666em;


    margin-top: .333em;


}




@media(prefers-reduced-motion){


    html {


        scroll-behavior: unset;


    }


    * {


        transition: none!important;


        animation: none!important;


    }


}




/*********************************************************


SPACING


*********************************************************/


main {


    min-height: 90vh;


    --justify: flex-start;


}




main > * {


    width: 100%;


    max-width: var(--maxWidth);


    margin: var(--setMargin);


}


main > .align-wide {


    max-width: var(--alignWide);


}


main > .align-full {


    --ml: 0;


    --mr: 0;


    max-width: var(--full);


}


main > section {


    --mt: 6rem;


}


main > *:first-child {


.slider .icon-sun-dim,


:checked ~ .slider .icon-moon {


    --w: 1em;


    margin-top: 0;


}




footer {


    padding: 1rem;


    background-color: var(--base-200);


    color: var(--contrast-200);


    text-align: center;


    margin: 4rem 0 0;


    position: relative;


    z-index: var(--z-top);


}


body:has(nav.fixed.bottom,nav.on-this-page) footer {


    padding-bottom: var(--offHeight);


}


footer p,


footer p + p {


    margin: .5rem auto;


:not(:checked) ~ .slider .icon-sun-dim {


    color: rgb(var(--action-0));


}




@media (min-width:768px) {


    footer {


        padding: 1rem 2rem var(--offHeight);


    }


}


/*********************************************************


GRIDS


*********************************************************/


.grid-view,


.item-grid {


/************************************************


GRIDS/ROWS/TABLES


************************************************/


/** GRID VIEW (default) **/


.item-grid{


    --columns: repeat(2, 1fr);


    display: grid;


    grid-template-columns: repeat(3, 1fr);


    grid-template-columns: var(--columns);


    gap: 10px;


}


.grid-view .item,


.item-grid:empty {


    display: none;


}


    .no-results,


    .item-grid .empty {


        height: 15vh;


        background-color: rgb(var(--base-50));


        border-radius: var(--radius);


        border: 2px dashed rgb(var(--base-200));


        font-style: italic;


    }


    .item-grid.stats {


        --columns: repeat(2, 1fr);


    }


    @media (min-width: 768px) {


        .item-grid {


            --width: 250px;


            --columns: repeat(auto-fill, minmax(var(--width), 1fr));


        }


        .item-grid.split-2 {


            --columns: repeat(2, 1fr);


        }


        .item-grid.split-3 {


            --columns: repeat(3, 1fr);


        }


        .item-grid.split-4 {


            --columns: repeat(4, 1fr);


        }


        .item-grid.split-5 {


            --columns: repeat(5, 1fr);


        }


        .item-grid.split-6 {


            --columns: repeat(6, 1fr);


        }


        .item-grid.split-7 {


            --columns: repeat(7, 1fr);


        }


        .item-grid.split-8 {


            --columns: repeat(8, 1fr);


        }


        .item-grid.split-9 {


            --columns: repeat(9, 1fr);


        }


    }




.item-grid .item {


    border-radius: var(--outerRadius);


    aspect-ratio: 1;


    display:flex;


    border-radius: var(--radius-outer);


    filter: none;


    transition: filter var(--transition-base), padding var(--transition-base), background-color var(--transition-base);


    position: relative;


}


.item-grid button {


    --height: max-content;


    .item-grid .item .item-actions {


        --gap: .125rem;


        z-index: 1;


        position: absolute;


        top: 0;


        right: 0;


        width: calc(100% - var(--btn));


    }


        .item-actions button,


        .item-actions .btn + label {


            min-height: var(--chipchip);


            width: var(--chipchip);


            z-index: var(--z-1);


        }


.item-grid .item .images,


.item-grid .item .images a {


    aspect-ratio: 1;


    width: 100%;


    height: 100%;


    display: flex;


}


.grid-view img,


.item-grid img {


    border-radius: var(--innerRadius);


    border-radius: var(--radius);


}


.item-grid .item-actions button {


    min-height: var(--chipchip);


    width: var(--chipchip);


}




/** LIST VIEW **/


.item-grid.list-view {


    display: flex;


    flex-direction: column;


    gap: 2rem;


    --gap: 2rem;


    gap: 0;


}


.item-grid.list-view .item .col {


    --gap: .5rem;


}


.item-grid.list-view img {


    width: 20%;


}




@media (min-width: 768px) {


    .item-grid,


    .grid-view {


        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));


    .item-grid.list-view .item {


        aspect-ratio: unset;


        align-items: flex-start;


        border-radius: var(--radius);


        padding: 1rem 0;


    }


    .list-view .item:nth-of-type(even) {


        background-color: rgb(var(--base));


    }


    .list-view img {


        width: 20%;


    }


    .item.col {


        --wrap: nowrap;


    }




.empty-state {


    --w: 1.2em;


    grid-column: 1 / span 2;


    display: flex;


    flex-direction: column;


    justify-content: center;


    align-items: center;


    text-align: center;


    margin: 1rem auto;


    max-width: 66%;


    background-color: rgb(var(--base-100));


    border: 2px dashed rgb(var(--base-50));


    padding: 1rem;


}




/*********************************************************


TYPOGRAPHY


*********************************************************/


h1 b, h1 strong,


h2 b, h2 strong,


h3 b, h3 strong,


h4 b, h4 strong,


h5 b, h5 strong,


h6 b, h6 strong {


    font-weight: var(--hBold);


    letter-spacing: 2px;


/***********************************************


TABLES


***********************************************/


table {


    white-space: nowrap;


    width: 100%;


    display: table;


    margin: 0 0 2rem;


    border-radius: 4px;


    height: min(100%, var(--maxHeight));


    color: rgb(var(--contrast));


    overflow: auto;


    position: relative;


}




h1,


h2,


h3,


h4,


h5,


h6 {


    --mt: 1.5em;


    --mb: .25em;


    font-family: var(--heading);


thead,tfoot {


    position: sticky;


    z-index: 10;


    background-color: rgb(var(--base));


    text-transform: uppercase;


    font-weight: var(--hWeight);


    line-height: 1.3;


    margin: var(--mt) var(--mr) var(--mb) var(--ml);


}


h1.inline,


h2.inline,


h3.inline,


h4.inline,


h5.inline,


h6.inline {


    font-size: 1.2rem;


    font-weight: 600;


    display: inline-block;


    margin: 0 2rem 0 0;


    letter-spacing: .05em;


}


h1 small,


h2 small,


h3 small,


h4 small,


h5 small,


h6 small {


    display: block;


    line-height: .8;


    font-family: var(--body);


    font-size: .5em;


    padding: .5rem 0;


    line-height: 2;


    font-weight: normal;


}




h1.inline + *,


h2.inline + *,


h3.inline + *,


h4.inline + *,


h5.inline + *,


h6.inline + * {


    display: inline-block;


    margin: .5rem 0;


}


h1.inline + .term-list,


h2.inline + .term-list,


h3.inline + .term-list,


h4.inline + .term-list,


h5.inline + .term-list,


h6.inline + .term-list {


    display: inline-flex;


    margin: .5rem 0;


tr:nth-of-type(even){


    background-color: rgb(var(--base-200));


}




h1 {


    font-size: var(--xxxlarge);


    font-weight: var(--hWeight);


    line-height: 1;


    margin: 0 var(--mr) .25em var(--ml);


}


h1:first-of-type {


    margin-top: 20vh;


}


h1 small {


    display: block;


    font-size: var(--small);


    font-weight: var(--bWeight);


    line-height: 1;


    font-family: var(--body);


tfoot th {


    vertical-align: middle;


}




h2 {


    font-size: var(--xxlarge);


}


h3 {


    font-size: var(--xlarge);


}


h4 {


    /*font-family: var(--body);*/


    font-weight: 400;


    font-size: var(--large);


}


h5, h6 {


    /*font-family: var(--body);*/


    font-weight: 400;


    font-size: var(--medium);


tfoot th:first-of-type {


    text-align: right;


}




p {


    line-height: 1.6;


}


main > * h1,


main > * h2,


main > * h3,


main > * h4,


main > * h5,


main > * h6,


main > * p {


    width: 100%;


}


main > * p {


    margin: .5rem 0;


}


/*p + p {*/


/*    margin-top: 2.5rem;*/


/*}*/




a {


    color: var(--action-0);


    text-decoration: none;


}


ul a {


    display: inline-flex;


    text-decoration: none;


thead tr, tfoot tr {


    background-color: rgba(var(--base),var(--op-6));


    box-shadow: rgba(var(--base),var(--op-45)) var(--shdw);


}




a:visited {


    color: var(--action-100);


thead tr {


    border-bottom: 1px solid rgb(var(--contrast-200));


}


a:hover {


    color: var(--action-50);


    text-decoration: underline;




tfoot tr {


    border-top: 1px solid rgb(var(--contrast-200));


}


ol {


    list-style-type:decimal;




thead {


    top: 0;


}


/******************************************************************


BUTTONS


******************************************************************/


.buttons {


    --wrap: wrap;


    --justify: flex-start;


    margin: 1rem var(--mr) 1rem var(--ml);


    width: 100%;




tfoot {


    bottom: 0;


}




thead th {


    width: max-content;


}




th p {


    margin: 0!important;


}




td {


    width: max-content;


    padding: .5rem 1rem;


}




td .toggle input[type=checkbox] {


    margin: 0;


}




td .field {


    margin: .25rem 0;


}




td[data-id="actions"] label {


    margin: 0;


    padding: 0;


}


.buttons.fit {




td .description {


    display: none;


}




td input[type=text] {


    width: fit-content;


    margin: 1rem 2rem;


}


.buttons li {


    --justify: stretch;


    --align: stretch;


    padding: 0;


    list-style: none;


    overflow:hidden;


    width: 100%;


}


.list-none {


    list-style: none;


    max-width: 40vw;


    padding: .25em!important;


    font-size: var(--txt-x-small)!important;


}




@media (min-width: 768px){


    .buttons {


        max-width: var(--maxWidth);


        margin: 3rem var(--mr) 3rem var(--ml);


    }


tbody tr {


    border: 2px solid transparent;


}


ul.socials a,


.buttons a,


.btn + label,




tbody tr:focus-within {


    background-color: rgb(var(--base-100));


    border-color: rgb(var(--action-50))


}




[data-stuck] {


    background-color: rgba(var(--base),var(--op-4));


    position: sticky;


    left: -1rem;


    z-index: 15;


    box-shadow: rgba(var(--base),var(--op-45)) var(--shdw-subtle-right);


}




tbody [data-stuck] {


    z-index: 5;


}




thead [data-stuck],


tfoot [data-stuck] {


    background: rgb(var(--base));


}


figure:has(table) {


    width: 100%;


    height: max-content;


}


/***********************************************


BUTTONS


***********************************************/


button,


[type=submit],


a.button,


a.wp-block-button__link,


button {


    --justify: center;


a.btn,


.btn + label,


li.btn,


.buttons a {


    --justify:center;


    --align: center;


    --dir: row;


    --wrap: nowrap;


    width: fit-content;


    text-transform: uppercase;


    text-decoration: none;


    text-align: center;


    background-color: var(--base-100);


    color: var(--contrast-50);


    border: 1px solid var(--base-200);


    border-radius: var(--innerRadius);


    background-color: rgb(var(--base-100));


    color: rgb(var(--contrast-50));


    border: 1px solid rgb(var(--base-200));


    border-radius: var(--radius);


    padding: .25rem 1rem;


    font-family: var(--heading);


    cursor: pointer;


    outline: inherit;


    height: var(--height);


    outline: 0;


    min-height: var(--btn);


    display: inline-flex;


    justify-content: var(--justify);


    align-items: var(--align);


    gap: var(--gap);


    flex-wrap: var(--wrap);


    flex-direction: var(--dir);


    transition: color var(--transition-base);


    transition-property: color, border,background-color;


    position: relative;


    box-shadow: rgba(var(--base),var(--op-6)) var(--shdw-inset);


}


    .btn.chip {


        min-height: var(--chip);


    }


    .buttons.left a {


        --justify: flex-start;


    }


    .buttons.right a {


        --justify: flex-end;


    }


    .buttons.x-btw a {


        --justify: space-between;


    }


button.outline,


[type=submit].outline,


a.btn.outline,


.filters .btn + label,


.buttons .outline a {


    --color: rgb(var(--contrast));


    background-color: transparent;


    color: var(--color);


    border: 1px solid var(--color);


}




a.button:hover,


a.button:focus,


ul.socials a:hover,


ul.socials a:focus,


.buttons a:hover,


.buttons a:focus,


.btn + label:hover,


.btn + label:focus,


button:hover,


button:focus,


[type=submit]:hover,


[type=submit]:focus,


button:hover,


button:focus {


    background-color: var(--action-0);


    color: var(--action-contrast);


a.btn:hover,


a.btn:visited:hover,


a.btn:focus,


.btn + label:hover,


.btn:focus + label,


.btn:checked + label,


li.btn:hover,


li.btn:focus,


.buttons a:hover,


.buttons a:visited:hover,


.buttons a:focus {


    background-color: rgb(var(--action-0));


    color: rgb(var(--action-contrast));


    box-shadow: var(--shdw-none);


}




.buttons .outline a {


    background-color: transparent;


    color: var(--action-0);


    border: 2px solid var(--action-0);


}


.buttons .outline a:hover,


.buttons .outline a:focus {


    background-color: var(--action-0);


    color: var(--action-contrast);


    border-color: var(--action-0);


}


    button.outline:hover,


    button.outline:focus,


    [type=submit].outline:hover,


    [type=submit].outline:focus,


    a.btn.outline:hover,


    a.btn.outline:visited:hover,


    a.btn.outline:focus,


    .filters .btn + label:hover,


    .filters .btn:focus + label,


    .buttons .outline a:hover,


    .buttons .outline a:visited:hover,


    .buttons .outline a:focus {


        background-color: rgb(var(--action-0));


        color: rgb(var(--action-contrast));


        border-color: rgb(var(--action-0));


    }




.buttons a {


    width: 100%;


}




ul.socials a:disabled,


ul.socials a:disabled:hover,


.btn:disabled + label,


.btn:disabled + label:hover,


[type=submit]:disabled,


[type=submit]:disabled:hover,


[type=submit]:disabled:focus,


a.button:disabled,


a.wp-block-button__link:disabled,


button:disabled,


a.button:disabled:hover,


a.wp-block-button__link:disabled:hover,


button:disabled:focus,


button:disabled:hover,


a.button:disabled:focus,


a.wp-block-button__link:disabled:focus,


button:disabled:focus {


[type=submit]:disabled,


[type=submit]:disabled:focus,


[type=submit]:disabled:hover,


.btn:disabled + label,


.btn:disabled:hover + label,


.btn:disabled:focus + label {


    opacity: .5;


    background-color: var(--base-200)!important;


    color: var(--contrast-200)!important;


}


details .icon {


    --w: 1.5em;


    cursor: not-allowed;


    background-color: rgb(var(--base-200));


    color: rgb(var(--contrast-200));


}




button.voted .icon,


button.favourite.favourited {


    animation: favourite-pop .4s cubic-bezier(.25, .46, .45, .94);


}


@keyframes favourite-pop {


    0% { transform: scale(1); }


    50% { transform: scale(1.3); }


    75% { transform: scale(.9); }


    100% { transform: scale(1); }


[type=submit] {


    margin: 1rem 0;


}




button.filter-toggle {


    border: 1px solid var(--base-200);


    background-color: transparent;


    white-space: nowrap;


    font-size: 1rem;


    padding: .35em;


    --w: 1.2em;


.filters .btn + label,


.filters button {


    min-height:var(--chip);


}


.filter-toggle:hover {


    border-color: var(--action-50);


    color: var(--action-50);


.filters .btn + label {


    background-color: rgb(var(--base-100));


    border: 1px solid rgb(var(--base-200));


    color: rgb(var(--contrast-200));


}


.filter-toggle:focus {


    background-color: var(--action-50);


    color: var(--action-contrast);


    .filters .btn:checked + label {


        border-color: rgb(var(--contrast));


        color: rgb(var(--contrast));


    }




/**** WP BLOCK BUTTONS ****/


.buttons {


    --wrap: wrap;


    --justify: flex-start;


    margin: 1rem auto;


    width: 100%;


    padding: 0;


}


    .buttons li {


        --justify: stretch;


        --align: stretch;


        padding: 0;


        list-style: none;


        overflow: hidden;


    }


    .buttons a {


        width: 100%;


    }


    .buttons.fit {


        width: fit-content;


        margin: 1rem 2rem;


    }


    @media (min-width: 768px) {


        .buttons {


            max-width: var(--content);


            margin: 3rem auto;


        }


    }


a.sticky,


button.sticky,


.main-actions .buttons {


    z-index: var(--z-6);


    position: fixed;


    bottom: var(--btn_);


}


body:has(.on-this-page) a.sticky,


body:has(.on-this-page) button.sticky,


body:has(.on-this-page) .main-actions .buttons {


    bottom: calc(var(--btn_) + var(--chip_));


}


.main-actions .buttons button,


button.sticky {


    width: var(--btn);


    height: var(--btn);


    background-color: rgba(var(--base),var(--op-4));


    color: rgb(var(--contrast));


    box-shadow: rgba(var(--base),var(--op-45)) var(--shdw);


    transition: var(--trans-size), var(--trans-color);


}


    .main-actions .buttons button:hover,


    .main-actions .buttons button:focus,


    a.sticky:hover,


    a.sticky:focus,


    button.sticky:hover,


    button.sticky:focus {


        background-color: rgba(var(--action-0),var(--op-6));


        color: rgb(var(--action-contrast));


    }


        .main-actions .buttons button:disabled,


        .main-actions .buttons button:disabled:hover,


        .main-actions .buttons button:disabled:focus,


        button.sticky:disabled,


        button.sticky:disabled:hover,


        button.sticky:disabled:focus {


            opacity: .5;


            background-color: rgba(var(--base),var(--op-3));


            color: rgb(var(--contrast));


        }




    .qtoggle {


        left: 0;


        transition: left var(--trans-base), width var(--trans-base), border var(--trans-base), var(--trans-color);


    }


    .main .m-actions .refresh {


        width: var(--btn);


        border-radius: 0;


        background-color: rgb(var(--base-50));


        color: rgb(var(--contrast));


    }


        .main .m-actions .refresh:hover,


        .main .m-actions .refresh:focus {


            background-color: rgb(var(--action-0));


            color: rgb(var(--action-contrast));


        }


        .main .refresh .indicator {


            background-color: rgba(var(--base), var(--op-3));


            top: 0;


            right: 0;


            height: 1.1em;


            width: 1.1em;


        }


        .refresh .countdown:not(.counting) {


            display: none;


        }




    .main h2 {


        margin: .5em 0;


        font-size: var(--txt-medium);


    }








#back-to-top {


    min-height: var(--chip);


    bottom: -3rem;


    right: 0;


    transition: bottom var(--trans-base);


}


body:has(.main-actions) #back-to-top {


    right: calc(var(--btn_) + .5rem);


}


.scroll-up #back-to-top {


    bottom: 0;


}


body:has(.fixed.bottom).scroll-up #back-to-top {


    bottom: var(--btn);


}




button.favourite:not(.favourited) .heart-fill,


button.favourite.favourited .heart,


.toggle.notifications:not(.has) .bell-ringing,


.toggle.notifications.has .bell,


.vote button:not(.voted) .upvoted,


.vote button:not(.voted) .downvoted,


.vote .voted .upvote,


.vote .voted .downvote {


    display: none;


body:has(.on-this-page).scroll-up.scroll-up #back-to-top {


    bottom: calc(var(--btn) + var(--chip_));


}


button.favourite:not(.favourited) .heart,


button.favourite.favourited .heart-fill,


.toggle.notifications:not(.has) .bell,


.toggle.notifications.has .bell-ringing,


.vote button:not(.voted) .upvote,


.vote button:not(.voted) .downvote,


.vote .voted .upvoted,


.vote .voted .downvoted {


    display: block;


}


/******************************************************************


ICONS


******************************************************************/




i.icon {


    width: var(--w);


    height: var(--w);


    display: inline-block;


    background-color: currentColor;


    mask-image: var(--icon);


    -webkit-mask-image: var(--icon);


    mask-size: contain;


    -webkit-mask-size: contain;


    mask-repeat: no-repeat;


    -webkit-mask-repeat: no-repeat;


    mask-position: center;


    -webkit-mask-position: center;


    vertical-align: middle;


    transition: var(--transition-size), var(--transition-color);


}


.icon.small,


nav ul .icon {


    --w: 24px;


body:has(.fixed.bottom):has(nav.index.on-this-page).scroll-up.scroll-up #back-to-top {


    bottom: calc(var(--btn) + var(--chipchip));


}




.icon-colour {


    background: rgb(183, 51, 46);


    background: linear-gradient(180deg, rgba(255,0,128,1) 0%, rgba(250,71,101,1) 14%, rgba(251,121,35,1) 28%, rgba(176,190,19,1) 42%, rgba(14,204,0,1) 56%, rgba(14,225,166,1) 70%, rgba(63,152,253,1) 84%, rgba(166,90,196,1) 100%);


button[data-action=refresh],


button.clear-filters {


    width: max-content;


    min-height: var(--chip_);


    --w: var(--txt-small);


    padding: .25rem .5rem;


}




.icon.logo-basic svg path {


    transition: fill var(--timing) var(--function);


}


.icon.logo-basic svg path#innerCircle,


.icon.logo-basic svg path#outerSkull {


    fill: var(--base);


}




a .icon.logo-basic:hover svg path {


    fill: var(--base);


}


a .icon.logo-basic:hover svg path#innerCircle,


a .icon.logo-basic:hover svg path#outerSkull {


    fill: var(--action-0);


}




.icon.grab {


    cursor: grab;


}




main a .icon {


    margin-right: .5em;


}




body:has(#theme-switcher:not(:checked)) .icon.logo-split-color {


    position: relative;


}


body:has(#theme-switcher:not(:checked)) .icon.logo-split-color::before{


    content: '';


    display: block;


    width:60%;


    height:60%;


    border-radius: 50%;


    background-color: var(--dark-200);


    position: absolute;


    left: 18%;


    top: 22%;


    z-index:-1;


}




path#refresh {


    transform-origin: center;


    transform-box: fill-box;


    animation: spin 1s var(--function) infinite;


}




/******************************************************************


ACCESSIBILITY


******************************************************************/


@@ -1545,219 +2105,291 @@


    width: 1px;


    word-wrap: normal !important;


}


input[type=checkbox] + label:focus,


input[type=checkbox] + label:focus-visible,


input[type=radio] + label:focus,


input[type=radio] + label:focus-visible,




input[type=checkbox]:focus + label,


input[type=checkbox]:focus-visible + label,


input[type=radio]:focus + label,


input[type=radio]:focus-visible + label,


input:focus,


input:focus-within {


    outline: 2px solid var(--action-0) !important;


    outline: 2px solid rgb(var(--action-0)) !important;


    outline-offset: 2px !important;


    box-shadow: 0 0 0 4px rgba(var(--action-rgb), var(--rgb-light))!important;


    box-shadow: 0 0 0 4px rgba(var(--action-0), var(--op-3))!important;


}




[aria-busy="true"] {


    cursor: progress;


}




/* Disabled states */


[aria-disabled="true"],


[disabled] {


    cursor: not-allowed;


    opacity: .7;


}




/******************************************************************


DETAILS


******************************************************************/


details {


    padding: .25rem 0;


    border-top: 1px solid var(--base-200);


    border-bottom: 1px solid var(--base-200);


[type=checkbox][hidden] + label,


[type=radio][hidden] + label,


.btn[hidden] + label {


    display: none!important;


}


details[open] {


    background-color: var(--base-50);




/**************************************************************


FORM ELEMENTS


**************************************************************/


label {


    display: inline-flex;


    align-items: center;


    gap: .5em;


}


details summary {


    --wrap: nowrap;


    list-style: none;


    text-transform: uppercase;


[type=radio],


[type=checkbox] {


    position: absolute;


    opacity: 0;


    left: var(--offScreen);


}


[type=radio] + label,


[type=checkbox] + label {


    cursor: pointer;


    border: 0;


    transition: background-color var(--transition-base);


    transition-property: background-color, border;


    position: relative;


    padding: .5rem 2.5rem .5rem .5rem;


    padding-left: 1.5rem;


}


.field:is(.radio,.checkbox) fieldset {


    display: grid;


    grid-template-columns: repeat(2, 1fr);


    gap: .5rem;


}


details summary:hover {


    background-color: var(--base-100);


    border-color: var(--base-100);


    color: var(--contrast);


    transition: background-color var(--transition-base);


    transition-property: background-color, border,color;


}


details[open] > summary {


    background-color: var(--base-50);


}


details summary::after {


    content: "";


    background-color: var(--contrast-100);


    -webkit-mask-repeat: no-repeat;


    -webkit-mask-size: contain;


    -webkit-mask-image: var(--details);


    mask-image: var(--details);


    mask-repeat: no-repeat;


    mask-size: contain;


    width: 1.25rem;


    height: 1.25rem;


    margin-left: auto;


    transition: background-color var(--transition-base);


    transition-property: background-color, transform;


}




details summary:hover::after,


details[open] > summary::after {


    background-color: var(--contrast);


}


details[open] > summary::after {


    transform: rotate(-540deg);


    transition: background-color var(--transition-base);


    transition-property: background-color, transform;


}




details::details-content {


    opacity: 0;


    block-size: 0;


    overflow-y: clip;


    transition: content-visibility var(--timing) allow-discrete, opacity var(--timing), block-size var(--timing);


}


details[open]::details-content {


    opacity: 1;


    block-size: auto;


}


@media (prefers-reduced-motion: no-preference){


    details {


        interpolate-size: allow-keywords;


    @media(min-width: 768px) {


        .field:is(.radio,.checkbox) fieldset {


            grid-template-columns: repeat(3, 1fr);


        }


    }


.field:is(.radio,.checkbox,.true-false) label {


    position: relative;


    top: unset;


    left: unset;


    padding: 0 0 0 var(--chip);


    display: inline-flex;


    border: 1px solid transparent;


    font-weight: var(--fw-b);


    font-size: var(--txt-medium);


}


    [type=radio] + label:hover,


    [type=radio]:focus + label,


    [type=checkbox] + label:hover,


    [type=checkbox]:focus + label {


        color: rgb(var(--action-0));


    }




    [type=radio].btn + label:hover,


    [type=radio].btn:checked + label:hover {


        color: rgb(var(--action-contrast));


    }




    [type=radio] + label::before,


    [type=radio] + label::after,


    [type=checkbox] + label::before,


    [type=checkbox] + label::after {


        content: '';


        position: absolute;


        z-index: var(--z-2);


    }


            [type=checkbox] + label::before,


            [type=radio] + label::before {


                z-index: var(--z-1);


            }


        [type=checkbox] + label::after {


            left: .666em;


            top: .125em;


            transform: rotate(45deg);


            width: .25em;


            height: .75em;


            border: solid rgb(var(--action-contrast));


            border-width: 0 2px 2px 0;


            display: none;


        }


        [type=checkbox] + label::before,


        [type=radio] + label::before {


            display: block;


            top: .3em;


            left: .3em;


            width: .75rem;


            height: .75rem;


            border: 2px solid rgb(var(--contrast-200));


            background-color: transparent;


            border-radius: var(--radius);


        }


            [type=radio] + label::before {


                border-radius: 50%;


            }




        [type=checkbox]:checked + label::before {


            background-color: rgb(var(--action-0));


            border-color: rgb(var(--base-50));


        }


        [type=checkbox]:checked + label::after {


            display: block;


        }




        [type=radio]:checked + label::before {


            background-color: rgb(var(--action-0));


            box-shadow: rgba(var(--base), var(--op-45)) var(--shdw-inset);


        }


/** Button checkboxes and radios **/


input.btn + label::before,


input.btn + label::after {


    display: none;


}




/******************************************************************


FORMS & FIELDS


******************************************************************/






textarea,


input[type=date],


input[type=number],


input[type=text],


input[type=url],


input[type=email],


input[type=textarea],


input[type=tel],


input[type=password],


input[type=search] {


input:is([type=date], [type=number], [type=text], [type=url],


         [type=email], [type=tel], [type=password], [type=search],


         [type=datetime-local], [type=time]) {


    font-family: var(--body);


    font-size: var(--medium);


    color: var(--contrast);


    font-size: var(--txt-medium);


    color: rgb(var(--contrast));


    padding: var(--p-y) var(--p-x);


    border-radius: var(--innerRadius);


    background-color: var(--base);


    border-radius: var(--radius);


    background-color: rgb(var(--base));


    outline: 0;


    border: 1px solid var(--base-100);


    border-bottom: 2px solid var(--contrast-200);


    border: 1px solid rgb(var(--base-100));


    border-bottom: 2px solid rgb(var(--contrast-200));


    width: 100%;


    max-width: 100%;


    margin: 0 4px;


    transition: background-color var(--transition-base);


    transition-property: background-color, border;


}




textarea:focus,


input[type=number]:focus,


input[type=text]:focus,


input[type=url]:focus,


input[type=email]:focus,


input[type=textarea]:focus,


input[type=tel]:focus,


input[type=password]:focus,


input[type=search]:focus {


    outline: var(--action-50);


    background-color: var(--base-100);


    color: var(--contrast);


input:is([type=date], [type=number], [type=text], [type=url],


         [type=email], [type=tel], [type=password], [type=search],


         [type=datetime-local], [type=time]):focus {


    outline: rgb(var(--action-50));


    background-color: rgb(var(--base-100));


    color: rgb(var(--contrast));


}


textarea::placeholder,


input::placeholder {


    font-family: var(--body);


    color: var(--base-200);


    color: rgb(var(--base-200));


}


@media (min-width: 768px) {


    :root {


        --p-y: 1rem;




.field > label {


    position: relative;


    z-index: var(--z-1);


    display:inline-block;


    top: .75em;


    left: 1em;


    padding: 0 .5em;


    background-color:rgb(var(--base));


    font-size:var(--txt-small);


    font-weight: var(--fw-b-light);


    text-transform:uppercase;


    border: 1px solid transparent;


}


    .field.selector > label {


        top: 2.25em;


    }


    .field.selector .filter-toggle {


        width: var(--chipchip);


        min-height: var(--chipchip);


        padding: 0;


    }


.field:not(.radio):not(.checkbox):not(.true-false):not(.taglist):focus-within > label {


    background-color:rgb(var(--action-0));


    color: rgb(var(--action-contrast));


    border-radius: 4px;


}




.field.taglist, .field.taglist .field {


    border: none;


}




.field li.btn {


    min-height: var(--chip);


}


/******************************************************************


SELECT


******************************************************************/


select {


    /*appearance: none;*/


    /*-webkit-appearance: none;*/


    /*-moz-appearance: none;*/


    background: var(--base);


    border: 2px solid var(--base-100);


    border-radius: var(--innerRadius);


    color: var(--contrast);


    background: rgb(var(--base));


    border: 2px solid rgb(var(--base-100));


    border-radius: var(--radius);


    color: rgb(var(--contrast));


    cursor: pointer;


    font-family: var(--body);


    font-size: var(--small);


    padding: .5rem 1rem;


    font-size: var(--txt-small);


    padding: var(--sp1);


    width: 100%;


    transition: var(--transition-color);


}




select:disabled {


    background-color: var(--base-50);


    border-color: var(--base-100);


    color: var(--base-200);


    background-color: rgb(var(--base-50));


    border-color: rgb(var(--base-100));


    color: rgb(var(--base-200));


    cursor: not-allowed;


}




select option {


    background: var(--base);


    color: var(--contrast);


    padding: .5rem;


    background: rgb(var(--base));


    color: rgb(var(--contrast));


    padding: var(--sp1);


}




select option:hover,


select option:focus,


select option:active,


select option:checked {


    background: var(--action-0);


    color: var(--base);


    box-shadow: 0 0 0 100px var(--action-0) inset;


    background: rgb(var(--action-0));


    color: rgb(var(--base));


    box-shadow: 0 0 0 100px rgb(var(--action-0)) inset;


}




select option:checked {


    background: var(--action-0) linear-gradient(0deg, var(--action-0) 0%, var(--action-0) 100%);


    color: var(--base);


    background: rgb(var(--action-0)) linear-gradient(0deg, rgb(var(--action-0)) 0%, rgb(var(--action-0)) 100%);


    color: rgb(var(--base));


}




select:hover {


    border-color: var(--action-0);


    border-color: rgb(var(--action-0));


}




select:focus {


    border-color: var(--action-0);


    border-color: rgb(var(--action-0));


}




/******************************************************************


SEARCH & SPECIAL INPUTS


******************************************************************/


input[type=search]:focus + .clear-search {


    opacity: 1;


    cursor: pointer;


    transition: opacity var(--transition-base);


}




.search-container .clear-search {


    opacity: 0;


    cursor: default;


    transition: opacity var(--transition-base);


    max-width: 0;


    padding: 0;


    flex-shrink: 0;


    transition: width var(--trans-base), flex-shrink var(--trans-base);


}


    .search-container [type="search"]:focus + .clear-search {


        max-width: unset;


        padding: .25rem 1rem;


        flex-shrink: unset;


    }




.search-container.open.open [hidden] {


    display: block!important;


}




.search-container .icon.search {


    padding: 4px 8px;


    color: var(--contrast-200);


    color: rgb(var(--contrast-200));


    --w: 3rem;


}




input[type="search"]::-moz-search-clear-button,


input[type="search"]::-ms-clear,


input[type="search"]::-ms-reveal,


@@ -1776,1852 +2408,88 @@


    -webkit-appearance:none;


}




.integration .label,


label {


    text-transform: uppercase;


    font-weight: bold;


    margin-bottom: .5rem;


    display: block;


}




/**********************


SPECIAL FIELDS


**********************/


.selected-items {


    --justify: flex-start;


    --gap: .5rem;


    margin-bottom: .5rem;


}




.selected-item {


    padding: .25rem .5rem;


    margin: .125em;


    background: var(--base-100);


    border-radius: .25rem;


    font-size: var(--medium);


    border: 1px solid var(--base-200);


    position: relative;


}




.remove-item {


    background: none;


    border: none;


    padding: .25rem;


    cursor: pointer;


    color: #666;


    border-radius: var(--innerRadius);


    width: 1.5em;


    height: 1.5em;


}


.remove-item .close {


    width: .5em;


    height: .5em;


}




.remove-item:hover {


    color: var(--action-0);


    background: #fee;


}




.clear-filters {


    margin-left: auto;


    border: 1px solid var(--base-200);


}


[type=radio],


[type=checkbox],


input.ch {


    position: absolute;


    opacity: 0;


    left: -200vw;


}


/* Pseudo checkbox */


[type=radio] + label,


[type=checkbox] + label,


input.ch + label {


    position: relative;


    cursor: pointer;


}


[type=radio] + label:hover,


[type=checkbox] + label:hover {


    color: var(--action-0);


}


[type=radio] + label::before,


[type=checkbox] + label::before,


input.ch + label::before,


[type=radio] + label::after,


[type=checkbox] + label::after,


input.ch + label::after {


    content: '';


    position: absolute;


    top: 50%;


}






[type=radio] + label::after,


[type=checkbox] + label::after,


input.ch + label::after {


    left: 5px;


    transform: translateY(-70%) rotate(45deg);


    width: 5px;


    height: 10px;


    border: solid var(--light-0);


    border-width: 0 2px 2px 0;


    display: none;


}










[type=radio] + label::before,


[type=checkbox] + label::before,


input.ch + label::before {


    left: 0;


    transform: translateY(-50%);


    width: 1rem;


    height: 1rem;


    border: 2px solid var(--contrast-200);


    background-color: var(--base);


    border-radius: var(--innerRadius);


    transition: background-color var(--transition-base),


    border-color var(--transition-base);


}


[type=radio]:hover + label::before,


[type=checkbox]:hover + label::before,


input.ch:hover + label::before {


    border-color: var(--action-200);


}




[type=radio]:checked + label::before,


[type=checkbox]:checked + label::before,


input.ch:checked + label::before {


    background-color: var(--action-0);


    border-color: var(--action-100);


}




[type=radio]:checked + label::before {


    border-radius: 50%;


}




[type=checkbox]:checked + label::after,


input.ch:checked + label::after {


    display: block;


    left: 5px;


    top: 50%;


    transform: translateY(-70%) rotate(45deg);


    width: .35rem;


    height: .66rem;


    border: solid var(--light-0);


    border-width: 0 2px 2px 0;


}




[type=radio]:disabled + label,


[type=checkbox]:disabled + label,


input.ch:disabled + label {


    cursor: not-allowed;


    background-color: var(--base-50);


    color: var(--base-200);


    border-color: var(--base-200);


}


[type=radio]:disabled + label:hover,


[type=checkbox]:disabled + label:hover,


input.ch:disabled + label:hover {


    background-color: var(--base-50);


    color: var(--base-200);


    border-color: var(--base-200);


}


[type=radio]:disabled + label::before,


[type=checkbox]:disabled + label::before,


input.ch:disabled + label::before {


    border-color: var(--base-200);


}




[type=radio]:not(.btn) + label,


[type=checkbox]:not(.btn) + label,


input.ch + label {


    flex: 1;


    padding-left: 2rem;


    transform-origin: top center;


    transition: transform .3s ease;


    will-change: transform;


}




/* Non-pseudo checkbox, that acts more like a button/pill style */


.btn + label::before,


.btn + label::after {


    display: none;


}


.btn + label {


    --w: 1.2em; /* For icons */


    border: 1px solid var(--base-200);


    border-radius: var(--innerRadius);


    min-width: 2rem;


    min-height: 2rem;


    margin: 0;


    display: flex;


    justify-content: center;


    align-items: center;


    flex-wrap: nowrap;


    gap: .5rem;


    color: var(--contrast-200);


    opacity: .8;


}


.radio-options.status label {


    padding: 0 .5rem;


}


.btn:checked + label {


    border-color: var(--contrast);


    color: var(--contrast);


    opacity: 1;


}




.btn + label:hover {


    color: var(--action-50);


    border-color: var(--action-50);


}




.btn[hidden] + label {


    display: none;


}




/* DATE */


.date-wrapper {


    position: relative;


    display: inline-block;


}


input[type=date] {


    padding: 8px 36px 8px 8px;


    /*border: 1px solid #ccc;*/


    border-radius: 4px;


}


input[type=date]::-webkit-calendar-picker-indicator {


    opacity: 0;


    width: 100%;


    height: 100%;


    position: absolute;


    top: 0;


    left: 0;


    cursor: pointer;


}


input[type=date] + .icon {


    --w: 20px;


    position: absolute;


    right: 10px;


    top: 50%;


    transform: translateY(-50%);


    pointer-events: none; /* This allows clicks to pass through to the input below */


}




/** TIME **/






input[type=url] {


    background: var(--linkIcon);


    background: var(--icon);


    background-position: .5em;


    background-size: 1em;


    background-repeat: no-repeat;


    padding-left: 2em;


}






.field {


    margin: 2rem 0;


    position: relative;


}


.field:has(.has-tooltip) label {


    margin-left: 2rem;


}


/***************


TOGGLE TEXT


***************/


.toggle-text input {


    display: none;


}




.toggle-text input + label {


    font-weight: normal;


    color: var(--contrast)!important;


    text-transform: none;


    cursor: pointer;


    position: relative;


    -webkit-user-select: none;


    -moz-user-select: none;


    -ms-user-select: none;


    user-select: none;


}


.toggle-text label::before,


.toggle-text label::after {


    display: none;


}


.toggle-text label {


    padding-left: 0!important;


}




.toggle-text input + label .text {


    position: relative;


    margin: 0 .5rem;


    font-weight: bold;


    width: fit-content;


    padding: 2px 4px;


    border: 1px solid var(--action-50);


    border-radius: 4px;


    color: var(--action-50)!important;


}


table .toggle-text input+label .text {


    color: var(--contrast)!important;


    border-color: var(--contrast);


}


.toggle-text:hover .text,


table .toggle-text:hover .text {


    background-color: var(--action-50);


    color: var(--light-0)!important;


    border-color: var(--action-50);


}




.toggle-text input + label .off,


.toggle-text input + label .on {


    /*left: 0;*/


    /*position: absolute;*/


    /*top: 0;*/


    -webkit-transition: opacity .125s ease-out, -webkit-transform .125s ease-out;


    transition: opacity .125s ease-out, -webkit-transform .125s ease-out;


    transition: transform .125s ease-out, opacity .125s ease-out;


    transition: transform .125s ease-out, opacity .125s ease-out, -webkit-transform .125s ease-out;


}




.toggle-text input + label .off {


    opacity: 1;


    max-width: 100%;


    -webkit-transform: none;


    transform: none;


}




.toggle-text input + label .on {


    opacity: 0;


    max-width: 0;


    -webkit-transform: translate3d(0, 100%, 0);


    transform: translate3d(0, 100%, 0);


}




.toggle-text input:checked + label .off {


    opacity: 0;


    max-width: 0;


    -webkit-transform: translate3d(0, -100%, 0);


    transform: translate3d(0, -100%, 0);


}




.toggle-text input:checked + label .on {


    max-width: 100%;


    opacity: 1;


    -webkit-transform: none;


    transform: none;


}






/******************************************************************


TAXONOMY SELECTOR


******************************************************************/


.items-container {


    margin: 0;


    padding: 0;


    width: 100%;


}


.create-new-term {


    margin-top: 1rem;


    width: 100%;


}


.create-new-term .field,


.create-new-term[open] summary {


    margin-bottom: 1rem;


}


.create-new-term .field {


    max-width: 100%;


}


#jvb-selector > .wrap {


    --gap: nowrap;


}


/******************************************************************


QUANTITY FIELD


******************************************************************/


.quantity {


    margin: 0;


}


.quantity label {


    margin: 0;


    font-size: var(--small);


}


.quantity {


    display: inline-flex;


    width: fit-content;


    align-items: center;


    justify-content: center;


    border: 1px solid transparent;


    border-radius: 4px;


    position: relative;


}


.quantity:focus-within {


    border-color: var(--action-0);


}




.quantity button {


    background: var(--base);


    padding: 0;


    width: 38px;


    height: 38px;


    z-index: 0;


    position: relative;


    border: 1px solid var(--base-200);


    color: var(--contrast-200);


}


.quantity button:hover:not(:disabled) {


    color: var(--action-0);


    border-color: var(--action-0);


    background-color: var(--base);


}


.quantity button:active:not(:disabled) {


    background-color: var(--action-0);


    color: var(--light-0);


    transform: scale(.95);


}


.quantity button:disabled {


    opacity: .5;


    cursor: not-allowed;


}


.quantity input[type=number] {


    z-index: 1;


    border: 1px solid var(--base-200);


    background: var(--base);


    text-align: center;


    font-size: 1.1rem;


    width: 60px;


    height: 48px;


    margin: 0;


    padding: 0!important;


    appearance: textfield;


}


.quantity input[type=number]::-webkit-outer-spin-button,


.quantity input[type=number]::-webkit-inner-spin-button {


    -webkit-appearance: none;


    margin: 0;


}


.quantity input[type=number]:focus {


    background-color: var(--base-50);


}


.quantity button.increase {


    left: -2px;


    border-radius: 0 4px 4px 0;


}


.quantity button.decrease {


    right: -2px;


    border-radius: 4px 0 0  4px;


}




/**************************************************


LIST OVERRIDES


**************************************************/


.term-list {


    --justify: flex-start;


    --align: center;


    --wrap: nowrap;


    --gap: 1.5rem;


    --dir: row;


    --w: 1em;


    list-style: none;


    padding: 0;


    height: var(--height);


    display: flex;


    justify-content: var(--justify);


    align-items: var(--align);


    gap: var(--gap);


    flex-wrap: var(--wrap);


    flex-direction: var(--dir);


    position: relative;


    overflow: auto hidden;


    touch-action: pan-x;


    text-transform: lowercase;


}


/*.term-list a {*/


/*        color: var(--contrast);*/


/*        text-decoration: none;*/


/*        font-size: var(--small);*/


/*    }*/


/*        .term-list a:hover {*/


/*            color: var(--action-0);*/


/*        }*/


/*.term-list.shop a::before,*/


/*.term-list.style a::before,*/


/*.term-list.theme a::before,*/


/*.term-list.city a::before,*/


/*#by-city::before,*/


/*#by-style::before,*/


/*#by-theme::before,*/


/*.term-list.all a::before{*/


/*    content:"";*/


/*    display:inline-block;*/


/*    mask-repeat: no-repeat;*/


/*    mask-size: contain;*/


/*    width: 1.2em;*/


/*    height: 1.2em;*/


/*    margin-right: .5rem;*/


/*    vertical-align: middle;*/


/*    background-color: currentColor;*/


/*}*/


/*.term-list a::after {*/


/*    display: none;*/


/*}*/




/*.term-list.shop a::before {*/


/*    mask-image: var(--shop);*/


/*}*/




/*.term-list.city a::before,*/


/*#by-city::before {*/


/*    mask-image: var(--map);*/


/*}*/


/*.term-list.style a::before,*/


/*#by-style::before,*/


/*.term-list.all.styles a::before {*/


/*    mask-image: var(--style);*/


/*}*/


/*.term-list.theme a::before,*/


/*#by-theme::before {*/


/*    mask-image: var(--theme);*/


/*}*/


/**************************************************


COVER BLOCK


**************************************************/


.cover {


    position: relative;


    overflow: hidden;


    min-height: 60vh;


    padding: var(--height);


}


    .cover::before {


        z-index: var(--coverIndex);


        background-color: var(--action-0);


        mix-blend-mode: var(--coverBlend);


        background-position: center;


        background-repeat: no-repeat;


        background-size: cover;


        content: '';


        /*filter: brightness(.25);*/


    }


    .cover::before,


    .cover > video,


    .cover > img {


        position: absolute;


        inset: 0;


        width: 100%;


        height: 100%;


    }


    .cover .content {


        z-index: 5;


        overflow: hidden auto;


        width: max-content;


        height: max-content;


        max-width:100%;


        max-height: 100%;


    }


    /** A second image that overlays the first one **/


    .cover > img {


        z-index: 1;


        opacity: .5;


        mix-blend-mode: luminosity;


        object-fit: cover;


    }


    @media (min-width: 768px) {


        .cover > img {


            opacity: .33;


        }


    }


    /* Have the h1 have a background image. cool! */


    /*.cover h1 {*/


    /*    -webkit-background-clip: text;*/


    /*    -webkit-box-decoration-break: clone;*/


    /*    -webkit-text-fill-color: rgba(0, 0, 0, 0);*/


    /*    background-image: var(--bg-2);*/


    /*    background-position: center 75%;*/


    /*    background-repeat: no-repeat;*/


    /*    background-size: cover;*/


    /*    display: inline;*/


    /*    font-size: clamp(6.5rem, 15vw, 30rem);*/


    /*    font-variation-settings: "wght" 900;*/


    /*    order: 2;*/


    /*    overflow: hidden;*/


    /*    user-select: none;*/


    /*}*/




/**************************************************


BLOCKQUOTE


**************************************************/


blockquote {


    --background: var(--base-100);


    --border: var(--action-0);


    line-height: 1.2;


    padding: var(--height);


    border-radius: 4rem;


    background-color: var(--background);


}


    blockquote .content {


        margin: 12px auto;


        max-width: min(680px, 80vw);


        position: relative;


        font-family: var(--heading);


        font-weight: var(--hBold);


        padding: 25px;


        border-radius: var(--outerRadius);


        border: 2px solid var(--border);


    }


    blockquote .content::before,


    blockquote .content::after {


        position: absolute;


        content: '';


        left: 50px;


    }


    blockquote .content::before {


        width: 80px;


        border: 6px solid var(--background);


        bottom: -3px;


        z-index: 2;


    }


    blockquote .content::after {


        border: 2px solid var(--border);


        border-radius: 0 100% 0 0;


        width: 60px;


        height: 60px;


        bottom: -60px;


        border-bottom: 0;


        border-left: 0;


        z-index: 3;


    }


    blockquote cite {


        padding: 15px 0 0 12px;


        margin: 0 0 0 150px;


        z-index: 1;


    }


blockquote.pull {


    background-color: unset;


    border-radius: 0;


    margin: 4rem auto;


    padding: 3rem;


    box-shadow: var(--shadow-down), var(--shadow-up);


}


    blockquote.pull cite {


        margin: 0;


    }


/**************************************************


MODALS DIALOGUE


**************************************************/


dialog::backdrop {


    backdrop-filter: blur(5px);


    background-color: var(--overlay-medium);


}




dialog[open] {


    z-index:999;


    --padding: 0;


    top: 5vh;


    width: min(500px, 95vw);


    border-radius: 1rem;


    height: fit-content;


    overflow: hidden;


    max-height: 90vh;


    padding: var(--padding);


    background-color: var(--base-50);


    color: var(--contrast);


    border: 1px solid var(--base-200);


    box-shadow: var(--shadow);


}




dialog > .wrap,


dialog > form {


    max-height: 100%;


    overflow: hidden auto;


    margin: 0 0 0 1.5rem;


    padding-right: 1.2rem;


    width: calc(100% - 1.5rem);


}




dialog label {


    font-weight: normal;


}




dialog h2,


dialog h3 {


    margin: 0 0 .5rem 0;


    font-size: var(--large);


}




dialog:has(.m-actions){


    padding-bottom: var(--height);


}


.m-actions {


    --w: 1.15em;


    --justify: flex-end;


    --wrap: nowrap;


    --gap: 0;


    position: absolute;


    bottom: 0;


    left: 0;


    right: 0;


    width: 100%;


    z-index: var(--z-6);


    background-color: var(--action-100);


    box-shadow: var(--shadow-up);


}


.m-actions button {


    width: 100%;


    height: 3rem;


    border-radius: 0;


    color: var(--action-contrast);


    background-color: var(--action-50);


    border: 2px solid var(--action-50);


}


.m-actions button:hover,


.m-actions button:focus {


    background-color: var(--base);


    color: var(--contrast);


}


.m-actions button:first-of-type {


    border-bottom-left-radius: 1rem;


}


.m-actions button:last-of-type {


    border-bottom-right-radius: 1rem;


}


dialog ul {


    list-style: none;


}




dialog .search-container {


    padding-top: 1rem;


    width: 100%;


    gap: .5rem;


}


/****************


GALLERY


****************/


dialog[open].gallery {


    width: calc(100vw - var(--padding) * 2);


    height: 99vh;


    background: var(--overlay-heavy);


}




.gallery .content {


    position: relative;


    max-width: 100%;


    max-height: 100%;


    padding: 2rem;


}


.gallery .favourite button.favourite {


    top: unset;


    bottom: 1rem;


    right: 1rem;


}




.gallery .image {


    max-width: 100%;


    max-height: calc(100vh - 4rem);


    object-fit: contain;


}




.gallery .cancel {


    position: absolute;


    top: 1rem;


    right: 1rem;


    background: none;


    border: none;


    color: white;


    cursor: pointer;


    padding: .5rem;


    z-index: 10;


    transition: color .3s ease;


}




.gallery .cancel:hover {


    color: var(--action-0);


}




.gallery .nav {


    position: absolute;


    top: 50%;


    height: 50%;


    z-index: 5;


    transform: translateY(-50%);


    border: none;


    color: var(--contrast);


    cursor: pointer;


    padding: 1rem;


    transition: color .3s ease;


}


.gallery .nav:hover {


    background-color: var(--overlay-heavy);


}




.gallery .nav:hover {


    color: var(--action-0);


}




.gallery .prev {


    left: 1rem;


}




.gallery .next {


    right: 1rem;


}




.gallery .counter {


    position: absolute;


    top: 1rem;


    left: 1rem;


    color: white;


    font-size: .875rem;


}




.gallery .content details {


    position:absolute;


    bottom: 1rem;


    left: 2rem;


    width: calc(100% - 4rem);


    background-color: var(--overlay-light);


    padding: 0;


}


.gallery .content details:hover,


.gallery .content details[open] {


    background-color: var(--overlay-heavy);


    backdrop-filter: blur(5px);


}


.gallery .content details[open] summary {


    background-color: transparent;


}


/**************************************************


TABLES


**************************************************/


table {


    white-space: nowrap;


    width: 100%;


    display: block;


    margin: 0 0 2rem;


    border-radius: 4px;


    height: var(--maxHeight);


    overflow: auto;


    position: relative;


}


thead,tfoot {


    position: sticky;


    z-index: 10;


    background-color: var(--base);


    text-transform: uppercase;


    padding: .5rem 0;


    line-height: 2;


    font-weight: normal;


}




tr:nth-of-type(even){


    background-color: var(--base-200);


}


tfoot th {


    vertical-align: middle;


}


tfoot th:first-of-type {


    text-align: right;


}


tbody {


}


thead tr, tfoot tr {


    background-color: var(--overlay-heavy);


    box-shadow: var(--shadow);


}


thead tr {


    border-bottom: 1px solid var(--contrast-200);


}


tfoot tr {


    border-top: 1px solid var(--contrast-200);


}


thead {


    top: 0;


}


tfoot {


    bottom: 0;


}


thead th {


    width: max-content;


}


th p {


    margin: 0!important;


}


td {


    width: max-content;


    padding: .5rem 1rem;


}




td .toggle input[type=checkbox] {


    margin: 0;


}


td .field {


    margin: .25rem 0;


}


td[data-id="actions"] label {


    margin: 0;


    padding: 0;


}


td .description {


    display: none;


}


td input[type=text] {


    width: fit-content;


    max-width: 40vw;


    padding: .25em!important;


    font-size: var(--small)!important;


}




tbody tr {


    border: 2px solid transparent;


}


tbody tr:focus-within {


    background-color: var(--base-100);


    border-color: var(--action-50)


}




[data-stuck] {


    background-color: var(--overlay-medium);


    position: sticky;


    left: -1rem;


    z-index: 15;


    box-shadow: var(--subtleRight);


}


tbody [data-stuck] {


    z-index: 5;


}


thead [data-stuck],


tfoot [data-stuck] {


    background: var(--base);


}




/**************************************************


TOOLTIP


**************************************************/


[role=tooltip],


.hide-tooltip.hide-tooltip.hide-tooltip + [role="tooltip"] {


    visibility: hidden;


    position: absolute;


    bottom: 2rem;


    left: 1rem;


    width: max-content;


    height:fit-content;


    max-width: 50vw;


    padding: .5rem;


    border-radius: var(--innerRadius);


    box-shadow: var(--shadow);


    background: var(--action-0);


    color: var(--action-contrast);


}




body.menu_item [role=tooltip] {


    left: auto;


    right: 100%;


    top: -200%;


    z-index: var(--z-4);


}


[role=tooltip] p {


    margin: 0;


}


[role=tooltip] p + p {


    margin-top: .5rem;


}




/*.field:has([aria-describedby]:hover) [role=tooltip],*/


.field:has([aria-describedby]:focus) [role=tooltip],


[aria-describedby]:hover ~ .has-tooltip [role="tooltip"],


[aria-describedby]:focus  ~ .has-tooltip[role="tooltip"] {


    visibility: visible;


    display: block;


}


.has-tooltip {


    display: inline-flex;


    justify-content: flex-end;


    position: absolute;


    top: 0;


    left: 0;


    --w: 1.5rem


}


.tt-toggle {


    cursor: pointer;


    display: flex;


    border-radius: 50%;


    background-color: transparent;


}


.tt-toggle:hover,


.tt-toggle:focus {


    background-color: var(--action-0);


    color: var(--action-contrast);


}


.tt-toggle:hover + [role=tooltip],


.tt-toggle:focus + [role=tooltip] {


    visibility: visible;


}




/************************************************************


SELECTOR


************************************************************/


dialog[open]#jvb-selector {


    height: 70vh;


    top: 15vh;


    display: flex;


}


#jvb-selector > .wrap {


    flex: 1;


}




/******************************************************************


LOADING


******************************************************************/


dialog.loading {


    opacity: 0;


    transition: opacity var(--transition-base);


}


dialog.loading[open] {


    opacity: 1;


    transition: opacity var(--transition-base);


    width: 100vw;


    height: 100vh;


    display: flex;


    max-width: 100%;


    max-height: 100%;


    border-radius: 0;


    border: none;


    background-color: transparent;


    box-shadow: none;


    --w: 3em;


    justify-content: center;


    align-items: center;


}


dialog.loading[open]@starting-style {


    opacity: 0;


}


dialog.loading[open] > .col {


    height: fit-content;


    width: min(400px, 60vw);


    border-radius: var(--outerRadius);


    background-color: var(--overlay-medium);


    padding: 2rem;


    box-shadow: var(--shadow);


    position: relative;


}




dialog.loading[open] .spinner {


    position: absolute;


    top: 1rem;


    width: 5rem;


    height: 5rem;


    border-width: 0;


    border-top-width: 4px;


    animation: spin 1s var(--function) infinite;


}


.loading[open] .icon {


    background-color: var(--action-0);


}




dialog.loading[open] .icon {


    animation: dance 2s ease-in-out infinite;


    transition: color .3s ease;


}


dialog.loading[open] h3 {


    color: var(--contrast);


    margin: 2rem 1rem auto !important;


    font-size: var(--large);


    width: -moz-fit-content;


    width: fit-content;


    /*-webkit-text-stroke: 1px var(--contrast);*/


    /*--g: conic-gradient(var(--action-0) 0 0) no-repeat text;*/


    /*animation: letterOutline 1s linear infinite alternate, letterInside 2s linear infinite;*/


    /*background: var(--g) 0, var(--g) 1ch, var(--g) 2ch, var(--g) 3ch, var(--g) 4ch, var(--g) 5ch, var(--g) 6ch;*/


}




dialog.loading[open] p {


    margin: .5rem auto;


}




dialog.loading[open]::after {


    animation: shimmer 3s ease-in-out infinite;


    background: linear-gradient(90deg, var(--shimmer));


    content: "";


    inset: 0;


    position: absolute;


    z-index: -1;


}




.spinner {


    width: 12px;


    height: 12px;


    border: 2px solid transparent;


    border-top: 2px solid var(--action-50);


    border-radius: 50%;


    animation: spin 1s var(--function) infinite;


}




@keyframes spin {


    0% { transform: rotate(0deg); }


    100% { transform: rotate(360deg); }


}




@keyframes shimmer {


    0% {


        left: -50%;


    }


    50% {


        left: 150%;


    }


    100% {


        left: -50%;


    }


}






@keyframes dance {


    0%, 100% {


        transform: rotate(-5deg) scale(1);


    }


    50% {


        transform: rotate(5deg) scale(1.1);


    }


}




@keyframes letterOutline {


    0% {


        background-size: 1ch 0;


    }


    100% {


        background-size: 1ch 100%;


    }


}




@keyframes letterInside {


    0%, 50% {


        background-position-y: 100%,0;


    }


    50.01%, 100% {


        background-position-y: 0, 100%;


    }


}




/******************************


TABS


******************************/


**************************************************/


.tab-content[hidden] {


    display: block!important;


    transform: scaleY(0);


    height: 0;


    max-height: 0;


    overflow: hidden;


}


.tab-content[hidden]:focus-within {


    transform: scaleY(1);


    height:auto;


}




nav.tabs h2 {


    margin: 0!important;


    line-height: 1;


    font-size: var(--medium);


    display: flex;


    color: var(--contrast);


    white-space: nowrap;


    gap: 1rem;


}


nav.tabs .active h2 {


    color: var(--action-contrast);


}


nav.tabs button {


    padding: .75rem 1.5rem;


    border-radius: 0;


    position: relative;


    border: 2px solid var(--action-0);


}


nav.tabs > button:first-of-type {


    border-top-left-radius: var(--innerRadius);


}


nav.tabs > button:last-of-type {


    border-top-right-radius: var(--innerRadius);


}


.tabs > button:hover,


.tabs > button:focus {


    background-color: var(--base-200);


}




.tabs > button::after {


    content: '';


    position: absolute;


    bottom: -2px;


    left: 0;


    width: 0;


    height: 3px;


    background-color: var(--action-50);


    transition: width .3s;


}


.tabs > button:hover::after,


.tabs > button.active::after {


    width: 100%;


}


.tabs > button.active::after {


    background-color: var(--action-200);


}


.tabs > button.active {


    background-color: var(--action-0);


    color: var(--action-contrast);


}


.tabs > button.active:hover,


.tabs > button.active:focus {


    background-color: var(--action-100);


}


.tab-content h2 {


    display: none;


}


/*****************************************************************************


MENU


*****************************************************************************/


.toggle-details {


    gap: 2px;


}


body.menu_item #top {


    z-index: var(--z-4);


    position: relative;


}


section .toggle-details {


    position: absolute;


    right: 0;


    top: 5rem;


}




[data-toggle=all] {


    position: fixed;


    bottom: calc(var(--offHeight) + var(--height) + .5rem);


    right: 0;


    z-index: var(--z-4);


    background-color: var(--action-0);


    color: var(--action-contrast);


}


[data-toggle] {


    z-index: var(--z-1);


}


body:has(#queue[hidden]) [data-toggle=all] {


    left: 1rem;


}


dialog:not([open]).col,


dialog:not([open]).row {


    display: none;


}




@media (min-width:768px) {


    section .toggle-details {


        right: -10%;


    .tab-content[hidden]:focus-within {


        transform: scaleY(1);


        max-height: max-content;


    }


}


/********************************************


TYPE TEXT


********************************************/


/* Cursor, for typing messages */


.typeText::after {


    content: '|';


    display: inline-block;


    margin-left: 0;


    animation: blink .75s step-end infinite;


}


@keyframes blink {


    from, to { opacity: 1; }


    50% { opacity: 0; }


}




/**************************************************


POPUPS:


- toast container


- cart


- queue


CARD


**************************************************/


aside {


    position: fixed;


    top: var(--doubleHeight);


    bottom: var(--offHeight);


    width: min(500px, calc(100vw - 2rem));


    background-color: var(--base);


    z-index: var(--z-5);


    box-shadow: var(--shadow);


    padding-bottom: var(--height);


    overflow: visible;


.item-grid.stats {


    margin: 1rem 0;


}




.qtoggle


    /*.toggle-cart,*/


/*.create-item */


{


    z-index: var(--z-6);


    position: fixed;


    bottom: var(--offHeight);


    width: var(--height);


    height: var(--height);


    background-color: var(--overlay-medium);


    color: var(--contrast);


    transition: width var(--transition-base), background-color var(--transition-base), color var(--transition-base), left var(--transition-base);


    box-shadow: var(--shadow);


.card {


    background-color: rgb(var(--base-100));


    border-radius: var(--radius);


    box-shadow: rgba(var(--base), var(--op-45)) var(--shdw);


    aspect-ratio: 3/2;


    display: flex;


    flex-direction: column;


    align-items: center;


    justify-content: center;


    text-align: center;


}


/*.toggle-cart:hover,*/


.qtoggle:hover,


/*.create-item:hover,*/


    /*.toggle-cart:focus,*/


.qtoggle:focus


/*.create-item:focus */


{


    background-color: rgba(var(--action-rgb),var(--rgb-heavy));


    color: var(--action-contrast);


}


/*.toggle-cart:disabled,*/


.qtoggle:disabled,


/*.create-item:disabled,*/


    /*.toggle-cart:disabled:hover,*/


.qtoggle:disabled:hover,


/*.create-item:disabled:hover,*/


    /*.toggle-cart:disabled:focus,*/


.qtoggle:disabled:focus


/*.create-item:disabled:focus */


{


    opacity: .5;


    background-color: var(--overlay-light);


    color: var(--contrast);


}


/******************


CART


******************/


/*.create-item,*/


.toggle-cart {


    right: 0;


    border-radius: 4px 4px 4px var(--outerRadius);


}




body:has(#cart.expanded) .toggle-cart .icon {


    display: none;


}




aside#cart {


    padding-bottom: 6rem;


}


#cart form {


    max-height: 100%;


    overflow: hidden auto;


}


#cart nav.tabs {


    z-index: var(--z-6);


    top: 0;


}


#cart table {


    height: auto;


}


#cart th {


    padding: 0 1.5rem;


}


#cart table th:first-of-type {


    width: 100%;


}




#cart nav.tabs {


    position: sticky;


    box-shadow: var(--shadow);


}


#cart button[data-tab] {


    flex: 1;


    border-radius: 0;


}




#cart form > *:not(.tabs) {


    max-width: 90%;


    margin: 0 auto;


}




#cart form .empty p {


    margin: .5rem 0!important;


}




#cart .cart-total.cart-total {


    --gap: 0 1rem;


    padding-right: 1rem;


    position: absolute;


    bottom: var(--height);


    width: 100%;


    max-width: 100%;


    background-color: var(--overlay-heavy);


    z-index: var(--z-6);


    box-shadow: var(--shadow-up);


}


.cart-total p {


    --gap: 2rem;


    max-width: 100%;


    margin: 0;


}


.cart-total p span {


    width: 6rem;


    display: inline-block;


    text-align: right;


}


.cart-total p + p {


    font-weight: bold;


}




.cart-items .total {


    font-weight: bold;


}


#cart .restored {


    background-color: rgba(var(--action-rgb), var(--rgb-light));


    border-radius: var(--outerRadius);


    padding: 1rem;


}


.restored h3 {


    font-size: var(--medium);


    margin: 0;


}


.restored p {


    margin: 0;


}


.restored .row {


    --gap: 0;


    --wrap:nowrap;


    --w: 1em;


}


/******************


TOAST


******************/


.toasts {


    position: fixed;


    top: 4rem;


    right: -350px;


    z-index: 1000;


    width: 350px;


}




.toast {


    background-color: var(--overlay-heavy);


    border-left: 4px solid var(--action-0);


    padding: 1rem;


    box-shadow: var(--shadow);


    left: 0;


    position: relative;


    opacity: 0;


    transition: left .3s, opacity .3s;


}




.toast.success {


    border-left-color: var(--success);


}




.toast.error {


    border-left-color: var(--error);


}




.toast.info {


    border-left-color: var(--warning);


}




.toast.show {


    left: calc(-350px - 1rem);


    opacity: 1;


}




.toast.hiding {


    left: 0;


    opacity: 0;


}




.toast-content p {


    margin: 0;


}




.close-toast {


    background: none;


    border: none;


    font-size: 1.25rem;


    cursor: pointer;


    opacity: .5;


    transition: opacity .2s;


    color: inherit;


}




.close-toast:hover {


    opacity: 1;


}


/******************


QUEUE


******************/




.qtoggle {


    left: 0;


    border-radius: 4px 4px var(--outerRadius) 4px;


}




.qtoggle.expanded {


    left: var(--height);


    width: min(calc(500px - var(--height)), calc(100vw - 2rem - var(--height)));


}




.qtoggle.saving .icon {


    background-color: var(--action-0);


    animation: spin .87s var(--function) infinite;


}




#queue .status-actions {


    position: absolute;


    bottom: 0;


    left: 0;


    right: 0;


    z-index: var(--z-2);


}




#queue .status-actions .popup {


    position: absolute;


    z-index: -1;


    width: max-content;


    max-width: 300px;


    background-color: var(--action-50);


    color: var(--action-contrast);


    border-radius: var(--innerRadius);


    padding: .25em .75em;


    top: 1rem;


    left: -100vw;


    transition: left var(--transition-base);


}


aside#queue .popup::before{


    content: '';


    width: 10px;


    height: 10px;


    transform: rotate(-45deg);


    background-color: var(--action-50);


    z-index: -1;


    left: -5px;


    position: absolute;


    top: calc(50% - 5px);


}




.expanded#queue .status-actions .popup.showing {


    left: calc(100% + 1em);


}


#queue .status-actions .popup.showing {


    left: calc(200vw + var(--offHeight));


    max-width: 75vw;


}




/** BADGES **/




.refresh .countdown,


#queue .item .status,


.filter .count,


.qtoggle .count,


.qtoggle .indicator {


    z-index: var(--z-3);


    --offset: 0;


    position: absolute;


    top: var(--offset);


    background-color: var(--overlay-light);


}


.expanded + .qtoggle .indicator,


.expanded + .qtoggle .count {


    --offset: .25rem;


}


/* Status indicator */


.qtoggle .indicator {


    right: var(--offset);


    width: .75rem;


    height: .75rem;


    border-radius: 50%;


}




aside#queue.synced + .qtoggle .indicator {


    background-color: var(--success);


}




aside#queue.pending + .qtoggle .indicator {


    background-color: var(--warning);


    animation: pulse 2s infinite;


}


aside#queue.pending:not(.expanded) + .qtoggle .icon {


    background-color: var(--error);


    animation: spin 1s var(--function) infinite;


}




/* Status count badge */


.qtoggle .count {


    --align: center;


    --justify: center;


    left: var(--offset);


    min-width: 1.25rem;


    height: 1.25rem;


    padding: 0 4px;


    color: var(--contrast);


    border-radius: var(--innerRadius);


    font-size: var(--extra-small);


}




#queue:has(.empty-queue) + .qtoggle .count {


    display: none;


}




aside#queue .header {


    padding: 15px;


    border-bottom: 1px solid var(--base-200);


    flex-shrink: 0;


}


.qitems {


    flex: 1;


    overflow: hidden auto;


    padding: .5rem 2rem;


    --gap: .5rem;


}




aside#queue h3 {


    margin: 0 0 12px 0;


    font-size: 16px;


    color: var(--contrast);


}




#queue .filters .filter {


    background-color: transparent;


    white-space: nowrap;


    font-size: var(--small);


}




#queue .filters .filter.active {


    background: var(--base-200);


    border-color: transparent;


}


#queue .filter:hover,


#queue .filter:focus {


    background-color: var(--action-0);


    color: var(--action-contrast);


}






/* Filter count badge */


.filter .count {


    --offset: -8px;


    right: var(--offset);


    background: var(--base-200);


    color: var(--contrast-200);


    border-radius: 10px;


    min-width: 18px;


    height: 18px;


    font-size: 10px;


}


.filter .count:empty {


    display: none;


}




/* Empty state */


.empty-queue {


    height: 100px;


    color: var(--contrast-200);


    font-size: var(--small);


    font-style: italic;


}




.refresh .countdown:not(.counting),


aside#queue:has(.empty-queue) .refresh .count {


    display: none;


}




/* Queue items */


#queue .item {


    padding: 15px;


    background: var(--base-100);


    border-radius: var(--innerRadius);


    transition: all .2s ease;


    box-shadow: var(--shadow-none);


}




#queue .item:hover {


    box-shadow: var(--shadow);


}




#queue .item .header {


    position: relative;


}




#queue .item .type {


    font-size: var(--small);


}




#queue .item .status {


    --w: 1em;


    --gap: 0;


    --justify:center;


    --align: center;


    --offset: -1.2rem;


    aspect-ratio: 1;


    right: var(--offset);


    border-radius: 50%;


    color: var(--contrast-200);


    background-color: var(--base-50);


    border: 1px solid var(--base-200);


    width: 1.25em;


    height: 1.25em;


}




#queue .item .status.pending {


    background: var(--base-100);


    color: var(--contrast-200);


}


#queue .item .status.processing {


    background: var(--base-200);


    color: var(--contrast-100);


    animation: pulse-color 2s infinite;


}




#queue .item .status.completed {


    background: var(--base-50);


    color: var(--base-200);


}


#queue .item .status.completed:hover {


    color: var(--contrast-200);


}




#queue .item .status.failed {


    background: var(--base);


    color: var(--error);


}






#queue .item button {


    font-size: 16px;


    padding: 0;


    line-height: 1;


    opacity: .5;


    transition: opacity .2s;


}




#queue .item button:hover {


    opacity: 1;


}




/* Item details */


#queue .item .info {


    margin-top: 8px;


    font-size: var(--small);


}


#queue .item .info .time {


    --gap: 7px;


    font-size: 10px;


}




/* Item actions */


#queue .item .actions {


    margin-top: 12px;


    --gap: 8px;


}




#queue .item .actions button {


    padding: 6px 12px;


    font-size: 12px;


    background: var(--base-200);


    border: none;


    border-radius: 4px;


    cursor: pointer;


    transition: all .2s;


    color: var(--contrast);


}




#queue .item .actions .retry {


    background-color: var(--secondary-200);


    color: var(--secondary-contrast);


}






#queue .item .actions button:hover {


    opacity: .9;


}




/* Queue actions footer */


.queue-actions {


    padding: 15px;


    border-top: 1px solid var(--base-200);


    flex-shrink: 0;


}




.queue-actions button {


    padding: 8px 12px;


    font-size: var(--small);


    transition: all .2s;


}






/* Refresh area */


.status-actions > .refresh {


    position: relative;


    font-size: var(--small);


}




.refresh .countdown {


    --justify:center;


    --align: center;


    --offset: 0;


    right: var(--offset);


    margin: 0 3px;


    border-radius: 50%;


    border: 1px solid var(--base-200);


}




.refreshNow {


    width: var(--height);


    height: var(--height);


}




.refreshNow:hover {


    background: var(--base-200);


    color: var(--contrast-200);


}




.icon.refresh {


    --w: 18px;


}




/* Refreshing animation */


#queue.pending.expanded .refreshNow .icon {


    animation: spin 1.5s var(--function) infinite;


}


/**************************************************


DELAY


**************************************************/


/* Initialize counter on the parent container */


.item-grid, #queue {


    counter-reset: delay-counter;


}




/* Increment counter for each item */


.item {


    counter-increment: delay-counter;


}




/* Use counter value to calculate delay */


.item .progress .fill::after {


    --delay: calc(counter(delay-counter) * .1s);


    .card h4 {


        margin: 0;


        text-transform: uppercase;


    }


.stat-number {


    font-family: var(--heading);


    font-weight: var(--fw-h-bold);


    color: rgb(var(--action-0));


    font-size: var(--txt-xx-large);


}


/**************************************************


PROGRESS


**************************************************/


.progress {


    width: 100%;


}


.progress .bar {


    height: 6px;


    display: block;


    border-radius: 6px;


    overflow: hidden;


    background: var(--base-200);


    background: rgb(var(--base-200));


    position: relative;


}




.progress .fill {


    height: 100%;


    background: var(--action-0);


    background: rgb(var(--action-0));


    border-radius: 6px;


    width: 0;


    transition: width .3s ease;


}


    .completed .fill {


        background: rgb(var(--action-200));


    }




.progress .details {


    margin-top: 5px;


    font-size: var(--small);


    color: var(--contrast);


    font-size: var(--txt-x-small);


    color: rgb(var(--contrast));


    text-align: center;


    padding: .25rem 0;


}




.progress .details:empty {


    display: none;


}


@@ -3644,143 +2512,82 @@


    );


    animation: shimmer 2.5s infinite linear var(--delay);


}


/**************************************************


ACTIONS


**************************************************/


.additional-actions.additional-actions {


    padding: 0;


    background-color: transparent;


/**************************************************************


DETAILS


**************************************************************/


details {


    padding: .25rem 0;


    border-top: 1px solid rgb(var(--base-200));


    border-bottom: 1px solid rgb(var(--base-200));


}


.additional-actions .buttons {


    position: fixed;


    bottom: var(--offHeight);


    right: 1rem;


    margin: 0;


    --gap: 1rem;


    z-index: var(--z-6);


    width: fit-content;


}


.additional-actions .buttons button {


    height: var(--height);


    width: var(--height);


    background-color: var(--overlay-medium);


    color: var(--contrast);


    transition: width var(--transition-base), background-color var(--transition-base), color var(--transition-base), left var(--transition-base);


    box-shadow: var(--shadow);


}


.additional-actions .buttons button:hover {


    background-color: var(--action-0);


    color: var(--action-contrast);


}


.additional-actions .buttons button:disabled,


.additional-actions .buttons button:disabled:hover,


.additional-actions .buttons button:disabled:focus {


    opacity: .5;


    background-color: var(--overlay-light);


    color: var(--contrast);


}


.additional-actions .buttons button:last-of-type {


    border-radius: 4px 4px 4px var(--outerRadius);


}


aside {


    position: fixed;


    top: var(--doubleHeight);


    bottom: var(--offHeight);


    width: min(500px, calc(100vw - 2rem));


    background-color: var(--base);


    z-index: var(--z-5);


    box-shadow: var(--shadow);


    --wrap: nowrap;


    --align: stretch;


    overflow: hidden auto;


    padding: 1rem 1rem var(--height);


}


aside.left {


    left: var(--offScreen);


    transition: left var(--transition-base);


    border-radius: 0 var(--outerRadius) var(--outerRadius) 0;


}


aside.left.expanded {


    left: 0;


}


    details[open] {


        background-color: rgb(var(--base-50));


    }




aside.right {


    right: var(--offScreen);


    border-radius: var(--outerRadius) 0 0 var(--outerRadius);


    transition: right var(--transition-base);


}


aside.right.expanded {


    right: 0;


}


aside.right.expanded button.close {


    position: sticky;


    bottom: calc(var(--height) * -1);


    left: 0;


    border-bottom-left-radius: var(--outerRadius);


    width: var(--height);


    height: var(--height);


    details summary {


        list-style: none;


        text-transform: uppercase;


        cursor: pointer;


        border: 0;


        position: relative;


        padding: .5rem 2.5rem .5rem .5rem;


        gap: .5rem;


    }


        details summary:hover {


            background-color: rgb(var(--base-100));


            border-color: rgb(var(--base-100));


            color: rgb(var(--contrast));


        }


        details[open] > summary {


            background-color: rgb(var(--base-50));


        }


        details summary::after {


            content: '';


            position: absolute;


            right: .5rem;


            top: .5rem;


            background-color: rgb(var(--contrast-100));


            -webkit-mask-repeat: no-repeat;


            -webkit-mask-size: contain;


            -webkit-mask-image: var(--icon);


            mask-image: var(--icon);


            mask-repeat: no-repeat;


            mask-size: contain;


            width: 1.25rem;


            height: 1.25rem;


            margin-left: auto;


            transition: var(--trans-color), var(--trans-transform);


        }


            details summary:hover::after {


                background-color: rgb(var(--action-0));


            }


            details[open]:not(.all-filters) > summary::after {


                background-color: rgb(var(--contrast));


                transform: rotate(-540deg);


                transition: background-color var(--trans-base);


                transition-property: background-color, transform;


            }


    details::details-content {


        opacity: 0;


        block-size: 0;


        overflow-y: clip;


        transition: content-visibility var(--trans-t) allow-discrete, opacity var(--trans-t), block-size var(--trans-t);


    }




}


.additional-actions .buttons:has(.expanded) button:not(.expanded) {


    display: none;


}


.additional-actions .buttons:has(.expanded){


    right: 0;


}


    details[open]::details-content {


        opacity: 1;


        block-size: auto;


    }




.additional-actions .buttons .expanded {


    width: calc(min(500px, calc(100vw - 2rem)));


    background-color: var(--base);


}


.additional-actions .buttons button:hover,


.additional-actions .buttons .expanded:hover {


    background-color: var(--action-0);


    color: var(--action-contrast);


}


    @media (prefers-reduced-motion: no-preference){


        details {


            interpolate-size: allow-keywords;


        }


    }




[type=submit] {


    width: 100%;


    height: var(--height);


    background-color: var(--action-0);


    color: var(--action-contrast);


    box-shadow: var(--shadow-none);


    font-weight: bold;


}


[type=submit]:hover {


    box-shadow: var(--shadow);


    border: 2px solid var(--action-0);


    color: var(--action-0);


    background-color: var(--action-contrast);


}




aside nav.tabs {


    position: sticky;


    bottom: unset;


    top: 0;


    left: 0;


    right: 0;


}


.jvb-referral nav.tabs button {


    width: 50%;


}


aside .tab-content.active {


    padding: 1rem;


    min-height: 100%;


}




aside header h3 {


    font-size: var(--medium);


    margin: 1rem 0;


    text-align: center;


}


aside header p {


    margin: .25rem 0;


    text-align: center;


}


aside h4 {


    font-size: var(--small);


    margin: 1rem 0 0 0;


}


/********************************************************


CODE


********************************************************/




code {


    width: 100%;


@@ -3789,165 +2596,1153 @@


    user-select: all;


    text-align: center;


    border-radius: 4px;


    background-color: var(--base-200);


    border: 1px solid var(--contrast-200);


    background-color: rgb(var(--base-200));


}


.restore-form {


    background-color: rgba(var(--action-rgb), var(--rgb-light));


    border: 1px solid var(--action-200);


    padding: .5rem;


    border-radius: var(--outerRadius);


    margin: 1rem 2rem;


}


.restore-form h3 {


    text-align: center;


    margin: 1rem 0 0;


    font-size: var(--medium);


}


.restore-form p {


    margin: .5rem 0;


}


.fstatus {


/********************************************************


OVERLAYS


********************************************************/


dialog[open],


aside.expanded {


    background-color: rgb(var(--base));


    box-shadow: rgba(var(--base),var(--op-45)) var(--shdw);


    z-index: var(--z-5);


    background-color: rgba(var(--base-rgb),var(--rgb-heavy));


    border-radius: 4px;


    padding: 0 .5rem;


    position: fixed;


    bottom: var(--offHeight);


    right: calc(var(--offHeight) + 1rem);


    --w: 1em;


    box-shadow:var(--shadow);


}


.fstatus .spinner {


    display: none;


aside.expanded {


    margin: 0!important;


}


.fstatus.loading .spinner {


    display: inline-block;


dialog::backdrop {


    backdrop-filter: blur(5px);


    background-color: rgba(var(--base),var(--op-4));


}


dialog[open],


aside.main {


    border-radius: var(--radius-outer);


    overflow: hidden;


}


/** DIALOG **/


dialog[open] {


    z-index: var(--z-10);


    --padding: 0;


    margin: auto!important;


    width: min(500px, 95vw);


    height: fit-content;


    max-height: 90vh;


    padding: var(--padding);


    background-color: rgb(var(--base-50));


    color: rgb(var(--contrast));


    border: 1px solid rgb(var(--base-200));


}


    dialog:is(.create,.edit,.bulkEdit)[open] {


        width: 98vw;


        max-height: 98vh;


        top: 1vh;


    }


    dialog > .wrap.wrap {


        max-height: var(--maxHeight);


        overflow: hidden auto;


        flex-wrap: nowrap;


        justify-content: flex-start;


        margin: 0 0 0 1.5rem;


        padding-right: 1.5rem;


        padding-bottom: var(--btn);


        width: calc(100% - 1.5rem);


    }


    dialog label {


        font-weight:  normal;


    }


    dialog h2,


    dialog h3 {


        margin: 0 0 .5rem 0;


        font-size: var(--txt-large);


    }




.fstatus p {


    margin: 0;


    padding: .25rem;


}


    dialog:has(.m-actions) {


        padding-bottom: var(--btn);


    }




/**************************************************


ASIDE EXCEPTIONS


**************************************************/


aside.pre-header,


aside.sub-header {


    left: 0;


    right: 0;


    width: 100vw;


    .m-actions {


        --w: 1.15em;


        --justify: flex-end;


        --wrap: nowrap;


        --gap: 0;


        position: absolute;


        bottom: 0;


        right: 0;


        left: 0;


        height: var(--btn);


        width: 100%;


        z-index: var(--z-6);


        background-color: rgb(var(--action-100));


        box-shadow: rgba(var(--base),var(--op-45)) var(--shdw-up);


    }


    .m-actions button {


        --wrap: nowrap;


        box-shadow: none;


        width: 100%;


        background-color: rgb(var(--action-0));


        color: rgb(var(--action-contrast));


        --gap: .75rem;


        font-size: var(--txt-x-small);


        border-radius: 0;


        height: var(--chipchip);


    }


        .m-actions button:hover,


        .m-actions button:focus {


            background-color: rgb(var(--base));


            color: rgb(var(--contrast));


        }


        .m-actions button:first-of-type {


            border-bottom-left-radius: 1rem;


        }


        .m-actions button:last-of-type {


            border-bottom-right-radius: 1rem;


        }


    dialog li {


        list-style: none;


        padding: 0;


    }


    dialog .search-container {


        padding-top: 1rem;


        width: 100%;


        gap: .5rem;


    }


    dialog header {


        width: 100%;


        text-align: center;


        font-size: var(--txt-x-medium);


        height: var(--chipchip);


    }


        dialog header h2 {


            margin: 0;


        }


        /** SELECTOR **/


        .selected-items {


            width: 100%;


            padding: .5rem;


            border-radius: var(--radius);


            background-color: rgb(var(--base));


            --justify: flex-start;


            --gap: .5rem;


            margin-bottom: .5rem;


        }


            .selected-items button {


                width: max-content;


                padding: .125rem .5rem;


                font-size: var(--txt-x-small);


                min-height: var(--chip_);


            }


                .selected-items button .icon-x {


                    --w: var(--txt-small);


                    align-self: flex-start;


                }


            .selected-items.selected-items:empty {


                padding: 0;


                background-color: transparent;


                margin: 0;


            }


            .selected-item.selected-item {


                padding: .25rem .5rem;


                margin: .125em;


                background-color: rgb(var(--base-100));


                border-radius: .25rem;


                font-size: var(--txt-medium);


                border: 1px solid rgb(var(--base-200));


                position: relative;


                width: max-content;


            }


                .selected-item button {


                    min-height: 0;


                    height: var(--chip);


                    width: var(--chip);


                    padding: 0;


                    --w: var(--txt-small);


                }


            .clear-filters {


                margin-left: auto;


                border: 1px solid var(--base-200);


            }


            #jvb-selector .message {


                width: 100%;


                text-align: center;


            }


            #jvb-selector .items-wrap {


                width: 100%;


                padding: 1rem 0;


                border: 1px solid rgb(var(--base-200));


                border-width: 1px 0;


            }


            #jvb-selector .items-container {


                display: grid;


                grid-template-columns: repeat(2, 1fr);


                margin: 0;


            }




            .autocomplete-dropdown {


                width: 100%;


                background-color: var(--base-100);


                padding: .5rem;


                box-shadow: rgba(var(--base), var(--op-45)) var(--shdw);


            }


                li.autocomplete {


                    list-style: none;


                    display: inline-flex;


                    margin: .25rem;


                    min-height: var(--chip);


                }




    /** GALLERY **/


    img[data-gallery] {


        cursor: pointer;


    }


    dialog.gallery[open] {


        --max: calc(100% - 2rem);


        inset: 1rem;


        margin: 0;


        border: none;


        width: 100%;


        height: 100%;


        max-height: var(--max);


        max-width: var(--max);


        border-radius: 0;


        /*background-color: rgba(var(--base), var(--op-6));*/


        background-color: transparent;


    }


        dialog.gallery > .wrap {


            --wrap: nowrap;


            position: relative;


            overflow: hidden;


            max-height: none;


            margin: 0;


            padding: 0;


            height: 100%;


            width: 100%;


            inset: 0;


        }


        .gallery .hint {


            position: absolute;


            top: 1rem;


            left: 50%;


            transform: translateX(-50%);


            letter-spacing: .12em;


            pointer-events: none;


            z-index: 2;


            animation: hint-fade 3s ease forwards;


        }


            @keyframes hint-fade {


                 0%   { opacity: 1; }


                 60%  { opacity: 1; }


                 100% { opacity: 0; }


             }


        .gallery .controls {


            --wrap: nowrap;


            --align: flex-end;


            --justify: space-between;


            --gap: 0;


            position: absolute;


            inset: 0;


            padding: 1rem;


            z-index: 3;


            pointer-events: none;


        }


            .gallery .controls button {


                min-height: var(--chipchip);


                pointer-events: all;


                background: rgba(var(--base), var(--op-45));


                border: 1px solid rgba(var(--contrast), var(--op-1));


                color: rgba(var(--contrast), var(--op-5));


            }


                .gallery .controls button:hover,


                .gallery .controls button:focus {


                    background: rgba(var(--base), var(--op-5));


                    color: rgb(var(--contrast));


                }


                .gallery .controls .cancel {


                    position: absolute;


                    top: 1rem;


                    right: 1rem;


                }








        dialog.gallery .cancel:focus,


        dialog.gallery .cancel:hover {


            background: rgba(var(--base),var(--op-4));


        }






        dialog.gallery .content {


            position: relative;


            overflow: hidden;


            flex: 1;


            display: flex;


        }


            dialog.gallery .image-left,


            dialog.gallery .image-right {


                position: absolute;


                width: 0;


                height: 0;


                opacity: 0;


                pointer-events: none;


                left: var(--offScreen);


            }




            dialog.gallery .content .image {


                max-width: 100%;


                max-height: 100%;


                object-fit: contain;


                display: block;


                transform-origin: center center;


                will-change: transform;


                transition: transform 0.15s ease-out;


                touch-action: none;


                user-select: none;


                -webkit-user-drag: none;


                cursor: default;


            }


                .gallery .image[style*="scale(1)"],


                .gallery .image:not([style]) {


                    cursor: default;


                }




        dialog.gallery details {


            position: absolute;


            width: 100%;


            max-width: none;


            bottom: 0;


            left: 0;


            right: 0;


            background: rgba(var(--base),var(--op-45));


            color: rgb(var(--contrast));


            border-radius: 4px;


            overflow: hidden;


            z-index: 3;


        }


            dialog.gallery details:has(.item-info:empty) {


                display: none;


            }




            dialog.gallery details summary {


                padding: 0.75rem 1rem;


                cursor: pointer;


                user-select: none;


            }




            dialog.gallery details[open] .item-info {


                padding: 0.75rem 1rem 1rem;


                font-size: var(--txt-x-small);


            }




            dialog.gallery .counter {


                position: absolute;


                bottom: 0;


                left: 50%;


                transform: translateX(-50%);


                background: rgba(var(--base),var(--op-4));


                color: rgba(var(--contrast), var(--op-3));


                padding: .4rem .8rem;


                border-radius: 3px;


                font-size: var(--txt-small);


                letter-spacing: .1em;


                z-index: 3;


            }




            dialog.gallery .favourite {


                position: absolute;


                top: 0;


                left: 0;


                z-index: 3;


            }




            dialog.gallery .image {


                opacity: 0;


                transition: opacity .2s ease, transform .15s ease-out;


            }




            dialog.gallery .image[src] {


                opacity: 1;


            }




ul.gallery {


    display: flex;


    justify-content: space-between;


    height: 2rem;


    bottom: unset;


    padding: 0 .5rem;


    font-size: var(--small);


    flex-wrap: nowrap;


    align-items: center;


    flex-wrap: wrap;


    margin: .2em!important;


    padding: 0!important;


    max-width: 100vw;


}


    ul.gallery::after {


        content: '';


        display: block;


        flex-grow: 10;


    }




    ul.gallery li {


        flex-grow: 1;


        list-style: none;


        height: 40vh;


        margin: .2em;


        overflow: hidden;


        padding: 0;


        max-width:49%;


    }




    ul.gallery figure {


        min-width: 100%;


        height: 100%;


    }


        ul.gallery figure.duotone img {


            mix-blend-mode: multiply;


        }








        @media (max-aspect-ratio: 1/1) and (max-width: 480px) {


            ul.gallery {


                flex-direction: row;


            }


            ul.gallery li {


                height: auto;


                width: 100%;


            }


            ul.gallery figure {


                width: 100%;


                max-height: 75vh;


                min-width: 0;


            }


        }


        @media (max-aspect-ratio: 1/1) {


            ul.gallery li {


                height: 30vh;


            }


        }


        @media (max-height: 480px) {


            ul.gallery li {


                height: 80vh;


            }


        }




    ul.gallery.cut {


        --gap: var(--txt-small);


        display: grid;


        max-width: var(--narrow);


        grid: auto-flow 1fr/repeat(3, 1fr);


        gap: var(--gap);


    }


        ul.gallery.cut img {


            filter: var(--filterNone);


        }


        ul.gallery.cut:hover img {


            filter: var(--filter);


        }


        ul.gallery.cut:hover img:hover {


            filter: var(--filterNone);


        }


            ul.gallery.cut li:nth-of-type(4n +2) {


                grid-area: 1/2/span 2/span 2;


                clip-path: polygon(0 0,100% 0,100% 100%,calc(50% + var(--g)/4) 100%,0 calc(50% - var(--g)/4));


            }


            ul.gallery.cut li:nth-of-type(4n +3) {


                grid-area: 2/1/span 2/span 2;


                clip-path: polygon(0 0,calc(50% - var(--g)/4) 0,100% calc(50% + var(--g)/4),100% 100%,0 100%);


            }










/*** POPUPS: notifications, cart, queue ***/


aside.main.main {


    --wrap: nowrap;


    --align: stretch;


    --dir: column;


    position: fixed;


    top: var(--btnbtn);


    bottom: var(--btn_);


    width: min(500px, calc(100vw - 2rem));


    padding: 0 0 var(--btn);


}


    aside.main.left {


        border-radius: 0 var(--radius-outer) var(--radius-outer) 0;


        left: var(--offScreen);


        transition: left var(--trans-base);


    }


        aside.main.left.expanded {


            left: 0;


        }


    aside.main.right {


        border-radius: var(--radius-outer) 0 0 var(--radius-outer);


        right: var(--offScreen);


        transition: right var(--trans-base);


    }


        aside.main.right.expanded {


            right: 0;


        }


    aside.main nav.tabs {


        --gap: 0;


        flex-shrink: 0;


    }


    aside.main > .wrap {


        max-height: 100%;


        overflow: hidden auto;


    }


        aside.main header {


            --w: 2em;


            background-color: rgb(var(--action-0));


            color: rgb(var(--action-contrast));


            padding: 1rem;


        }


        .tab-content header {


            width: calc(100% + 2rem);


            left: -1rem;


            top: -1rem;


            position: relative;


        }


            .main header .icon {


                margin-right: 1em;


            }


            .main h3 {


                font-size: var(--txt-large);


                margin: .5rem 0;


            }


        aside.main nav.share {


            --dir: row;


            --align: center;


            margin: 0;


            border-bottom: 1px solid rgb(var(--base-200));


        }


            nav.share ul,


            nav.share li,


            nav.share a {


                height: var(--chipchip);


            }


            nav.share a:hover {


                background-color: rgb(var(--action-0));


                color: rgb(var(--action-contrast));


            }


        aside.main h4,


        aside.main .hint {


            text-align: center;


        }


    aside.main .tab-content {


        flex-shrink: 0;


    }


    aside.main .tab-content.active {


        flex: 1;


        overflow: hidden auto;


        padding: 1rem;


    }


    .main section {


        padding: 1rem;


    }


    .main section + section {


        border-top: 1px solid rgb(var(--base-200));


    }




.qtoggle .count,


.indicator {


    position: absolute;


    top: -.5em;


    right: -.5em;


    width: .75em;


    height: .75em;


    border-radius: 50%;


}


.qtoggle .indicator {


    top: 0;


    right: 0;


}


    .qtoggle .count {


        right:unset;


        left: .25rem;


        top: .25rem;


        font-size: var(--txt-small);


    }


    #queue.synced + .qtoggle .indicator {


        background-color: rgb(var(--success));


    }




    #queue.pending + .qtoggle .indicator {


        background-color: rgb(var(--warning));


        animation: pulse 2s infinite;


    }




    .refresh.fetching .icon,


    #queue.pending:not(.expanded) + .qtoggle .icon {


        background-color: rgb(var(--action-0));


        animation: spin 1s var(--trans-fn) infinite;


    }


.main.expanded + .qtoggle {


    width: calc(min(500px, calc(100vw - 2rem)) - var(--btn));


}




.main-actions .buttons:has(.expanded) {


    width: calc(min(500px, calc(100vw - 2rem)));


}


.main.expanded + .qtoggle {


    left: var(--btn);


    border-bottom-right-radius: var(--radius-outer);


}


.main-actions .buttons:has(.expanded) {


    right: 0;


}


.main-actions button.expanded {


    border-bottom-left-radius: var(--radius-outer);


    width: 100%;


}


.buttons:has(.expanded) > button:not(.expanded) {


    display: none;


}




.main nav.filters {


    width: 100%;


    height: var(--chipchip);


    --justify: flex-start;


    --align: flex-end;


}


.main nav.filters li {


    overflow: visible;


}


.main .btn + label {


    min-height: var(--chip);


    min-width: var(--chip);


    overflow: visible;


}


.btn + label .indicator:not(:empty) {


    font-size: var(--txt-small);


    background-color: rgb(var(--base));


    border: 1px solid rgb(var(--contrast));


    width: 1.75em;


    height: 1.75em;


    padding: .3em;


}




.main > .header {


    border-bottom: 1px solid rgb(var(--base-200));


    padding: 1rem 0;


    flex-shrink: 0;


}


.main .item-grid {


    flex: 1;


    overflow: hidden auto;


    overflow-anchor: none;


    padding: .5rem 2rem;


    --gap: .5rem;


}


.queue-actions {


    flex-shrink: 0;


    border-top: 1px solid rgb(var(--base-200));


}


.queue-actions button {


    width: 100%;


}




.main .item {


    background-color: rgb(var(--base-50));


    padding: 15px;


    border-radius: var(--radius);


    box-shadow: var(--shdw-none);


    font-size: var(--txt-x-small);


}


.main .item .header {


    position: relative;


    padding: .25rem 0;


}


.main .item .actions {


    width: 100%;


}


.main .item button {


    min-height: var(--chip);


    font-size: var(--txt-x-small);


    --w: var(--txt-x-small);


}


.main .item .time {


    padding: .5rem 0;


    font-size: var(--txt-small);


    border: 1px solid rgb(var(--base-200));


    border-width: 1px 0;


    margin: .25rem 0;


}


.main .item .progress .details {


    text-align: right;


    font-size: var(--txt-small);


    width: 100%;


}


/*** MAIN ACTIONS ***/


.main-actions .buttons {


    transition: width var(--trans-base), right var(--trans-base);


    right: .5rem;


    width: var(--btn);


    margin: 0;


}


.attn {


    animation: pulse-color 5s infinite;


    animation-delay: 1s;


}


.attn.expanded {


    animation: none;


}




/********************************************************


CALLOUTS


********************************************************/


.callalt.callalt,


.callout.callout {


    padding: 2rem;


    margin: 0;


    max-width: none;


    grid-column: full;


}




@media (min-width: 768px){


    .callout.callout {


        padding: 2rem 20vw;


    }


}




.callout.callout {


    background-color: rgb(var(--action-0));


    color: rgb(var(--action-contrast));


}




.callalt.callalt {


    background-color: rgb(var(--secondary-0));


    color: var(--secondary-contrast);


}




.callalt :is(h1, h2, h3, h4, h5, h6),


.callout :is(h1, h2, h3, h4, h5, h6) {


    font-family: var(--body);


    font-weight: var(--fw-b-bold);


    margin: 1rem 0 0;


    width: 100%;


}




.callout a {


    background-color: rgb(var(--action-contrast));


    padding: 0 .125rem;


    border-radius: 4px;


}


/********************************************************


WP BLOCKS


********************************************************/


/** MEDIA TEXT **/


.media-text > * {


    flex: 1;


}


/** COVER **/


.cover {


    --color: rgba(var(--action-0), var(--op-5));


    position: relative;


    overflow: hidden;


    min-height: 60vh;


    padding: var(--btn);


}




    .cover:not(.duotone)::before {


        content: '';


        /*z-index: var(--coverIndex);*/


        background-color: var(--dark-0);


        /*mix-blend-mode: var(--coverBlend);*/


        /*background-position: center;*/


        /*background-repeat: no-repeat;*/


        /*background-size: cover;*/


    }


    .cover .overlay {


        background-color: var(--dark-0);


    }


        .overlay.op-1 {


            opacity: var(--op-1);


        }


        .overlay.op-2 {


            opacity: var(--op-2);


        }


        .overlay.op-3 {


            opacity: var(--op-3);


        }


        .overlay.op-4 {


            opacity: var(--op-4);


        }


        .overlay.op-45 {


            opacity: var(--op-45);


        }


        .overlay.op-5 {


            opacity: var(--op-5);


        }


        .overlay.op-6 {


            opacity: var(--op-6);


        }


    .cover:has(.overlay)::before {


        display: none;


    }


.cover .overlay,


.cover:not(.duotone)::before,


.cover > video,


.cover > img {


    position: absolute;


    inset: 0;


    width: 100%;


    max-width: none!important;


    height: 100%;


    margin: 0;


}


.cover > img,


.cover > video {


    mix-blend-mode: luminosity;


    max-width: none!important;


    width: 100%!important;


}


.cover .overlay,


.cover:not(.duotone)::before {


    z-index: 2;


    background-color: var(--color);


    mix-blend-mode: color;


}






.cover .content {


    z-index: 5;


    position: relative;


    overflow: hidden auto;


    width: max-content;


    height: max-content;


    max-width:100%;


    max-height: 100%;


}




.cover > img {


    /*z-index: 1;*/


    /*opacity: .5;*/


    /*mix-blend-mode: luminosity;*/


    object-fit: cover;


}




@media (min-width: 768px) {


    .cover > img {


        /*opacity: .33;*/


    }


}


/** IMAGE **/


figure {


    overflow: hidden;


    position: relative;


}


figure:is(.op-1,.op-2,.op-3,.op-4,.op-5,.op-6,.op-45)::before {


    position: absolute;


    inset: 0;


    pointer-events: none;


    content: '';


}


    figure.op-1::before {


        opacity: var(--op-1);


    }


    figure.op-2::before {


        opacity: var(--op-2);


    }


    figure.op-3::before {


        opacity: var(--op-3);


    }


    figure.op-45::before {


        opacity: var(--op-45);


    }


    figure.op-4::before {


        opacity: var(--op-4);


    }


    figure.op-5::before {


        opacity: var(--op-5);


    }


    figure.op-6::before {


        opacity: var(--op-6);


    }




    figure.action-0::before {


        background-color: rgb(var(--action-0));


    }


    figure.action-50::before {


        background-color: rgb(var(--action-50));


    }


    figure.action-100::before {


        background-color: rgb(var(--action-100));


    }


    figure.action-200::before {


        background-color: rgb(var(--action-200));


    }


    figure.secondary-0::before {


        background-color: rgb(var(--secondary-0));


    }


    figure.secondary-50::before {


        background-color: rgb(var(--secondary-50));


    }


    figure.secondary-100::before {


        background-color: rgb(var(--secondary-100));


    }


    figure.secondary-200::before {


        background-color: rgb(var(--secondary-200));


    }


    figure.base::before {


        background-color: rgb(var(--base));


    }


    figure.base-50::before {


        background-color: rgb(var(--base-50));


    }


    figure.base-100::before {


        background-color: rgb(var(--base-100));


    }


    figure.base-200::before {


        background-color: rgb(var(--base-200));


    }


    figure.contrast::before {


        background-color: rgb(var(--contrast));


    }


    figure.contrast-50::before {


        background-color: rgb(var(--contrast-50));


    }


    figure.contrast-100::before {


        background-color: rgb(var(--contrast-100));


    }


    figure.contrast-200::before {


        background-color: rgb(var(--contrast-200));


    }




.bg-fixed {


    background-attachment: fixed;


}


.bg-repeat.bg-repeat {


    background-repeat: repeat;


    background-size: 33vw;


}


[data-bg-img] {


    background-size: cover;


    background-repeat: no-repeat;


}


/** BLOCKQUOTE **/


blockquote {


    margin-left: 10vw;


    position: relative;


    padding: var(--btn);


}


    blockquote .icon-quotes-fi {


        position: absolute;


        top: var(--btn);


        left: calc((10vw + var(--btn)) * -1);


        --w: 10vw;


        opacity: var(--op-1);


    }




blockquote cite {


    padding: 15px 0 0 12px;


    margin: 0 0 0 150px;


    z-index: 1;


}




blockquote.pull {


    background-color: unset;


    border-radius: 0;


    margin: 4rem auto;


    padding: 3rem;


    box-shadow: rgba(var(--base),var(--op-45)) var(--shdw-down), rgba(var(--base),var(--op-45)) var(--shdw-up);;


}




blockquote.pull cite {


    margin: 0;


}


/** QUERY **/


ul.loop {


    max-width: none;


    padding: var(--sp4) var(--sp1);


}


.loop :is(h1,h2,h3,h4,h5,h6) {


    margin: .5em 0;


}


.loop :is(h1,h2,h3,h4,h5,h6):has(+ time) {


    margin-bottom: 0;


}


    .loop :is(h1,h2,h3,h4,h5,h6) + time {


        font-size: var(--txt-x-small);


        margin-top: 0;


    }


.loop li {


    list-style: none;


}


.loop p:has(.read-more) {


    text-align: right;


}




.loop li > figure {


    /*float: left;*/


    /*margin-right: var(--chip_);*/


    /*margin-top: 0;*/


    /*max-width: 30%;*/


    aspect-ratio: 1;


}




.loop.scroll {


    display: flex;


    flex-wrap: nowrap;


    overflow-x: auto;


    touch-action: pan-x;


    margin:0!important;


}


    a:has(img) {


        display:block;


        padding: .25rem;


    }






.no-results p,


.no-results {


    display: flex;


    justify-content: center;


    align-items: center;


}






/** TODO: LIST OVERRIDES **/


/*********************************************************


DIRECTORY


*********************************************************/


.directory-list > ul {


    max-width: none;


    margin-left: 0!important;


}


.directory-list .image {


    display: flex;


    flex-wrap: nowrap;


    align-items: center;


}


    .directory-list img {


        width: 70px;


    }


.directory-list h3 {


    margin: 0;


    text-align: center;


    font-weight: var(--fw-h-bold);


    position: sticky;


    font-size: var(--txt-enormous);


    width: 100%;


    top: var(--btn);


    left: 0;


    color: rgb(var(--base));


    text-shadow: rgb(var(--base-200)) 1px 1px 0;


    user-select: none;


}


    .directory-list >ul > li {


        padding: 2rem;


        align-items: flex-start;


    }


    .directory-list >ul > li:nth-of-type(even) {


        background-color: rgb(var(--base-100));


    }




    /** The letter's list **/


    .directory-list ul ul {


        width: 100%;


    }


    .directory-list ul ul li {


        padding: .35rem .5rem;


    }


    .directory-list ul ul li:nth-of-type(even) {


        background-color: rgb(var(--base-100));


    }


    .directory-list ul li:nth-of-type(even) ul li:nth-of-type(even) {


        background-color: rgb(var(--base-50));


    }


    @media (min-width: 768px) {


        aside.pre-header,


        aside.sub-header {


            padding: 0 2rem;


            font-size: var(--medium);


        .directory-list h3 {


            width: 20vw;


        }


        .directory-list ul ul {


            min-height: var(--txt-enormous);


        }


        .directory-list >ul > li {


            padding: 2rem 10vw;


        }


    }


    .pre-header p,


    .pre-header p + p,


    .sub-header p,


    .sub-header p + p {


        margin: 0;


    }


.pre-header {


    top: 0;


    z-index: 1001;


}


.wp-site-blocks > .pre-header ~ header {


    top: 2.05rem;


}


.sub-header {


    top: var(--height);


    box-shadow: var(--shadow);


}


.pre-header ~ .sub-header {


    top: calc(var(--height) + 1.5rem);




/******************************************************************


LOADING


******************************************************************/


dialog.loading {


    opacity: 0;


}




/**************************************************


RESPONSES


**************************************************/


/*dialog.create-response {*/


/*    width: min(650px, calc(95vw - (var(--padding) * 2)));*/


/*}*/


/*dialog.create-response .original {*/


/*    height: 20vh;*/


/*    overflow-y: scroll;*/


/*    padding: 1rem;*/


/*    background-color: var(--base-100);*/


/*    border-radius: var(--innerRadius);*/


/*}*/


/*dialog.create-response .editor-container .ql-container {*/


/*    height: 30vh;*/


/*}*/


dialog.loading[open] {


    opacity: 1;


    width: 100vw;


    height: 100vh;


    display: flex;


    max-width: 100%;


    max-height: 100%;


    border-radius: 0;


    border: none;


    background-color: transparent;


    box-shadow: none;


    --w: 3em;


    justify-content: center;


    align-items: center;


    inset: 0;


}




/*.responses summary {*/


/*    text-transform: none;*/


/*    display: block;*/


/*}*/


/*.news .header {*/


/*    margin-right: 2rem;*/


/*}*/


/*.news > summary::after,*/


/*.responses summary::after {*/


/*    display: block;*/


/*    position: absolute;*/


/*    top: 0;*/


/*    right: 0;*/


/*    mask-image: var(--chevron);*/


/*}*/


/*.responses[open] > summary {*/


/*    background-color: inherit;*/


/*}*/


/*.responses[open] {*/


/*    background-color: var(--base-200);*/


/*}*/


/*.responses {*/


/*    margin: 1rem 0;*/


/*}*/


dialog.loading[open]@starting-style {


    opacity: 0;


}




/*.response {*/


/*    background-color: inherit;*/


/*}*/


/*.response[open] {*/


/*    background-color: var(--base-100);*/


/*}*/


/*.response[open] > summary {*/


/*    background-color: inherit;*/


/*}*/


/*.news[open] > summary::after,*/


/*.responses[open] > summary::after,*/


/*.response[open] > summary::after {*/


/*    mask-image: var(--chevron);*/


/*}*/


/*.response > summary::after {*/


/*    display: none;*/


/*}*/


/*.response:has(.response) > summary::after {*/


/*    display: block;*/


/*}*/


/*.response:nth-of-type(even) {*/


/*    background-color: var(--base-50);*/


/*}*/


/*button.reply {*/


/*    margin-left: auto;*/


/*}*/


/**************************************************


ANIMATIONS


**************************************************/


/** Used for Loading **/


dialog.loading[open] > .col {


    height: fit-content;


    width: min(400px, 60vw);


    border-radius: var(--radius-outer);


    background-color: rgba(var(--base),var(--op-4));


    padding: 2rem;


    box-shadow: rgba(var(--base),var(--op-45)) var(--shdw);


    position: relative;


}




dialog.loading[open] .spinner {


    position: absolute;


    top: 1rem;


    width: 5rem;


    height: 5rem;


    border-width: 0;


    border-top-width: 4px;


    animation: spin 1s var(--trans-fn) infinite;


}




.loading[open] i.icon {


    background-color: rgb(var(--action-0));


}




dialog.loading[open] i.icon {


    animation: dance 2s ease-in-out infinite;


}




dialog.loading[open] h3 {


    color: rgb(var(--contrast));


    margin: 2rem 1rem auto !important;


    font-size: var(--txt-large);


    width: -moz-fit-content;


    width: fit-content;


}




dialog.loading[open] p {


    margin: .5rem auto;


}




dialog.loading[open]::after {


    animation: shimmer 3s ease-in-out infinite;


    background: linear-gradient(90deg, var(--shimmer));


    content: "";


    inset: 0;


    position: absolute;


    z-index: -1;


}




.spinner {


    width: 12px;


    height: 12px;


    border: 2px solid transparent;


    border-top: 2px solid rgb(var(--action-50));


    border-radius: 50%;


    animation: spin 1s var(--trans-fn) infinite;


}




/** ANIMATIONS **/


@keyframes shimmer {


    0% {


        left: -50%;


@@ -3960,20 +3755,18 @@


    }


}






@keyframes pulse-color {


    0% {


        box-shadow: 0 0 0 0 rgba(var(--action-rgb), .4);


        box-shadow: 0 0 0 0 rgba(var(--action-0), .4);


    }


    30% {


        box-shadow: 0 0 0 .75rem rgba(var(--action-rgb), 0);


        box-shadow: 0 0 0 .75rem rgba(var(--action-0), 0);


    }


    100% {


        box-shadow: 0 0 0 0 rgba(var(--action-rgb), 0);


        box-shadow: 0 0 0 0 rgba(var(--action-0), 0);


    }


}




/** fadeIn & fadeOut, for adding/removing items **/


@keyframes fadeIn {


    from {


        opacity: 0;


@@ -3996,1352 +3789,21 @@


    }


}




/******************************************


OVERFLOW DETECTION


Include this in items to detect:


// Scroll detection animation


animation: detect-scroll linear;


animation-timeline: scroll(self inline);


******************************************/


/* Scroll detection keyframe */


@keyframes detect-scroll {


    from, to {


        --can-scroll: 1;


    }


}






/******************************************************************


DIRECTORY


******************************************************************/




/*.directory-list {*/


/*    max-width: var(--alignWide);*/


/*}*/


/*.directory-list ul {*/


/*    gap: 0;*/


/*}*/


/*    .directory-list li.title {*/


/*        margin-left: -1rem;*/


/*    }*/






/*.is-directory section {*/


/*    max-width: var(--full);*/


/*    width: calc(var(--full) - 1rem);*/


/*    padding: 0 .5rem;*/


/*}*/


/*    .is-directory .list-none ul,*/


/*    .is-directory .list-none {*/


/*        margin: 0;*/


/*        padding: 0;*/


/*        list-style: none;*/


/*    }*/


/*    .is-directory .list-none ul {*/


/*        width: 80%;*/


/*    }*/


/*    .is-directory .list-none > li + li {*/


/*        border-top: 1px solid var(--base-100);*/


/*        padding-top: 2rem;*/


/*        margin-top: 2rem;*/


/*    }*/


/*    .is-directory .list-none ul li {*/


/*        background-color: var(--base-50);*/


/*        padding: .5rem .25rem;*/


/*    }*/


/*    .is-directory .list-none ul li:nth-of-type(even){*/


/*        background-color: var(--base-100);*/


/*    }*/


/*    .is-directory .list-none h3 {*/


/*        margin: .5rem auto!important;*/


/*        position: sticky;*/


/*        text-align: center;*/


/*        top: 4rem;*/


/*        font-size: 20vw;*/


/*        color: var(--base-200);*/


/*        background-color: var(--base);*/


/*        width: 20%;*/


/*    }*/


/*    @media (min-width:768px){*/


/*        .is-directory section {*/


/*            max-width: var(--alignWide);*/


/*        }*/


/*        .is-directory .list-none,*/


/*        .is-directory .list-none ul {*/


/*            padding-left: 2rem;*/


/*        }*/


/*        .is-directory .list-none h3 {*/


/*            text-align: left;*/


/*            top: 8rem;*/


/*            position: sticky;*/


/*            background-color: transparent;*/


/*        }*/


/*    }*/




/*.directories > .directory {*/


/*    border-radius: 1rem;*/


/*    background-color: var(--base-100);*/


/*    text-align: center;*/


/*    padding: .5rem;*/


/*}*/


/*.directories > .directory a .icon {*/


/*    --w: 3rem;*/


/*    margin: 0;*/


/*}*/


/*.directory h2 {*/


/*    font-size: var(--large);*/


/*    margin: .5rem 0!important;*/


/*    width: 100%;*/


/*}*/


/*@media (min-width: 768px) {*/


/*    .directories {*/


/*        display: grid;*/


/*        grid-template-columns: repeat(3, 1fr);*/


/*        gap: 1rem;*/


/*    }*/


/*}*/




/*nav.directory li {*/


/*    list-style: none;*/


/*    display: inline-flex;*/


/*}*/


/*.grouped-directory {*/


/*    margin: 0;*/


/*    padding: 0;*/


/*    list-style: none;*/


/*}*/


/*    .grouped-directory .grouped-directory {*/


/*        padding-left: 2rem;*/


/*    }*/


/*.grouped-directory li:not(:has(details)) {*/


/*    padding: .625rem;*/


/*}*/


/*.grouped-directory summary a {*/


/*    order: 1;*/


/*    text-transform: none;*/


/*}*/


/*.grouped-directory summary::after {*/


/*    order: 2;*/


/*}*/


/*.grouped-directory li details[open] > summary,*/


/*.grouped-directory li details[open] {*/


/*    background-color: var(--base-100);*/


/*}*/




/*.grouped-directory details[open] details[open] > summary,*/


/*.grouped-directory details[open] details[open] {*/


/*    background-color: var(--overlay-light);*/


/*}*/




/*.is-directory h1 {*/


/*    margin-top: 3rem!important;*/


/*}*/


/******************************************************************


NORTHEH


******************************************************************/


.menu-items .menu-item {


    display: grid;


    grid-template-columns: repeat(3, 1fr);


    gap: 0 1rem;


}


.menu-items .menu-item:not(.variable) label {


    display: none;


}


.menu-items .menu-item .field {


    margin: 0;


    --wrap: nowrap;


}


.menu-items .menu-item .has-tooltip {


    position: absolute;


    right: -2.5rem;


}


.menu-items .menu-item + .menu-item {


    border-top: 1px solid var(--base-200);


    margin-top: 2rem;


    padding-top: 1rem;


}


.menu-items .menu-item .header {


    grid-column: 1/-1;


}


.menu-items .menu-item .description {


    grid-column: 1/3;


}


.menu-items .menu-item .info {


    grid-column: 3/3;


}


.menu-items .menu-item h3 {


    font-size: var(--medium);


    font-weight: normal;


    margin: 0 0 .5rem 0!important;


}




.menu-items .menu-item .info {


    --gap: 1rem;


}


.price > span {


    vertical-align: super;


    font-size: 12px;


}


body.menu_item section > h2 {


    display: inline-block;


    max-width: var(--maxWidth);


    width: max-content;


    background-color: var(--base-50);


    color: var(--action-0);


    position: relative;


    z-index: 5;


    padding: 0 1rem;


    margin: var(--mt) auto var(--mb) auto;


}




.menu-section {


    position: relative;


}


.menu-section hr {


    position: absolute;


    width: 100%;


    left: -5%;


    top: 3.5rem;


    border: none;


    background-color: var(--action-100);


    height: 2px;


}






details.menu-item summary.row {


    flex-direction: column;


    align-items: flex-start;


}


details.menu-item summary .row {


    width: 100%;


}




.menu_item h1:first-of-type {


    margin-top: 10vh!important;


}




@media (min-width: 768px) {


    .menu-section hr {


        width: 120%;


        left: -10%;


        top: 4.25rem;


    }




    .menu_item section {


        max-width: var(--maxWidth);


    }




    /*details.menu-item summary.row {*/


    /*    flex-direction: var(--dir);*/


    /*    align-items: var(--justify);*/


    /*}*/


}


/**


TODO: For Legacy


Triangles Loader




.loading-wrapper {


    display: flex;


    flex-direction: column;


    align-items: center;


    padding: 2rem 1rem 1rem;


}


.loader-wrap {


    height: 75px;


    width: 75px;


}


.new-term-toggle:disabled + .loader,


.loading .loader {


    width: 50px;


    aspect-ratio: 1.154;


    display: grid;


    color: var(--action-0);


    background:


            linear-gradient(to bottom left ,#0000 calc(50% - 1px),currentColor 0 calc(50% + 1px),#0000 0) right/50% 100%,


            linear-gradient(to bottom right,#0000 calc(50% - 1px),currentColor 0 calc(50% + 1px),#0000 0) left /50% 100%,


            linear-gradient(currentColor 0 0) bottom/100% 2px;


    background-repeat: no-repeat;


    transform-origin: 50% 66%;


    animation: l5 4s infinite linear;


}


.new-term-toggle:disabled + .loader::before,


.new-term-toggle:disabled + .loader::after,


.loading .loader::before,


.loading .loader::after {


    content: "";


    grid-area: 1/1;


    background: inherit;


    transform-origin: inherit;


    animation: inherit;


}


.new-term-toggle:disabled + .loader::after,


.loading .loader::after {


    animation-duration: 2s;


}


@keyframes l5{


    100% {transform:rotate(1turn)}


}


 */




/* DONE TO HERE */








/*dialog .search-wrapper {*/


/*    padding: .5rem;*/


/*}*/






/*.favourite-terms ul {*/


/*    gap: .25rem 1rem;*/


/*    padding: 0;*/


/*}*/


/*    .favourite-terms label::before,*/


/*    .favourite-terms label::after {*/


/*        display: none;*/


/*    }*/


/*    .favourite-terms label {*/


/*        padding: .25rem .5rem!important;*/


/*        border: 1px solid var(--base-200);*/


/*        color: var(--contrast-200);*/


/*        border-radius: var(--innerRadius);*/


/*    }*/


/*    .favourite-terms :checked + label,*/


/*    .favourite-terms label:hover {*/


/*        border-color: var(--action-0);*/


/*        color: var(--action-0);*/


/*    }*/


/*.items-container {*/


/*    padding: 0;*/


/*}*/


/*    .items-container li .children {*/


/*        width: 100%;*/


/*        padding-left: 1rem;*/


/*    }*/


/*.path button+button::before {*/


/*    content: ' > ';*/


/*    display: inline-block;*/


/*    margin: 0 .5rem;*/


/*}*/


/*!** Forms **!*/






/*!*.field.time_open,*!*/


/*!*.field.time_closes,*!*/


/*!*.field.date_start,*!*/


/*!*.field.time_start,*!*/


/*!*.field.time_end {*!*/


/*!*    margin-bottom: 0;*!*/


/*!*}*!*/




/*!*.field.time_open,*!*/


/*!*.field.time_closes,*!*/


/*!*.field.time_start,*!*/


/*!*.field.time_end {*!*/


/*!*    width: 49%;*!*/


/*!*    display: inline-block;*!*/


/*!*    margin-top: 1rem;*!*/


/*!*}*!*/




/*[data-h] {*/


/*    border: 0;*/


/*    clip: rect(1px, 1px, 1px, 1px);*/


/*    clip-path: inset(50%);*/


/*    height: 1px;*/


/*    margin: -1px;*/


/*    overflow: hidden;*/


/*    padding: 0;*/


/*    position: absolute !important;*/


/*    width: 1px;*/


/*    word-wrap: normal !important;*/


/*}*/




/*.checkbox-options {*/


/*    --gap: .5rem 2rem;*/


/*}*/


/*.checkbox-options label {*/


/*    flex: unset!important;*/


/*}*/




/*.radio-options {*/


/*    --gap: .125rem .5rem;*/


/*}*/




/*.radio-options input:not(.ch) + label::before {*/


/*    display: none!important;*/


/*}*/


/*.radio-options input:not(.ch) + label {*/


/*    flex: unset!important;*/


/*    padding: .25rem!important;*/


/*    border-radius: 4px;*/


/*    border: 1px solid var(--base-100);*/


/*    color: var(--contrast-200);*/


/*    transition: var(--transition-color)!important;*/


/*    font-weight: normal;*/


/*    !*width: 40%;*!*/


/*    text-align: center;*/


/*}*/


/*.radio-options input:not(.ch) + label:hover,*/


/*.radio-options input:not(.ch):checked + label {*/


/*    border-color: var(--action-0);*/


/*    color: var(--action-0);*/


/*    transition: var(--transition-color);*/


/*}*/








/*!* Style for disabled state *!*/








/*.date-range {*/


/*    padding: 2rem;*/


/*    border: none;*/


/*    border-radius: var(--innerRadius);*/


/*    background: var(--base);*/


/*    box-shadow: var(--shadow);*/


/*}*/


/*.date-range::backdrop {*/


/*    backdrop-filter: blur(5px);*/


/*    background: var(--overlay-medium);*/


/*}*/




/*.custom-range,*/


/*.month-picker {*/


/*    --gap: 1rem;*/


/*    margin-bottom: 1rem;*/


/*}*/


/*.custom-range input,*/


/*.month-picker select {*/


/*    padding: .5rem;*/


/*    border: 1px solid var(--base-100);*/


/*    border-radius: var(--innerRadius);*/


/*    background: var(--base-200);*/


/*    color: var(--contrast);*/


/*    font: inherit;*/


/*}*/


/*.custom-range input:focus,*/


/*.month-picker select:focus {*/


/*    outline: none;*/


/*    border-color: var(--action-0);*/


/*}*/


/*!** Shop Page **!*/


/*.shop header {*/


/*    max-width: var(--full);*/


/*}*/


/*.shop header img {*/


/*    width: 100%;*/


/*    height: auto;*/


/*}*/


/*.shop header h1 {*/


/*    margin-bottom: .5em;*/


/*}*/


/*.ratings {*/


/*    margin: 0;*/


/*}*/


/*!** Bio Sections **!*/


/*.bio-info {*/


/*    max-width: var(--alignWide);*/


/*    padding: .25em;*/


/*    border-radius: var(--outerRadius);*/


/*    font-size: var(--medium);*/


/*    line-height: 1.5;*/


/*}*/


/*.bio-info section {*/


/*    margin: 4rem 0;*/


/*}*/


/*.shop .column,*/


/*.bio-info .column {*/


/*    --justify: center;*/


/*}*/


/*.bio-info[open] {*/


/*    background-color: var(--base-100);*/


/*}*/


/*.bio-info summary {*/


/*    padding: .25rem;*/


/*    position: relative;*/


/*    border-radius: var(--innerRadius);*/


/*}*/


/*.bio-info[open] summary {*/


/*    background-color: var(--base-50);*/


/*    margin-bottom: 1rem;*/


/*}*/


/*.bio-info > div:not(.columns) {*/


/*    margin: 4rem 0;*/


/*    padding: 0 1rem;*/


/*}*/


/*.bio-info h2 {*/


/*    margin: 0!important;*/


/*    font-size: var(--medium);*/


/*    font-family: var(--body);*/


/*    font-weight: var(--bWeight);*/


/*}*/




/*.bio-info h3 {*/


/*    margin: 1em 0!important;*/


/*    font-size: var(--medium);*/


/*}*/


/*.bio-info figure {*/


/*    margin: 0;*/


/*    padding: 0;*/


/*}*/


/*.bio-info img {*/


/*    width: 100%;*/


/*    height: auto;*/


/*    aspect-ratio: 5/4;*/


/*    object-fit: cover;*/


/*}*/




/*    #contact {*/


/*        max-width: var(--alignWide);*/


/*    }*/


/*    #contact h2,*/


/*    section.inline h2 {*/


/*        font-size: var(--medium);*/


/*        font-weight: var(--bWeight);*/


/*        margin: 0 0 .5em 0!important;*/


/*        white-space: nowrap;*/


/*    }*/


/*ul.contact {*/


/*    list-style: none;*/


/*    display: inline-flex;*/


/*    justify-content: flex-start;*/


/*    flex-wrap: wrap;*/


/*    align-items: center;*/


/*    gap: 1rem;*/


/*    margin: 0;*/


/*    padding: 0;*/


/*}*/


/*    ul.contact + ul.contact {*/


/*        margin-left: 1rem;*/


/*    }*/


/*    ul.contact a{*/


/*        color: var(--contrast);*/


/*    }*/


/*        ul.contact a:hover {*/


/*            color: var(--action-0);*/


/*        }*/




/*.term-list {*/


/*    display: inline-flex;*/


/*    flex-wrap: wrap;*/


/*    list-style: none;*/


/*    text-transform: lowercase;*/


/*    margin: 0;*/


/*    padding: 0;*/


/*    gap: 0 .5em;*/


/*}*/


/*p.loading {*/


/*    text-align: center;*/


/*    margin: 3rem 0;*/


/*}*/


/*


/*.term-list li {*/


/*    padding: 2px 6px;*/


/*}*/




/*ul.simple-list {*/


/*    margin: 0;*/


/*    padding: 0;*/


/*    list-style: none;*/


/*}*/


/*ul.reviews li + li{*/


/*    margin-top: 2rem;*/


/*}*/








/*!*!* Status notification *!*/


/*!*.status-notification {*!*/


/*!*    position: fixed;*!*/


/*!*    bottom: 20px;*!*/


/*!*    left: 80px; !* Position to the right of the panel *!*!*/


/*!*    width: 300px;*!*/


/*!*    max-width: calc(100vw - 100px);*!*/


/*!*    border-radius: 8px;*!*/


/*!*    padding: 15px;*!*/


/*!*    background: #323232;*!*/


/*!*    color: white;*!*/


/*!*    transform: translateY(20px);*!*/


/*!*    opacity: 0;*!*/


/*!*    transition: transform .3s, opacity .3s;*!*/


/*!*    z-index: 10000;*!*/


/*!*    box-shadow: 0 4px 20px rgba(0, 0, 0, .2);*!*/


/*!*    pointer-events: none;*!*/


/*!*}*!*/




/*!*.status-notification.active {*!*/


/*!*    transform: translateY(0);*!*/


/*!*    opacity: 1;*!*/


/*!*    pointer-events: auto;*!*/


/*!*}*!*/




/*!*.status-notification .title {*!*/


/*!*    font-weight: 600;*!*/


/*!*    margin-bottom: 5px;*!*/


/*!*    font-size: 15px;*!*/


/*!*}*!*/




/*!*.status-notification .message {*!*/


/*!*    margin-bottom: 10px;*!*/


/*!*    font-size: 14px;*!*/


/*!*}*!*/




/*!*.status-notification .actions {*!*/


/*!*    display: flex;*!*/


/*!*    justify-content: flex-end;*!*/


/*!*}*!*/




/*!*.status-notification .actions button {*!*/


/*!*    padding: 6px 12px;*!*/


/*!*    background: rgba(255, 255, 255, .2);*!*/


/*!*    border: none;*!*/


/*!*    border-radius: 4px;*!*/


/*!*    color: white;*!*/


/*!*    cursor: pointer;*!*/


/*!*    font-size: 13px;*!*/


/*!*    transition: background .2s;*!*/


/*!*}*!*/




/*!*.status-notification .actions button:hover {*!*/


/*!*    background: rgba(255, 255, 255, .3);*!*/


/*!*}*!*/




/*!* Progress containers in notifications *!*/


/*.progress-container {*/


/*    margin-top: 15px;*/


/*    background: rgba(255, 255, 255, .1);*/


/*    border-radius: 4px;*/


/*    padding: 10px;*/


/*    transition: all .3s;*/


/*}*/




/*.progress-container.complete {*/


/*    opacity: .5;*/


/*}*/




/*!* Collapsed state - just show the toggle button *!*/
















/*!***/


/*Response stuff*/


/* *!*/




/*.columns {*/


/*    --wrap: nowrap;*/


/*}*/


/*    .columns.stack-small {*/


/*        --wrap: wrap;*/


/*    }*/


/*    @media (min-width: 768px){*/


/*        .columns.stack-small {*/


/*            --wrap: nowrap;*/


/*        }*/


/*    }*/


/*.column {*/


/*    width: 100%;*/


/*    padding: 1rem 0;*/


/*}*/




/*.width-300 {*/


/*    width: 300px!important;*/


/*    height: auto!important;*/


/*}*/




    .stack-small.stack-small {


        --wrap: wrap;


    }


    @media (min-width: 768px){


        .stack-small.stack-small {


            --wrap: nowrap;


        }


    }






.font-small {


    font-size: var(--small);


}


.font-medium {


    font-size: var(--medium);


}


.font-large {


    font-size: var(--large);


}






/*!***/


/*Circular Loader*/


/* *!*/


/*!*.new-term-toggle:disabled + .loader,*!*/


/*!*.loading .loader {*!*/


/*!*    width: 50px;*!*/


/*!*    aspect-ratio: 1;*!*/


/*!*    display: grid;*!*/


/*!*    border: 4px solid #0000;*!*/


/*!*    border-radius: 50%;*!*/


/*!*    border-right-color: var(--action-0);*!*/


/*!*    animation: l15 1s infinite linear;*!*/


/*!*}*!*/


/*!*.new-term-toggle:disabled + .loader::before,*!*/


/*!*.new-term-toggle:disabled + .loader::after,*!*/


/*!*.loading .loader::before,*!*/


/*!*.loading .loader::after {*!*/


/*!*    content: "";*!*/


/*!*    grid-area: 1/1;*!*/


/*!*    margin: 2px;*!*/


/*!*    border: inherit;*!*/


/*!*    border-radius: 50%;*!*/


/*!*    animation: l15 2s infinite;*!*/


/*!*}*!*/


/*!*.new-term-toggle:disabled + .loader::after,*!*/


/*!*.loading .loader::after {*!*/


/*!*    margin: 8px;*!*/


/*!*    animation-duration: 3s;*!*/


/*!*}*!*/


/*!*@keyframes l15{*!*/


/*!*    100%{transform: rotate(1turn)}*!*/


/*!*}*!*/








/*!* High contrast mode support *!*/


/*@media (forced-colors: active) {*/


/*    .feed-item {*/


/*        border: 1px solid CanvasText;*/


/*    }*/




/*    button,*/


/*    [role="button"] {*/


/*        border: 1px solid ButtonText;*/


/*    }*/




/*    button.favourite.favourited {*/


/*        background-color: Highlight;*/


/*        color: HighlightText;*/


/*    }*/


/*}*/






/*!** TODO: Verify **!*/




input[type=time],


input[type=datetime-local],


input[type=date] {


    padding: .5rem;


    border: 1px solid var(--contrast-200);


    border-radius: 4px;


    font-size: 14px;


    min-width: 180px;


    background: var(--base);


    color: var(--contrast);


    cursor: pointer;


    transition: border-color .2s ease;


}




.field-input-wrapper input[type=time]:focus,


.field-input-wrapper input[type=datetime-local]:focus,


.field-input-wrapper input[type=date]:focus,


.time-wrapper input[type=time]:focus,


.datetime-wrapper input[type=datetime-local]:focus,


.date-wrapper input[type=date]:focus {


    border-color: var(--action-0);


    box-shadow: 0 0 0 2px rgba(var(--action-rgb), .1);


}




/* Icon styling in form fields */


.field-input-wrapper .icon,


.time-wrapper .icon,


.datetime-wrapper .icon,


.date-wrapper .icon {


    width: 18px;


    height: 18px;


    background-color: var(--contrast);


    opacity: .7;


}




/*!* Required field asterisk *!*/


/*.time-wrapper input[required],*/


/*.datetime-wrapper input[required],*/


/*.date-wrapper input[required] {*/


/*    border-left: 3px solid #dc3232;*/


/*}*/




/*!* Invalid field styling *!*/


/*.time-wrapper input:invalid,*/


/*.datetime-wrapper input:invalid,*/


/*.date-wrapper input:invalid {*/


/*    border-color: #dc3232;*/


/*    background-color: #fef7f7;*/


/*}*/




/*!* Frontend Display *!*/


/*.time-field-display,*/


/*.datetime-field-display,*/


/*.date-field-display {*/


/*    display: inline-flex;*/


/*    align-items: center;*/


/*    gap: .5rem;*/


/*    padding: .25rem 0;*/


/*}*/




/*.time-field-display svg,*/


/*.datetime-field-display svg,*/


/*.date-field-display svg {*/


/*    width: 16px;*/


/*    height: 16px;*/


/*    color: #0073aa;*/


/*    flex-shrink: 0;*/


/*}*/




/*.time-value,*/


/*.datetime-value,*/


/*.date-value {*/


/*    font-weight: 500;*/


/*    color: #333;*/


/*}*/




/*!* Set and Checkbox Field Display *!*/


/*.set-field-display {*/


/*    --wrap: wrap;*/


/*}*/




/*.set-label,*/


/*.checkbox-label {*/


/*    font-weight: 600;*/


/*    color: #555;*/


/*}*/




/*.set-item {*/


/*    background: #f0f0f1;*/


/*    padding: .25rem .5rem;*/


/*    border-radius: 3px;*/


/*    font-size: .9em;*/


/*    border: 1px solid #ddd;*/


/*}*/




/*!* Radio and Select Field Display *!*/


/*.radio-field-display,*/


/*.select-field-display {*/


/*    display: inline-flex;*/


/*    align-items: center;*/


/*    gap: .5rem;*/


/*}*/




/*.radio-label,*/


/*.select-label {*/


/*    font-weight: 600;*/


/*    color: #555;*/


/*}*/




/*.radio-value,*/


/*.select-value {*/


/*    background: #f8f9fa;*/


/*    padding: .25rem .5rem;*/


/*    border-radius: 3px;*/


/*    border: 1px solid #dee2e6;*/


/*}*/




/*!* True/False Field Display *!*/


/*.true-false-display {*/


/*    display: inline-flex;*/


/*    align-items: center;*/


/*    gap: .5rem;*/


/*}*/




/*.true-false-label {*/


/*    font-weight: 600;*/


/*    color: #555;*/


/*}*/




/*.true-value {*/


/*    color: var(--success);*/


/*    font-weight: 600;*/


/*}*/




/*.false-value {*/


/*    color: var(--error);*/


/*    font-weight: 600;*/


/*}*/




/*!* Group Field Styling *!*/


/*.group-field {*/


/*    border: 1px solid #e0e0e0;*/


/*    border-radius: 6px;*/


/*    padding: 1rem;*/


/*    margin: 1rem 0;*/


/*    background: #fafafa;*/


/*}*/




/*.group-label {*/


/*    font-size: 1.1em;*/


/*    font-weight: 600;*/


/*    color: #333;*/


/*    margin: 0 0 1rem 0;*/


/*    padding-bottom: .5rem;*/


/*    border-bottom: 1px solid #e0e0e0;*/


/*}*/




/*.group-content {*/


/*    --gap: .75rem;*/


/*}*/




/*.group-item {*/


/*    padding: .5rem 0;*/


/*    border-bottom: 1px solid #f0f0f0;*/


/*}*/




/*.group-item:last-child {*/


/*    border-bottom: none;*/


/*}*/




/*.subfield-label {*/


/*    font-weight: 600;*/


/*    color: #555;*/


/*    margin-right: .5rem;*/


/*}*/




/*!* Responsive Design *!*/


/*@media (max-width: 768px) {*/


/*    .time-wrapper input[type="time"],*/


/*    .datetime-wrapper input[type="datetime-local"],*/


/*    .date-wrapper input[type="date"] {*/


/*        min-width: 150px;*/


/*        font-size: 16px; !* Prevents zoom on iOS *!*/


/*    }*/




/*    .set-field-display,*/


/*    .checkbox-field-display {*/


/*        flex-direction: column;*/


/*        align-items: flex-start;*/


/*    }*/




/*    .group-content {*/


/*        gap: .5rem;*/


/*    }*/


/*}*/




legend {


    padding: 0 1rem;


}


.abs {


    position: absolute;


}


.top {


    top: 0;


    right: 0;


    left: 0;


}


.top-right {


    top: 0;


    right: 0;


}


.top-left {


    top: 0;


    left: 0;


}




.btm {


    bottom: 0;


    left: 0;


    right: 0;


}


.btm-right {


    bottom: 0;


    right: 0;


}


.btm-left {


    bottom: 0;


    left: 0;


}


.edges {


    top: 0;


    right: 0;


    left: 0;


    bottom: 0;


}








/*********************** REFERRAL SYSTEM ***********************/


.referral-widget {


    background: #fff;


    border: 1px solid #ddd;


    border-radius: 8px;


    padding: 24px;


    margin: 20px 0;


    box-shadow: 0 2px 4px rgba(0,0,0,0.05);


}




.referral-header {


    text-align: center;


    margin-bottom: 20px;


}




.referral-header h3 {


    margin: 0 0 8px 0;


    color: #2271b1;


}




.referral-header p {


    margin: 0;


    color: #666;


    font-size: 14px;


}




/* Share Widget Styles */


.referral-link-section {


    margin-bottom: 20px;


}




.referral-link-section label {


    display: block;


    font-weight: 600;


    margin-bottom: 8px;


    color: #333;


}




.link-copy-wrapper {


    display: flex;


    gap: 8px;


}




.link-copy-wrapper input {


    flex: 1;


    padding: 10px 12px;


    border: 1px solid #ddd;


    border-radius: 4px;


    font-family: monospace;


    font-size: 13px;


    background: #f9f9f9;


}




.copy-link-btn {


    padding: 10px 20px;


    background: #2271b1;


    color: #fff;


    border: none;


    border-radius: 4px;


    cursor: pointer;


    font-weight: 600;


    white-space: nowrap;


    transition: background 0.2s;


}




.copy-link-btn:hover {


    background: #135e96;


}




.referral-code-display {


    margin: 8px 0 0 0;


    font-size: 13px;


    color: #666;


}




.referral-stats {


    display: grid;


    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));


    gap: 16px;


    margin-bottom: 20px;


    padding: 16px;


    background: #f8f9fa;


    border-radius: 6px;


}




.stat-item {


    text-align: center;


}




.stat-value {


    display: block;


    font-size: 24px;


    font-weight: bold;


    color: #2271b1;


}




.stat-label {


    display: block;


    font-size: 12px;


    color: #666;


    margin-top: 4px;


}




.share-buttons {


    display: flex;


    gap: 10px;


    justify-content: center;


    flex-wrap: wrap;


}




.share-btn {


    display: inline-flex;


    align-items: center;


    gap: 6px;


    padding: 10px 16px;


    border: 1px solid #ddd;


    border-radius: 4px;


    text-decoration: none;


    color: #333;


    font-size: 14px;


    font-weight: 500;


    transition: all 0.2s;


}




.share-btn:hover {


    background: #f5f5f5;


    border-color: #999;


}




/* Validation Widget Styles */


.form-group {


    margin-bottom: 16px;


}




.form-group label {


    display: block;


    font-weight: 600;


    margin-bottom: 8px;


    color: #333;


}




.input-button-wrapper {


    display: flex;


    gap: 8px;


}




.input-button-wrapper input {


    flex: 1;


    padding: 12px 16px;


    border: 2px solid #ddd;


    border-radius: 4px;


    font-size: 16px;


    font-family: monospace;


    font-weight: 600;


    text-transform: uppercase;


    transition: border-color 0.2s;


}




.input-button-wrapper input:focus {


    outline: none;


    border-color: #2271b1;


}




.validate-btn {


    padding: 12px 24px;


    background: #2271b1;


    color: #fff;


    border: none;


    border-radius: 4px;


    cursor: pointer;


    font-weight: 600;


    white-space: nowrap;


    transition: background 0.2s;


}




.validate-btn:hover {


    background: #135e96;


}




.validate-btn:disabled {


    background: #ccc;


    cursor: not-allowed;


}




.helper-text {


    margin: 8px 0 0 0;


    font-size: 13px;


    color: #666;


}




.helper-text a {


    color: #2271b1;


    text-decoration: none;


}




.helper-text a:hover {


    text-decoration: underline;


}




.message {


    padding: 12px 16px;


    border-radius: 4px;


    margin-top: 16px;


    font-size: 14px;


}




.message.success {


    background: #d4edda;


    color: #155724;


    border: 1px solid #c3e6cb;


}




.message.error {


    background: #f8d7da;


    color: #721c24;


    border: 1px solid #f5c6cb;


}




/* Success State Styles */


.referral-success-state {


    text-align: center;


}




.success-icon {


    width: 80px;


    height: 80px;


    margin: 0 auto 20px;


    background: #28a745;


    border-radius: 50%;


    display: flex;


    align-items: center;


    justify-content: center;


    color: #fff;


    font-size: 40px;


}




.success-content h3 {


    color: #28a745;


    margin: 0 0 12px 0;


}




.reward-highlight {


    background: #e7f5ff;


    padding: 20px;


    border-radius: 6px;


    margin: 20px 0;


    border-left: 4px solid #2271b1;


}




.reward-highlight strong {


    color: #2271b1;


    font-size: 18px;


}




.cta-button {


    display: inline-block;


    padding: 14px 32px;


    background: #2271b1;


    color: #fff;


    text-decoration: none;


    border-radius: 4px;


    font-weight: 600;


    margin-top: 16px;


    transition: background 0.2s;


}




.cta-button:hover {


    background: #135e96;


}




.referred-by {


    margin-top: 16px;


    padding-top: 16px;


    border-top: 1px solid #ddd;


    font-size: 13px;


    color: #666;


}




.loading-spinner {


    display: inline-block;


    width: 16px;


    height: 16px;


    border: 2px solid #f3f3f3;


    border-top: 2px solid #2271b1;


    border-radius: 50%;


    animation: spin 1s linear infinite;


    margin-left: 8px;


    vertical-align: middle;


}




@keyframes spin {


    0% { transform: rotate(0deg); }


    100% { transform: rotate(360deg); }


}




/* Responsive */


@media (max-width: 600px) {


    .input-button-wrapper {


        flex-direction: column;


@keyframes dance {


    0%, 100% {


        transform: rotate(-5deg) scale(1);


    }




    .validate-btn {


        width: 100%;


    }




    .link-copy-wrapper {


        flex-direction: column;


    }




    .copy-link-btn {


        width: 100%;


    50% {


        transform: rotate(5deg) scale(1.1);


    }


}




.callalt.callalt,


.callout.callout {


    padding: 2rem;


    margin: 2rem 0;


    max-width: none;


}




@media (min-width: 768px){


    .callout.callout {


        padding: 2rem 20vw;


    }


}


.callout.callout {


    background-color: var(--action-0);


    color: var(--action-contrast);


}


.callalt.callalt {


    background-color: var(--secondary-0);


    color: var(--secondary-contrast);


}


    .callalt h1,


    .callalt h2,


    .callalt h3,


    .callalt h4,


    .callalt h5,


    .callalt h6,


    .callout h1,


    .callout h2,


    .callout h3,


    .callout h4,


    .callout h5,


    .callout h6 {


        font-family: var(--body);


        font-weight: var(--bBold);


        margin: 1rem 0 0;


        width: 100%;


    }




    .callout a {


        background-color: var(--action-contrast);


        padding: 0 .125rem;


        border-radius: 4px;


    }




    .attn {


        animation: pulse-color 5s infinite;


        animation-delay: 1s;


    }




    @media (min-width:768px ){


        .media-text {


            --wrap: nowrap;


        }


    }


    .media-text > div,


    .media-text figure {


        width: 100%;


        margin: 0;


    }


    .media-text > div {


        max-width: var(--maxWidth);


        margin: 0 auto;


        padding: 2rem;


    }


/*.group {*/


/*    background-color: rgb(var(--base));*/


/*    margin: 1rem 0;*/


/*}*/