@charset "UTF-8";

:root
{
    --tpl-border: var(--cms-separator-width) solid var(--cms-background-alt);
    --tpl-maxwidth: min(100%, 1200 * var(--cms-factor));
    --tpl-linewidth: calc(4 * var(--cms-factor));
    --tpl-logo-height: calc(37.5 * var(--cms-factor));
    --tpl-branding-height: calc(var(--tpl-logo-height) + var(--tpl-linewidth) + 2 * var(--cms-vpadding));
    --tpl-menu-height: calc(var(--cms-font-size) * var(--cms-line-height) + 2 * var(--cms-vpadding));
    --tpl-sticky-top: var(--tpl-branding-height);

    INTERPOLATE-SIZE: allow-keywords;
}

/* DOCUMENT */
HTML
{
    OVERFLOW-X: clip;
    WIDTH: 100%;
}

BODY
{
    DISPLAY: flex;
    FLEX-DIRECTION: column;
    MARGIN: 0;
    MIN-HEIGHT: 100vh;
    WIDTH: 100%;
}

/* BRANDING */
#branding
{
    BOX-SIZING: border-box;
    CONTAIN: layout;
    DISPLAY: flex;
    GAP: var(--cms-vspacing) var(--cms-hspacing);
    JUSTIFY-CONTENT: space-between;
    MARGIN: 0 auto;
    PADDING: var(--cms-vpadding) var(--cms-hpadding) calc(var(--cms-vpadding) + var(--tpl-linewidth));
    POSITION: sticky;
    TOP: 0;
    WIDTH: var(--tpl-maxwidth);
    Z-INDEX: 20000;
}

#branding:before
{
    BACKGROUND: var(--cms-background);
    BORDER-BOTTOM: var(--tpl-linewidth) solid var(--cms-color-highlight);
    BOTTOM: 0;
    CONTENT: "";
    LEFT: 50%;
    POINTER-EVENTS: none;
    POSITION: absolute;
    TOP: 0;
    TRANSFORM: translateX(-50vw);
    WIDTH: 100vw;
}

#claim IMG,
#logo IMG,
#logo2
{
    HEIGHT: var(--tpl-logo-height);LINE-HEIGHT: 10px;
    WIDTH: auto;
}

@media (max-width: 500px)
{
    #claim
    {
        DISPLAY: none;
    }
}

/* HIGH RESOLUTION + MOUSE */
@media (min-width: 1001px) and (pointer: fine),
       (min-width: 1001px) and (hover: hover)
{
    /* UNUSED */
    #banner-mobile,
    #menu-open,
    #menu-close,
    #backdrop
    {
        DISPLAY: none;
    }

    /* HEADER */
    #head
    {
        DISPLAY: contents;
    }

    /* MAIN MENU */
    #menu
    {
        MARGIN: 0 auto calc(-1 * var(--cms-separator-width));
        WIDTH: var(--tpl-maxwidth);
        Z-INDEX: 15000;
    }

    #menu:before
    {
        BACKGROUND: var(--cms-background-alt);
        BORDER: var(--cms-separator-width) solid var(--cms-background);
        CONTENT: "";
        INSET: 0 auto 0 50%;
        POSITION: absolute;
        TRANSFORM: translateX(-50vw);
        WIDTH: 100vw;
        Z-INDEX: -1;
    }

    #menu UL
    {
        BACKGROUND: var(--cms-background);
        DISPLAY: inline-flex;
        GAP: var(--cms-separator-width);
        LIST-STYLE: none;
        MARGIN: 0;
        PADDING: var(--cms-separator-width);
    }

    #menu LI
    {
        MARGIN: 0;
    }

    #menu A
    {
        BACKGROUND: var(--cms-button-background);
        COLOR: var(--cms-button-color);
        DISPLAY: block;
        PADDING: var(--cms-vpadding) var(--cms-hpadding);
        TEXT-DECORATION: none;
    }

    #menu A:is(:focus-visible, :hover),
    #menu A:has(STRONG)
    {
        BACKGROUND: var(--cms-button-background-alt);
        COLOR: var(--cms-button-color-alt);
    }

    #menu UL UL
    {
        FLEX-DIRECTION: column;
        LEFT: calc(-1 * var(--cms-separator-width));
        MIN-WIDTH: 100%;
        POSITION: absolute;
        WHITE-SPACE: nowrap;
        Z-INDEX: 1000;
    }

    #menu UL UL UL
    {
        LEFT: 100%;
        TOP: calc(-1 * var(--cms-separator-width));
    }

    /* hide 2nd+ menu level */
    #menu LI UL,

    /* hide sub-subsequent item when hovered */
    #menu LI:hover LI UL,
    #menu LI LI:hover LI UL,
    #menu LI LI LI:hover LI UL,
    #menu LI LI LI LI:hover LI UL,
    #menu LI LI LI LI LI:hover LI UL
    {
        OPACITY: 0;
        POINTER-EVENTS: none;
        TRANSITION: opacity 0.5s;
        WILL-CHANGE: opacity;
    }

    /* show focused 2nd+ menu level */
    #menu A:focus ~ UL,
    #menu BUTTON:focus ~ UL,

    /* show 2nd+ menu level that contains focus */
    #menu UL:focus-within,

    /* show subsequent menu item on hover */
    #menu LI:hover UL,
    #menu LI LI:hover UL,
    #menu LI LI LI:hover UL,
    #menu LI LI LI LI:hover UL,
    #menu LI LI LI LI LI:hover UL,
    #menu LI LI LI LI LI LI:hover UL
    {
        OPACITY: 1;
        POINTER-EVENTS: auto;
        TRANSITION: opacity 0.5s;
        Z-INDEX: 1000;
    }

    /* TOGGLE BUTTONS */
    #menu A:has(+ BUTTON)
    {
        PADDING-RIGHT: calc(35 * var(--cms-factor));
    }

    #menu BUTTON
    {
        ALL: initial;
        INSET: 0 0 0 auto;
        CURSOR: pointer;
        PADDING: 0;
        POSITION: absolute;
        WIDTH: calc(35 * var(--cms-factor));
    }

    #menu BUTTON:after
    {
        BACKGROUND: var(--cms-button-color-alt);
        CONTENT: "";
        INSET: 0;
        MASK-IMAGE: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 1024'><path fill='black' d='M512 320L320 512 128 320 0 448l320 320 320-320L512 320z'/></svg>");
        MASK-POSITION: center;
        MASK-REPEAT: no-repeat;
        MASK-SIZE: calc(10 * var(--cms-factor));
        POSITION: absolute;
    }

    #menu UL UL BUTTON:after
    {
        MASK-IMAGE: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 1024'><g transform='rotate(-90 320 512)'><path fill='black' d='M512 320L320 512 128 320 0 448l320 320 320-320L512 320z'/></g></svg>");
    }

    /* FILTER */
    #filter-title
    {
        DISPLAY: none;
    }

    #filter
    {
        --cms-link-color: var(--cms-color-alt3);
        --cms-link-color-alt: var(--cms-color-alt2);

        --cms-checkbox-color: var(--cms-color-alt2);
        --cms-checkbox-background: rgba(255, 255, 255, 0.2);
        --cms-checkbox-background-alt: var(--cms-checkbox-background);
        --cms-checkbox-border: none;
        --cms-checkbox-border-alt: none;

        --cms-button-color: var(--cms-color-alt3);
        --cms-button-color-alt: var(--cms-color-alt2);
        --cms-button-background: var(--cms-background-alt3);
        --cms-button-background-alt: var(--cms-background-alt2);
        --cms-button-border: var(--cms-button-border-width) var(--cms-button-border-style) var(--cms-background-alt3);
        --cms-button-border-alt: var(--cms-button-border-width) var(--cms-button-border-style) var(--cms-background-alt2);

        --cms-scrollbar-color: var(--cms-color-alt2);

        BACKGROUND: var(--cms-background);
        BOX-SIZING: border-box;
        DISPLAY: flex;
        GAP: var(--cms-separator-width);
        MARGIN: 0 auto;
        PADDING: var(--cms-separator-width);
        POSITION: sticky;
        SCROLL-MARGIN-TOP: var(--tpl-sticky-top);
        TOP: var(--tpl-sticky-top);
        TRANSFORM-STYLE: preserve-3d;
        WIDTH: var(--tpl-maxwidth);
        Z-INDEX: 10000;
    }

    #filter:before
    {
        BACKGROUND: var(--cms-background-alt);
        BORDER-BOTTOM: var(--cms-separator-width) solid var(--cms-background);
        BORDER-TOP: var(--cms-separator-width) solid var(--cms-background);
        CONTENT: "";
        INSET: 0 auto 0 50%;
        POSITION: absolute;
        TRANSFORM: translateX(-50vw) translateZ(-1px);
        WIDTH: 100vw;
        Z-INDEX: -1;
    }

    #filter > *
    {
        FLEX: 1 1 auto;
        MARGIN: 0;
        WHITE-SPACE: nowrap;
    }

    #filter DIV BUTTON
    {
        MARGIN: 0;
        WIDTH: 100%;
    }

    #filter > *:focus-within BUTTON
    {
        BACKGROUND: var(--cms-button-background-alt);
        BORDER: var(--cms-button-border-alt);
        COLOR: var(--cms-button-color-alt);
    }

    DIV.select-menu
    {
        DISPLAY: none;
    }

    #filter > *:focus-within DIV.select-menu
    {
        BACKGROUND: var(--cms-background-alt2);
        DISPLAY: block;
        MAX-HEIGHT: calc(250 * var(--cms-factor));
        MIN-WIDTH: 100%;
        OVERFLOW-X: clip;
        OVERFLOW-Y: auto;
        POSITION: absolute;
        Z-INDEX: 10000;
    }

    #filter BUTTON:has(+ DIV.select-menu INPUT:checked):after
    {
        CONTENT: " *";
    }

    DIV.select-menu LABEL
    {
        DISPLAY: block;
        FONT-WEIGHT: 500;
        PADDING: 0 calc(var(--cms-hpadding) / 3 * 2);
        TEXT-DECORATION: none;
        WHITE-SPACE: nowrap;
    }

    DIV.select-menu LABEL:is(:focus-within, :hover)
    {
        TEXT-DECORATION: underline;
    }

    DIV.select-menu LABEL:last-child
    {
        PADDING-BOTTOM: var(--cms-vpadding);
    }

    DIV.select-menu > LABEL:has(INPUT:checked)
    {
        BACKGROUND: rgba(255, 255, 255, 0.1);
    }

    DIV.select-menu INPUT:checked:is(:focus-visible, :hover):after
    {
        BACKGROUND-COLOR: var(--cms-checkbox-color) !important;
    }

    #filter BUTTON[type="submit"]
    {
        BACKGROUND: var(--cms-color-highlight);
        BORDER-COLOR: var(--cms-color-highlight);
        COLOR: var(--cms-button-color);
    }

    #filter BUTTON[type="submit"]:is(:focus-visible, :hover)
    {
        BACKGROUND: var(--cms-button-background-alt);
        BORDER-COLOR: var(--cms-button-border-color-alt);
        COLOR: var(--cms-button-color-alt);
    }
}

/* LOW RESOLUTION / TOUCHSCREEN */
@media (max-width: 1000px), (pointer: coarse), (hover: none)
{
    /* UNUSED */
    #banner
    {
        DISPLAY: none;
    }

    /* DOCUMENT */
    HTML:has(#menu-open:focus),
    HTML:has(#head:focus-within)
    {
        OVERFLOW-Y: clip;
    }

    /* MAIN MENU OPEN / CLOSE BUTTONS */
    #menu-open,
    #menu-close
    {
        ALL: initial;
        COLOR: var(--cms-color);
        CURSOR: pointer;
        FONT-FAMILY: "Entypo";
        FONT-SIZE: var(--tpl-logo-height);
        FONT-WEIGHT: normal;
        HEIGHT: var(--tpl-logo-height);
        LINE-HEIGHT: var(--tpl-logo-height);
        MARGIN-LEFT: auto;
        TEXT-ALIGN: center;
        WIDTH: var(--tpl-logo-height);
        Z-INDEX: 20000;
    }

    #menu-close
    {
        BACKGROUND: var(--cms-background-alt3);
        COLOR: var(--cms-color-alt3);
        FLOAT: right;
        MARGIN-BOTTOM: var(--cms-hpadding);
        POSITION: sticky;
        TOP: 0;
        Z-INDEX: 30000;
    }

    /* HEADER */
    #head
    {
        BACKGROUND: var(--cms-background-alt2);
        BOTTOM: 0;
        BOX-SIZING: border-box;
        COLOR: var(--cms-color-alt2);
        CONTAIN: strict;
        MAX-WIDTH: calc(350 * var(--cms-factor));
        OVERFLOW-Y: auto;
        PADDING: var(--cms-hpadding);
        POINTER-EVENTS: none;
        POSITION: fixed;
        RIGHT: 0;
        TOP: 0;
        TRANSFORM: translateX(100%);
        TRANSITION: transform 0.5s;
        WIDTH: 100%;
        WILL-CHANGE: transform;
        Z-INDEX: 25000;
    }

    #branding:has(#menu-open:focus) ~ #head,
    #head:focus-within
    {
        POINTER-EVENTS: auto;
        TRANSFORM: translateX(0);
    }

    /* MAIN MENU */
    #menu
    {
        CLEAR: right;
        MARGIN-BOTTOM: var(--cms-vspacing);
    }

    #menu UL
    {
        LIST-STYLE: none;
        MARGIN: 0;
    }

    #menu LI
    {
        MARGIN: 0;
    }

    #menu A
    {
        BACKGROUND: var(--cms-button-background);
        COLOR: var(--cms-button-color);
        DISPLAY: block;
        MARGIN: 0 0 var(--cms-separator-width);
        PADDING: var(--cms-vpadding) var(--cms-hpadding);
        TEXT-DECORATION: none;
    }

    #menu UL UL
    {
        HEIGHT: 0;
        OVERFLOW: clip;
        TRANSITION: height 0.5s;
        WILL-CHANGE: height;
    }

    #menu UL UL A
    {
        BACKGROUND: var(--cms-background-alt3);
    }

    #menu A.active ~ UL,
    #menu A:focus ~ UL,
    #menu BUTTON:focus ~ UL,
    #menu UL:focus-within
    {
        HEIGHT: auto;
    }

    /* TOGGLE BUTTONS */
    #menu A:has(+ BUTTON)
    {
        PADDING-RIGHT: calc(35 * var(--cms-factor));
    }

    #menu BUTTON
    {
        ALL: initial;
        CURSOR: pointer;
        HEIGHT: var(--tpl-menu-height);
        PADDING: 0;
        POSITION: absolute;
        RIGHT: 0;
        TOP: 0;
        WIDTH: calc(35 * var(--cms-factor));
    }

    #menu BUTTON:after
    {
        BACKGROUND: var(--cms-button-color-alt);
        CONTENT: "";
        INSET: 0;
        MASK-IMAGE: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 1024'><path fill='black' d='M512 320L320 512 128 320 0 448l320 320 320-320L512 320z'/></svg>");
        MASK-POSITION: center;
        MASK-REPEAT: no-repeat;
        MASK-SIZE: calc(10 * var(--cms-factor));
        POSITION: absolute;
    }

    /* SEARCH */
    #select-search
    {
        BACKGROUND: var(--cms-background);
        BORDER-COLOR: var(--cms-background);
    }

    /* FILTER */
    #filter-title
    {
        COLOR: var(--cms-color-alt2);
        MARGIN: var(--cms-vpadding) var(--cms-hpadding);
    }

    #filter
    {
        --cms-link-color: var(--cms-color-alt2);
        --cms-link-color-alt: var(--cms-color-alt2);

        --cms-checkbox-color: var(--cms-color-alt2);
        --cms-checkbox-background: rgba(255, 255, 255, 0.2);
        --cms-checkbox-background-alt: var(--cms-checkbox-background);
        --cms-checkbox-border: none;
        --cms-checkbox-border-alt: none;

        --cms-button-color: var(--cms-color-alt3);
        --cms-button-color-alt: var(--cms-button-color);
        --cms-button-background: var(--cms-background-alt3);
        --cms-button-background-alt: var(--cms-button-background);
        --cms-button-border: var(--cms-button-border-width) var(--cms-button-border-style) var(--cms-background-alt3);
        --cms-button-border-alt: var(--cms-button-border);

        DISPLAY: flex;
        FLEX-DIRECTION: column;
        GAP: var(--cms-separator-width);
    }

    #filter > *
    {
        WHITE-SPACE: nowrap;
    }

    #filter DIV BUTTON
    {
        MARGIN: 0;
        WIDTH: 100%;
    }

    DIV.select-menu
    {
        HEIGHT: 0;
        OVERFLOW: clip;
        TRANSITION: height 0.5s;
        WILL-CHANGE: height;
    }

    #filter > *:focus-within DIV.select-menu
    {
        HEIGHT: auto;
    }

    #filter BUTTON:has(+ DIV.select-menu INPUT:checked):after
    {
        CONTENT: " *";
        SPEAK: none;
    }

    DIV.select-menu LABEL
    {
        DISPLAY: block;
        FONT-WEIGHT: 500;
        OVERFLOW-X: clip;
        PADDING: 0 calc(var(--cms-hpadding) / 3 * 2);
        TEXT-DECORATION: none;
        TEXT-OVERFLOW: ellipsis;
        WHITE-SPACE: nowrap;
    }

    DIV.select-menu LABEL:is(:focus-within, :hover)
    {
        TEXT-DECORATION: underline;
    }

    DIV.select-menu LABEL:first-child
    {
        PADDING-TOP: var(--cms-vpadding);
    }

    DIV.select-menu LABEL:last-child
    {
        PADDING-BOTTOM: var(--cms-vpadding);
    }

    DIV.select-menu > LABEL:has(INPUT:checked)
    {
        BACKGROUND: rgba(255, 255, 255, 0.1);
    }

    DIV.select-menu INPUT:checked:is(:focus-visible, :hover):after
    {
        BACKGROUND-COLOR: var(--cms-checkbox-color) !important;
    }

    #filter BUTTON[type="submit"]
    {
        BACKGROUND: var(--cms-color-highlight);
        BORDER-COLOR: var(--cms-color-highlight);
        COLOR: var(--cms-button-color);
        MARGIN: 0;
    }

    /* BACKDROP */
    #backdrop
    {
        CONTAIN: strict;
        BACKDROP-FILTER: blur(calc(5 * var(--cms-factor)));
        BACKGROUND: var(--cms-overlay-background);
        INSET: 0;
        OPACITY: 0;
        POINTER-EVENTS: none;
        POSITION: fixed;
        TRANSITION: opacity 0.5s;
        WILL-CHANGE: opacity;
        Z-INDEX: 20000;
    }

    #branding:has(#menu-open:focus) ~ #backdrop,
    #head:focus-within ~ #backdrop
    {
        OPACITY: 1;
        POINTER-EVENTS: auto;
    }
}

/* BANNER */
#banner,
#banner-mobile
{
    CONTAIN: content;
}

IMG.banner-image
{
    MAX-HEIGHT: min(350 * var(--cms-factor), 35vh);
    MIN-HEIGHT: calc(200 * var(--cms-factor));
    OBJECT-FIT: cover;
    WIDTH: 100%;
}

/* SEARCH */
#select-text:after
{
    ALIGN-CONTENT: center;
    COLOR: var(--cms-input-border-color);
    CONTENT: "\e8e9";
    FONT-FAMILY: "Entypo";
    FONT-SIZE: calc(22.5 * var(--cms-factor));
    INSET: 0 auto 0 0;
    POSITION: absolute;
    SPEAK: none;
    TEXT-ALIGN: right;
    WIDTH: calc(32.5 * var(--cms-factor));
    Z-INDEX: 10;
}

#select-text:focus-within:after
{
    COLOR: var(--cms-input-border-color-alt);
}

#select-search
{
    MARGIN: 0;
    MIN-WIDTH: min(100%, 175 * var(--cms-factor));
    PADDING-LEFT: calc(35 * var(--cms-factor));
}

#select-search-suggestion
{
    DISPLAY: none;
}

#select-text:focus-within #select-search-suggestion
{
    --cms-scrollbar-color: var(--cms-color-alt2);

    BACKGROUND: var(--cms-background-alt2);
    DISPLAY: block;
    MAX-HEIGHT: calc(250 * var(--cms-factor));
    OVERFLOW-X: clip;
    OVERFLOW-Y: auto;
    POSITION: absolute;
    WIDTH: 100%;
    Z-INDEX: 30000;
}

#select-search-suggestion BUTTON
{
    ALL: unset;
    BOX-SIZING: border-box;
    CURSOR: pointer;
    OVERFLOW: hidden;
    PADDING: 0 calc(var(--cms-hpadding) / 3 * 2) 0 calc(35 * var(--cms-factor));
    TEXT-OVERFLOW: ellipsis;
    WHITE-SPACE: nowrap;
}

#select-search-suggestion BUTTON:is(:focus-visible, :hover)
{
    TEXT-DECORATION: underline;
}

#select-search-suggestion BUTTON:last-child
{
    PADDING-BOTTOM: var(--cms-vpadding);
}

/* CONTENT */
#body
{
    ALIGN-CONTENT: center;
    BOX-SIZING: border-box;
    CONTAIN: content;
    FLEX-GROW: 1;
    MARGIN: 0 auto;
    PADDING: calc(2 * var(--cms-vspacing)) var(--cms-hpadding);
    WIDTH: min(100%, var(--tpl-maxwidth) + 2 * var(--cms-hpadding) - 2 * var(--cms-separator-width));
}

#body:has(#entry-list)
{
    PADDING-TOP: var(--cms-vspacing);
}

#body:has(DIV.u27-entry)
{
    PADDING-TOP: var(--cms-hpadding);
}

/* TAG CLOUD */
@keyframes tagcloud-bubble
{
      0% { OPACITY: 0; TRANSFORM: scale(0);    }
     75% { OPACITY: 1; TRANSFORM: scale(1.25); }
    100% { OPACITY: 1; TRANSFORM: scale(1);    }
}

#tagcloud
{
    TEXT-ALIGN: center;
    MARGIN: 0 auto var(--cms-vpadding);
    MAX-WIDTH: calc(600 * var(--cms-factor));
}

#tagcloud BUTTON
{
    ALL: unset;
    ANIMATION: tagcloud-bubble 0.5s;
    ANIMATION-DELAY: calc(0.5s * (1 - var(--factor)));
    COLOR: var(--cms-background-alt3);
    CURSOR: pointer;
    DISPLAY: inline-block;
    FONT-SIZE: calc(1em + 0.5em * var(--factor));
    FONT-STYLE: italic;
    LINE-HEIGHT: 100%;
    MARGIN: 0 0.5ch;
    VERTICAL-ALIGN: middle;
}

#tagcloud BUTTON:before
{
    CONTENT: "#";
}

#tagcloud BUTTON:is(:focus-visible, :hover)
{
    COLOR: var(--cms-link-color-alt);
    TEXT-DECORATION: underline;
}

/* ENTRY LIST HEADER */
#entry-list-head
{
    DISPLAY: flex;
    FLEX-WRAP: wrap;
    GAP: var(--cms-vpadding) var(--cms-hpadding);
    JUSTIFY-CONTENT: space-between;
    MARGIN: var(--cms-vpadding) 0;
}

#entry-switch
{
    ALL: unset;
    CURSOR: pointer;
}

#entry-switch:is(:focus-visible, :hover)
{
    COLOR: var(--cms-link-color-alt);
    TEXT-DECORATION: underline;
}

#entry-switch:before
{
    CONTENT: "\e95b";
    DISPLAY: inline-block;
    FONT-FAMILY: "Entypo";
    MARGIN-RIGHT: calc(5 * var(--cms-factor));
}

#entry-switch[aria-pressed="false"]:before
{
    TRANSFORM: scaleX(-1);
}

/* ENTRY LIST */
#entry-list:not(.simple)
{
    DISPLAY: grid;
    GRID-TEMPLATE-COLUMNS: repeat(auto-fill, minmax(min(100%, 500 * var(--cms-factor)), 1fr));
    GAP: 0 var(--cms-hpadding);
}

#entry-list.simple
{
    COLUMNS: calc(250 * var(--cms-factor)) auto;
    COLUMN-GAP: var(--cms-hpadding);
}

A.entry-item
{
    ALIGN-ITEMS: center;
    BORDER: var(--tpl-border);
    CONTAIN: content;
    DISPLAY: grid;
    GAP: var(--cms-hpadding) 0;
    GRID-TEMPLATE-ROWS: 1fr auto;
    MARGIN-BOTTOM: var(--cms-hpadding);
    PADDING: var(--cms-hpadding);
    SCROLL-MARGIN-TOP: 25vh;
    TEXT-DECORATION: none;
}

#entry-list.simple A.entry-item
{
    BREAK-INSIDE: avoid;
    GAP: 0;
}

DIV.entry-item-head
{
    ALIGN-ITEMS: center;
    DISPLAY: flex;
    FLEX-WRAP: wrap;
    GAP: var(--cms-hpadding);
}

#entry-list.simple DIV.entry-item-head
{
    FLEX-DIRECTION: column;
}

#entry-list:not(.simple) DIV.entry-item-head > IMG
{
    FLEX: 1 1 calc(150 * var(--cms-factor));
    MIN-WIDTH: min(100%, 150 * var(--cms-factor));
}

#entry-list:not(.simple) DIV.entry-item-head > DIV
{
    FLEX: 1 1 calc(100% - calc(150 * var(--cms-factor)) - var(--cms-hpadding));
    MIN-WIDTH: min(100%, 225 * var(--cms-factor));
}

#entry-list.simple A.entry-item IMG
{
    WIDTH: 100%;
}

H2.entry-title
{
    MARGIN-BOTTOM: var(--cms-vpadding);
}

H2.entry-description
{
    MARGIN-BOTTOM: 0;
}

/* DATA */
#entry-list.simple DIV.entry-overview
{
    DISPLAY: none;
}

DIV.entry-overview
{
    ALIGN-SELF: end;
}

DIV.entry-overview > DIV
{
    BORDER-BOTTOM: var(--cms-separator-border);
    DISPLAY: flex;
    FLEX-WRAP: wrap;
    GAP: 0 var(--cms-hpadding);
}

DIV.entry-overview > DIV > DIV
{
    FLEX: 1 1 calc(150 * var(--cms-factor));
    MIN-WIDTH: min(100%, 150 * var(--cms-factor));
}

DIV.entry-overview > DIV > DIV:first-child
{
    FONT-WEIGHT: 700;
}

DIV.entry-overview > DIV > DIV:first-child:after
{
    CONTENT: ":";
}

DIV.entry-overview > DIV > DIV:last-child
{
    FLEX-BASIS: calc(100% - calc(150 * var(--cms-factor)) - var(--cms-hpadding));
    MIN-WIDTH: min(100%, 225 * var(--cms-factor));
}

/* PAGINATION */
NAV.pagination
{
    MARGIN: var(--cms-vspacing) 0;
    TEXT-ALIGN: center;
}

/* FOOTER */
#foot
{
    ALIGN-ITEMS: center;
    BACKGROUND: var(--cms-background-alt2);
    BOX-SIZING: border-box;
    COLOR: var(--cms-color-alt2);
    CONTAIN: layout;
    DISPLAY: flex;
    FLEX-WRAP: wrap;
    GAP: var(--cms-vspacing) var(--cms-hspacing);
    JUSTIFY-CONTENT: space-between;
    MARGIN: 0 auto;
    PADDING: var(--cms-vspacing) var(--cms-hpadding);
    WIDTH: var(--tpl-maxwidth);
}

#foot:before
{
    BACKGROUND: var(--cms-background-alt2);
    BOTTOM: 0;
    CONTENT: "";
    LEFT: 50%;
    POSITION: absolute;
    TOP: 0;
    TRANSFORM: translateX(-50vw);
    WIDTH: 100vw;
}

/* FOOTER MENU */
#legal UL
{
    DISPLAY: flex;
    FLEX-WRAP: wrap;
    GAP: var(--cms-vpadding) var(--cms-hpadding);
    LIST-STYLE: none;
    MARGIN: 0;
}

#legal LI
{
    MARGIN: 0;
}

#legal A
{
    COLOR: var(--cms-color-alt2);
}

/* PRINT */
@media print
{
    #body
    {
        PADDING: 0;
        WIDTH: 100%;
    }

    BODY > :not(#body),
    #tagcloud,
    #entry-list-head,
    A.u27-entry-overview,
    A.u27-entry-download,
    DIV:has(> UL.u27-topic-teaser)
    {
        DISPLAY: none;
    }

    A.entry-item
    {
        PAGE-BREAK-INSIDE: avoid;
    }
}