/* ------- BASE CSS DEFINITIONS ------- */
/* Font definitions */
@font-face {
    font-family: 'scripture';
    src: url('/font/ReenieBeanie-Regular.woff') format('woff');
    font-display: swap;
}

/* CSS variables */
:root {
    /* Color palette */
    --rgb-bg-primary: rgb(2, 11, 28);
    --rgb-bg-primary-light: rgb(11, 43, 89);
    --rgb-fg-primary: rgb(181, 151, 101);
    --rgb-fg-primary-light: rgb(239, 233, 229);

    /* Typography */
    --font-content: "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace;
    --font-navigation: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;

    /* Font sizes with clamp for responsive sizing */
    --font-size-xs: clamp(0.7rem, 1.5vw, 0.8rem);
    --font-size-sm: clamp(0.9rem, 2vw, 1rem);
    --font-size-base: clamp(1rem, 2.5vw, 1.2rem);
    --font-size-md: clamp(1.1rem, 3vw, 1.3rem);
    --font-size-lg: clamp(1.3rem, 3.5vw, 1.6rem);
    --font-size-xl: clamp(1.7rem, 5vw, 2.2rem);

    /* Spacing */
    --spacing-xs: 0.5rem;
    --spacing-sm: 0.7rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.7rem;
    --spacing-xl: 3.1rem;
    --spacing-xxl: 5rem;

    /* Line heights */
    --line-height-tight: 1.5;
    --line-height-base: 1.7;
    --line-height-relaxed: 2;
    --line-height-loose: 2.9;

    /* Layout */
    --width-content-sm: 17rem;
    --width-content-md: min(32rem, 90vw);
    --width-content-lg: min(53rem, 95vw);
    --grid-gap-sm: 1rem;
    --grid-gap-md: 2rem;
    --grid-gap-lg: 3rem;
}

/* Reset styles */
:where(*),
:where(*):before,
:where(*):after {
    background: transparent;

    box-sizing: border-box;
    margin: 0;
    border-width: 0;
    padding: 0;

    line-height: inherit;

    font-size: inherit;
    font-family: inherit;
    font-style: inherit;
    font-weight: inherit;

    text-align: end;

    color: inherit;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Base document styles */
html {
    height: 100%;
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2.3rem;

    background-color: var(--rgb-bg-primary);

    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    font-family: var(--font-content);
    text-rendering: optimizeLegibility;
    color: var(--rgb-fg-primary-light);
}

/* Typography hierarchy */
h1,
h2,
h3,
h4,
h5,
h6,
th,
nav *,
.nav {
    font-family: var(--font-navigation);
    color: var(--rgb-fg-primary);
}

body>header>nav a {
    font-family: var(--font-content);
}

/* Text elements */
a,
p,
q,
dt,
dd,
td,
span,
small,
label {
    color: inherit;
}

/* Link styling */
a {
    text-decoration: none;
    padding-block-end: 3px;
    border-block-end: 1px solid var(--rgb-fg-primary);
    color: var(--rgb-fg-primary);
    transition: color 0.2s, border-color 0.2s;
}

a:hover {
    color: var(--rgb-fg-primary-light);
    border-color: var(--rgb-fg-primary-light);
}

/* Paragraph adjustments */
p:has(a) {
    line-height: var(--line-height-base);
}

/* Code blocks */
pre {
    overflow: auto;
    padding: var(--spacing-sm);
    border-radius: 4px;
}

/* Quotes */
q {
    quotes: '"' '"' "'" "'";
}

q:before {
    content: open-quote;
}

q:after {
    content: close-quote;
}

/* Media Queries */
@media (max-width: 768px) {
    :root {
        --spacing-lg: 1.2rem;
        --spacing-xl: 2rem;
        --spacing-xxl: 3rem;
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    :root {
        /* Dark mode is already the default, but can be adjusted if needed */
        --rgb-bg-primary: rgb(1, 7, 20);
    }
}

/* Print styles */
@media print {
    body {
        background-color: white;
        color: black;
    }

    a {
        color: black;
        border-bottom: 1px solid #333;
    }
}

/* ------- EOF BASE CSS ------- */

/* site > header > links --------------------------------------------- */
body>header a {
    border: 0 none;
}

/* site > header > nav --------------------------------------------- */
body>header nav {
    max-width: var(--width-content-lg);
    margin: 0 auto var(--spacing-xs) auto;
}

/* site > header > nav > menu --------------------------------------------- */
body>header>nav:first-child {
    display: flex;
    flex-wrap: wrap;
    justify-content: end;
    gap: var(--spacing-sm) var(--spacing-lg);

    border-bottom: 1px solid var(--rgb-fg-primary);
}

body>header nav:first-child a {
    font-size: 1.2rem;
    letter-spacing: 0.2em;
    color: var(--rgb-fg-primary-light);
}

/* site > header > nav > breadcrumbs --------------------------------------------- */
body>header .breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    padding-left: var(--spacing-md);
}

.breadcrumbs>* {
    font-size: var(--font-size-base);
}

.breadcrumbs>*::before {
    letter-spacing: 4px;
    font-size: var(--font-size-xs);
    margin-right: var(--spacing-xs);
}

.breadcrumbs>*:nth-child(1)::before {
    content: '\2022 ';
}

.breadcrumbs>*:nth-child(2)::before {
    content: '\2022\2022';
}

.breadcrumbs>*:nth-child(3)::before {
    content: '\2022\2022\2022';
}

/* site > sections --------------------------------------------- */
body>main>.section,
body>main>section,
body>main>dl {
    width: 100%;
    max-width: var(--width-content-lg);
    padding: 0 var(--spacing-sm);
}

/* site > content --------------------------------------------- */

body>main {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xxl);
}


body>main h1,
body>main h2,
body>main h3,
body>main h4 {
    color: var(--rgb-fg-primary);
    font-size: 1.3em;
}

body>main nav {
    /* width: 100%; */
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.contained>nav>a {
    display: block;
    width: 50%;
    border-bottom-left-radius: 35%;
}

main>nav>a.top {
    align-self: end;
    text-align: left;
}

main>nav>a.top::before {
    content: '\2191';
    margin: var(--spacing-xs) var(--spacing-xs) 0 0;
    font-size: 1.7em;
    font-weight: bold;
    text-decoration: none;
}

section>nav>a,
main>nav>a {
    display: block;
    width: 50%;
}

/* site > content > ? --------------------------------------------- */
.void {
    background-color: var(--rgb-bg-primary);
    color: var(--rgb-fg-primary);
    background-repeat: repeat;
}


body section>h2,
body section>h3,
body section>h4 {
    font-family: var(--font-content);
    font-size: var(--font-size-xl);
    line-height: 2.9rem;
}

/* pages > content > welcome hero --------------------------------------------- */
.welcome {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 3rem;
    padding: 0 var(--spacing-sm);
    width: 100%;
    max-width: var(--width-content-lg);
    margin: auto;
}

.welcome>nav {
    flex-grow: 1;
}

.welcome>nav>a,
.welcome>nav>h4>a {
    display: block;
    line-height: 2rem;
    margin: var(--spacing-sm) 0;
}

@media screen and (min-width: 320px) {

    .welcome>nav>a,
    .welcome>nav>h4>a {
        padding-right: 7rem;
    }
}

/* pages > content > paragraphs --------------------------------------------- */
span.inter,
span.odd,
span.even {
    display: block;
}

.inter,
.inter p {
    text-align: center;
}

.odd,
.odd p {
    text-align: left;
}

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


/* pages > content > paragraphs > quotes ------------------------------------ */



@media screen and (max-width: 478px) {
    pre {
        width: 17rem;
    }
}

@media screen and (min-width: 479px) and (max-width: 769px) {
    pre {
        width: 23rem;
    }
}


/* pages: content: tables: lexikons  ---------------------------------------- */

*[data-for-lexikon] {
    /* display: flex;
    justify-content: end; */
}

table.lexikon {
    border: 0 none;
    border-spacing: 1.3rem;
}

table.lexikon caption {}

table.lexikon th {
    text-transform: uppercase;
    text-align: center;
    font-size: 1.2rem;
}

table.lexikon td {
    text-align: left;
}

table.lexikon a {
    font-size: 1.1em;
}

/* 
table.lexikon .compact th {
    border-width: 0px 0px 0px 0px;
    vertical-align: top;
    text-align: center;
}

table.lexikon .compact td {
    border-width: 0px 0px 0px 1px;
    padding-left: 1em;
    margin-left: 1em;
} */


/* pages > content > quotes  ------------------------------------------------ */
blockquote.intro {
    background-color: var(--rgb-fg-primary-light);
    color: var(--rgb-bg-primary);
}

blockquote.intro p {
    color: var(--rgb-bg-primary);
}


blockquote .author {
    font-weight: bold;
    margin-top: 2em;
}


q .quote_reference,
blockquote .quote_reference {
    margin-top: 2em;
    font-size: 0.9em;
    font-style: normal;
}

.intro p {
    text-align: center;
}

.intro img {
    margin-top: 1em;
}


/* footer */
footer a{
    text-decoration: none;
    border:none;
    padding-right:var(--spacing-xs);
}

span.culdelampe {
    display: block;
    text-align: center;
    font-size: 1.1em;
    margin: 1.5em 0em;
}


/* 
#liebrex-intro>section:first-child {
    position: relative;
} */



.moon {
    border: 3px solid var(--rgb-fg-primary);
    background-color: var(--rgb-fg-primary-light);
    color: var(--rgb-bg-primary);
}

.moon p {
    color: inherit;
}

.moon blockquote p {
    line-height: var(--line-height-base);
    text-align: center;
    font-style: italic;
    font-family: scripture;
    font-size: 1.7em;
    font-weight: normal;
}

@media screen and (max-width: 319px) {
    .moon {
        padding: 1rem;
    }
}

@media screen and (min-width: 320px) {

    .moon {
        max-width: 17rem;

        position: relative;
        aspect-ratio: 1/1;
        shape-outside: circle(50%);

        border-radius: 50.3%;

    }

    .moon::before {
        content: "";
        width: 50%;
        height: 100%;
        float: left;
        shape-outside: polygon(0 0,
                98% 0,
                50% 6%,
                23.4% 17.3%,
                6% 32.6%,
                0 50%,
                6% 65.6%,
                23.4% 82.7%,
                50% 94%,
                98% 100%,
                0 100%);
        shape-margin: 7%;
    }

    .moon div.darkside {
        height: 100%;
        padding: 0;
    }

    .moon .darkside::before {
        content: "";
        width: 50%;
        height: 100%;
        float: right;
        shape-outside: polygon(2% 0%,
                100% 0%,
                100% 100%,
                2% 100%,
                50% 94%,
                76.6% 82.7%,
                94% 65.6%,
                100% 50%,
                94% 32.6%,
                76.6% 17.3%,
                50% 6%);
        shape-margin: 7%;
    }

    .moon blockquote footer {
        width: 100%;
        position: absolute;
        bottom: 1rem;
        text-align: center;
        font-style: italic;
    }

    .moon * {
        color: var(--rgb-bg-primary);
    }

    .moon blockquote p {
        transform: rotate(-11deg);
    }

}

@media screen and (min-width: 479px) {
    .moon.floating {
        max-width: 28rem;
        float: left;
        margin: 0rem var(--spacing-md) var(--spacing-md) 0;
    }
}