@supports (-webkit-hyphens:none){
    /* * { SAFARI HACKS
    will-change: visibility, opacity, transform, contents, left, top;
    } */
}

:root {
    --color-admin: rgb(74, 6, 6);
    
    --color-fg-light: rgb(102, 102, 102);
    --color-bg-light: rgb(255, 255, 255);
    --color-link-light: #0b57d0;
    
    --color-fg-dark: rgb(235, 215, 168);
    --color-bg-dark: rgb(33, 40, 50);
    --color-link-dark: #0b57d0;
    
    --color-fg: var(--color-fg-light);
    --color-bg: var(--color-bg-light);
    --color-link: var(--color-link-light);
    
    --color-primary: rgb(171, 132, 75);
    --color-primary-light: rgb(171, 132, 75);
    --color-primary-dark: rgb(235, 215, 168);
    --color-secondary: rgb(108, 117, 125);
    --color-ternary: rgb(209, 209, 209);
    --color-quaternary: rgb(33, 40, 50);
    --color-border: rgb(171, 132, 75);
    --border-width: 1px;
    --label-color: rgb(171, 132, 75);
    
    --content-width: 1200px;
    --radius: 0.72rem;
    --gradient: radial-gradient(ellipse farthest-corner at right bottom, #e8d4a4 0%, #e8d4a4e8 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%), radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #ffffdd 8%, #D1B464 25%, #543713 62.5%, #543713 100%);
    --gap-vertical: 1em;
    --gap-horizontal: 2em;
    
    font-size: 1.1em;
    line-height: 1.5em;
}

body > article {
    display: contents;
}

:popover-open {
    border: 1px solid var(--color-primary) !important;
    border-radius: var(--radius);
    padding: 1em 2em;
    
    &::backdrop {
        background-color: rgba(0, 0, 0, 0.5);
        filter: blur(2px);
    }
}

button:has(svg) {
    border: none;
    background-color: transparent;
    
    &>*:where(svg) {
        fill: currentColor;
        height: 1.2em;
    }
}

li {
    margin: 0.7em 0px;
    
    &>p {
        margin: 0px;
    }
    
    &::marker {
        color: color-mix(in srgb, var(--color-primary) 50%, transparent);
        font-weight: bold;
        font-size: 1.2em;
        text-align: top;
    }
}

ol {
    padding-inline-start: 0em;
    counter-reset: item;
    
    &> li {
        list-style-type: none;
        position: relative;
        counter-increment: item;
        --height: 1.4em;
        
        &::before {
            content: counter(item);
            background-color: color-mix(in srgb, var(--color-primary) 33%, transparent);
            color: var(--color-bg);
            border-radius: 50%;
            font-weight: bold;
            font-size: var(--height);
            text-align: center;
            width: var(--height);
            height: var(--height);
            line-height: var(--height);
            float: left;
            margin: 0em 0.5em 0em 0em;
        }
        
        &> ol {
            margin-inline-start: 2em;
            margin-block-start: 1em;
            margin-block-end: 1em;
            
            & > li::before {
                transform: scale(0.7);
                transform-origin: right center;
                content: counter(item, lower-alpha);
            }
        }
    }
}

.margin-vertical {
    margin-block-start: 2em;
    margin-block-end: 2em;
}

.numbered {
    counter-increment: numbered;
    
    &::before {
        content: counter(numbered) ".";
        display: inline-block;
        padding-inline-end: 0.32em;
    }
}

message-board {
    /** open shadow dom root */
    --message-error-color: #ff0000;
    --message-warning-color: #df5529;
    --message-success-color: #ea942c;
    --message-info-color: #424b59;
    
    & .message {
        backdrop-filter: blur(0.2em) saturate(0%);
        /* color: #444; */
        text-overflow: ellipsis;
        white-space: normal;
        text-wrap: balance;
        word-break: break-word;
        color: white;
        backdrop-filter: blur(3px) saturate(0%) brightness(0.2);
        
        &.error {
            background-color: color-mix(in srgb, var(--message-error-color) 50%, transparent);
        }
        
        &.warning {
            background-color: color-mix(in srgb, var(--message-warning-color) 50%, transparent);
        }
        
        &.success {
            background-color: color-mix(in srgb, var(--message-success-color) 50%, transparent);
        }
        
        &.info {
            background-color: color-mix(in srgb, var(--message-info-color) 50%, transparent);
        }
    }
}

html.rms-logged-in:has(ip-defender:not([hidden])) {
    overflow: hidden;
    scrollbar-gutter: auto;
    
    &>body {
        overflow: hidden;
    }
}

a:where(:not(.button)),
*::part(link) {
    text-decoration: none;
    color: var(--color-link);
}

a:where(:not(.button)):hover,
*::part(link):hover {
    color: var(--color-primary);
}

.big {
    font-size: 1.2em;
    
    /* &:is(button) {
    font-size: 1.2em;
    } */
}

.color-inverse {
    --color-fg: var(--color-fg-dark);
    --color-bg: var(--color-bg-dark);
    --color-primary: var(--color-primary-dark);
    color: var(--color-fg);
    background-color: var(--color-bg);
}

.color-default {
    --color-fg: var(--color-fg-light);
    --color-bg: var(--color-bg-light);
    --color-primary: var(--color-primary-light);
    color: var(--color-fg);
    background-color: var(--color-bg);
}

*,
*::before,
*::after {
    box-sizing: border-box;
    scrollbar-width: thin;
    scrollbar-color: var(--color-primary) var(--color-ternary);
}

html {
    color: var(--color-fg);
    background-color: var(--color-bg);
    font-family: Arial, sans-serif;
    
    scrollbar-gutter: stable;
    background-color: var(--color-ternary);
    overflow-y: overlay;
}

body {
    padding: 0px;
    margin: 0px;
}

*:is(h1, h2, h3, h4, h5, h6, .page-logo, .page-menu:not(.hamburger-open)),
*::part(heading),
*::part(h1),
*::part(h2),
*::part(h3),
*::part(h4),
*::part(h5),
*::part(h6) {
    font-family: Georgia, Times New Roman, serif;
    
    &:is(h1, h2) {
        clear: both;
        column-span: all;
    }
}

.post-title {
    margin-bottom: 0px;
}

.post-published {
    display: block;
    opacity: 0.4;
    margin: 1em 0px 1em 0em;
    column-span: all;
}

p {
    text-wrap: balance;
    /* FF */
    text-wrap: pretty;
    /* Others */
}

*:is(h1, h2, h3, h4, h5, h6),
*::part(heading),
*::part(h1),
*::part(h2),
*::part(h3),
*::part(h4),
*::part(h5),
*::part(h6) {
    color: var(--color-primary);
    font-weight: lighter;
    line-height: 1.2em;
    padding-bottom: 0.32em;
    padding-top: 0.32em;
    
    &:is(h1),
    *::part(h1) {
        font-size: 2em;
        border-bottom: 1px solid var(--color-primary);
    }
    
    &:is(h2),
    *::part(h2) {
        font-size: 1.5em;
        border-bottom: 1px solid var(--color-primary);
    }
    
    &:is(h3),
    *::part(h3) {
        font-size: 1.17em;
    }
}

.content-width {
    width: 100%;
    max-width: var(--content-width);
    align-self: center;
    margin: 0px auto;
}

*:is(.columns-3, .columns-2) {
    column-gap: 3em;
    column-fill: balance;
    /* column-rule: 1px solid var(--color-primary); */
    column-width: 260px;
    
    & *:nth-child(1) {
        margin-top: 0px;
    }
    
    &.columns-3 {
        columns: 3 260px;
    }
    
    &.columns-2 {
        columns: 2 260px;
    }
}

hr {
    border: 0px;
    height: 0px;
    border-top: 2px solid var(--color-primary);
    margin: 1em 0px;
}

html .center, :host .center {
    align-self: center;
    margin-left: auto;
    margin-right: auto;
    justify-self: center;
    display: block;
    width: fit-content;
    
    &:is(p, h1, h2, h3, h4, h5, h6, small, span, b, i, em) {
        text-align: center;
        text-wrap: balance;
        width: 100%;
    }
}

.box {
    display: block;
    clear: both;
    isolation: isolate;
    display: flow-root;
    padding: 5em 2em;
    
    &> *:is(h1, h2, h3, h4, h5, h6):first-child,
    &> *:first-child > *:is(h1, h2, h3, h4, h5, h6):first-child {
        margin-top: 0px;
    } 
}   

.page-logo {
    text-decoration: none;
    font-size: 1rem;
    display: flex;
    gap: 0.76em;
    align-items: stretch;
    line-height: 1.2em;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: inherit;
    white-space: nowrap;
    align-items: center;
    
    &:hover,
    &:active {
        text-decoration: none !important;
        color: var(--color-fg);
    }
    
    & *:where(img, svg) {
        height: 3lh;
    }
    
    & div {
        border-left: 1px solid var(--color-ternary);
        padding-left: 0.76em;
        
        & span,
        & b {
            display: block;
        }
    }
}

.page-menu:not(.hamburger-open)>menu {
    display: flex;
    gap: 2em;
    align-items: center;
    justify-content: center;
    padding: 0.5em 0;
    list-style: none;
    padding: 0px;
    margin: 0px;
    font-size: 1em;
    text-transform: uppercase;
    
    & li.active a {
        opacity: 0.5;
    }
    
    & a {
        color: inherit;
        text-decoration: none !important;
    }
}

a[role] {
    color: var(--color-primary);
    text-decoration: none;
}

.icon-decor {
    --size: 7rem;
    width: var(--size);
    height: var(--size);
    padding: calc(var(--size) / 5);
    display: inline-block;
    border-radius: var(--size);
    border: 0.2em solid var(--color-primary);
    fill: var(--color-bg);
    overflow: visible;
    background: var(--gradient);
}

.decor {
    width: 100%;
    
    &:is(.left, .right) {
        width: calc(33%);
        margin:  2em 2.5em;
    }
    
    &.right {
        float:  right;
        margin-right: 0px;
    }
    
    &.left {
        float:  left;
        margin-left: 0px;
    }

    &.center {
        display: block;
        margin: 2em auto;
        width: 66%;
        max-width: 1270px;
    }

    &.full {
        display: block;
        margin: 2em auto;
        width: 100%;
    }

    &:is(img, video) {
        border-radius: var(--radius);
        border: 3px solid var(--color-primary);
        box-shadow: 2px 2px 4px 2px color-mix(in srgb, var(--color-fg) 30%, transparent);
        --filter: grayscale(0.5) sepia(0.4);
    }
}

@media (max-width: 960px) {
    .decor:is(.left, .right, .center) {
        display: block;
        width: 100%;
    }
}

.content-grid {
    display: grid;
    grid-template-columns:
    [full-width-start] 0rem [content-start] 1fr [content-end] 0rem [full-width-end];
    grid-auto-flow: row;
    gap: var(--gap-vertical, 1em) var(--gap-horizontal, 2em);
    
    &::before {
        content: "";
        grid-row: 1 / span 1;
        height: var(--gap-vertical, 1em);
    }
    
    &::after {
        content: "";
        height: var(--gap-vertical, 1em);
    }
    
    &>*,
    &::after,
    &::before {
        grid-column: content;
        margin: 0px;
    }
}

table:not(:has(> tbody > tr)) {
    display: none;
}

.table-actions+table {
    margin-top: 0em;
}

.table-actions {
    display: flex;
    gap: 1em;
    justify-content: flex-end;
}

table {
    --table-radius: var(--radius);
    border-collapse: separate;
    border-spacing: 0px;
    width: 100%;
    margin: 1em 0px;
    
    & .with-actions {
        display: flex;
        gap: 1em;
        justify-content: space-between;        
    }
    
    &>*>*>*:where(th) {
        text-align: start;
    }
    
    &>*>*>*:where(th, td) {
        padding: 0.5em 1em;
        background-color: var(--color-bg);
    }
    
    &>*:is(thead, tfoot) {
        &>tr>* {
            color: var(--color-primary);
            font-weight: 100;
        }
    }
    
    &>tbody>tr:is(:hover, :focus-within)>*:is(td, th) {
        background-color: color-mix(in srgb, var(--color-primary) 20%, var(--color-bg));
    }
}

*:where(blockquote) {
    margin: 1em 0px;
    padding: 1em 1em;
    border-radius: var(--radius);
    background-color: color-mix(in srgb, var(--color-primary) 10%, transparent);
    font-style: italic;
    color: var(--color-fg);    
    
    flex: 1 1 300px;
    margin: 0px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    
    &>p {
        &::before {
            content: "“";
            font-size: 4em;
            color: color-mix(in srgb, var(--color-primary) 50%, transparent);
            font-weight: bold;
            margin-right: 0.1em;
            position: relative;
            top: 0.2em;
        }
    }
    
    &>footer {
        text-align: right;
        font-style: italic;
        color: var(--color-primary);
    }
}

.no-data-message {
    display: flex;
    flex-direction: column;
    margin: 2em 1em;
    justify-content: center;
    align-items: center;
    font-size: 1.2em;
    font-weight: 200;
    color: color-mix(in srgb, var(--color-bg) 50%, var(--color-fg) 50%);
    
    & button {
        font-size: 1rem;
        margin-top: 1em;
    }
}


.access-restricted {
    background-color: red;
}


@media (max-width: 800px) {
    html .footer .spacer {
        flex: 0 0 100%;
    }
}

.fine-print {
    color: color-mix(in srgb, var(--color-secondary) 70%, var(--color-ternary));    
}

.footer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    opacity: 0.5;
    padding: 0px 3em;
    
    & .spacer {
        flex: 1 0 0%;
        height: 0px;
    }
    
    & menu {
        display: flex;
        gap: 1.5em;
        align-items: center;
        justify-content: center;
        list-style: none;
        margin: 2em 0em;
        padding: 0em;
        
        & li {
            margin: 0em;
            padding: 0em;
            & a {
                color: inherit;
                text-decoration: none !important;            
            }
        }
    }
}

.appear, .appear-left, .appear-right {
    view-timeline: --subjectReveal block;
    animation-timeline: --subjectReveal;    
    view-timeline-inset: 95% 0%;
    
    animation-name: appear;
    animation-fill-mode: both;
    animation-duration: 1ms; /* Firefox requires this to apply the animation */
    animation-composition: replace;
    animation-iteration-count: 1;
    
    &.appear-left {
        animation-name: appear-left;
    }
    &.appear-right {
        animation-name: appear-right;
    }
}


.copyright {
    font-size: 0.8em;
    color: color-mix(in srgb, var(--color-primary) 70%, transparent);
    margin: 1em 0px 0em 0px;
    padding-top: 1em;
    text-align: center;
}

footer.box {
    padding-bottom: 1em;
}


@keyframes appear {
    from {
        opacity: 0;
        transform: translateY(50%);
    }
    
    to {
        opacity: 1;
        transform: translateY(0%);
    }
}

@keyframes appear-left {
    from {
        opacity: 0;
        transform: translate(-50%, 50%);
    }
    
    to {
        opacity: 1;
        transform: translate(0%, 0%);
    }
}

@keyframes appear-right {
    from {
        opacity: 0;
        transform: translate(50%, 50%);
    }
    
    to {
        opacity: 1;
        transform: translate(0%, 0%);
    }
}