:root {
    --bg: #ffffff;
    --text: #1d1d1b;
    --muted: #6b6b6b;
    --accent: #3f51b5;
    --max-width: 950px;
}

@font-face {
    font-family: "U8FontLight";
    src: url("/fonts/U8-Light-web.woff") format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "U8FontBold";
    src: url("/fonts/U8-Bold-web.woff") format('woff');
    font-weight: normal;
    font-style: bold;
    font-display: swap;
}

/* Box sizing */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Body */
body {
    background: var(--bg);
    color: var(--text);
    font-family: "U8FontLight";
    /*font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;*/
    line-height: 1.65;
    font-size: 1rem;
}

/* Main container */
.container {
    max-width: var(--max-width);
    margin: 0 auto; /* centers container */
    padding: 4rem 1.5rem 6rem;
    text-align: justify; /* justified body text */
}

/* Headline */
h1 {
    /*font-family: 'Roboto', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;*/
    font-family: "U8FontBold";
    font-size: 1.5rem;
    line-height: 1.3;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.75rem;
    text-align: center; /* center h1 */
}

/* Small divider under headline */
.h1-divider {
    width: 48px;
    height: 2px;
    background-color: var(--text);
    margin: 0.5rem auto 2rem auto; /* center divider */
}

/* Registerded TM symbol positioning - HTML entity ® */
.sub {
    vertical-align: sub;
    font-size: 0.8em;
}


/* Subtitles */
.subtitle {
    font-size: 1.4rem;
    font-weight: 600;
    /*font-style: italic;*/
    color: var(--text);
    max-width: 42rem;
    margin: 0 auto 2rem auto; /* center subtitle */
    text-align: center;
    hyphens: none
}

/* Sections */
h2 {
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 3.5rem 0 1.25rem;
    text-align: center; /* center headings */
}

h3 {
    font-size: 1.0rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 3.5rem 0 1.25rem;
    padding-left: 4.5em;
    text-align: left; /* center headings */
}

p {
    font-size: 1rem;
    margin-bottom: 1.25rem;
    max-width: 75ch;
    text-align: justify; /* justified text */
    margin-left: auto;
    margin-right: auto;
    hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
}

pre {
    padding-left: 4.0em;
}

.GIFooter {
    font-size: 0.9rem;
    /*font-weight: 600;
    font-style: italic;*/
    color: var(--text);
    max-width: 800px;
    margin: 0 auto 2rem auto;
    text-align: center;
}

/* Top Navigation - centered links with inline logo */
.nav-top {
    display: flex;
    justify-content: center; /* center nav links + logo as a group */
    align-items: center;
    gap: 1.5rem;
    padding: 1rem 2rem;
    background: #e8e8e8;
}

.nav-top ul.nav-links {
    display: flex;
    gap: 2rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-top ul.nav-links li a {
    /*
    text-decoration: none;
    color: var(--text);
    font-weight: 500;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    transition: color 0.2s ease-in-out;
    */
    text-decoration: none;
    color: #1d1d1b;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
}

.nav-top ul.nav-links li a:hover {
    /*color: var(--accent);*/
    text-decoration: underline;
}

/* Logo inline on right */
.nav-top .nav-logo {
    margin-left: 2rem;
}

.nav-top .nav-logo img {
    height: 32px;
    width: auto;
}

/* Bottom navigation - centered */
.nav-bottom {
    display: flex;
    justify-content: center;
    padding: 1rem 0;
    background: #e8e8e8;
}

.nav-bottom ul {
    display: flex;
    gap: 2rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-bottom a {
    /*
    text-decoration: none;
    color: var(--text);
    font-weight: 500;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    transition: color 0.2s ease-in-out;
    */
    text-decoration: none;
    color: #1d1d1b;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
}

.nav-bottom a:hover {
    /*color: var(--accent);*/
    text-decoration: underline;
}
/* -------------------------------
 *  STANDARD LINK
 * - *--------------------------------*/
.x-link {
    color: #1d1d1b;
    text-decoration: none;
    font-weight: bold;
    /* padding: 8px 16px; */
    border-radius: 4px;
    /*background-color: #f0f8ff;*/
    hyphens: none
}

.x-link:hover {
    /* background-color: #0056b3; */
    text-decoration: underline;
}

/* -------------------------------
 *  CENTER LINK
 * - *--------------------------------*/
.c-link {
    color: #1d1d1b;
    font-family: "U8FontLight";
    font-size: 0.95rem;
    text-decoration: none;
    padding: 8px 16px;
    border-radius: 4px;
    /*background-color: #f0f8ff;*/
    hyphens: none
}

.c-link:hover {
    /* background-color: #0056b3; */
    text-decoration: underline;
}


/* -------------------------------
 *  MAILTO: LINK
 * - *--------------------------------*/
a[href^="mailto:"] {
    color: var(--text);
    text-decoration: none;
    font-weight: bold;
    padding: 5px 10px;
    background-color: #e8e8e8;
    border-radius: 4px;
}

/* -------------------------------
 *  SALES MAILTO: LINK
 * - *--------------------------------*/
.sales-email {
    color: var(--text);
    text-decoration: none;
    font-weight: bold;
    padding: 5px 10px;
    background-color: #dc3545;;
    border-radius: 4px; */
}

/* -------------------------------
 *  INDEX SECTION (Academic Index)
 * - *--------------------------------*/
.index-section {
    max-width: 720px;
    margin: 4rem auto;
    padding: 0 1rem;
    text-align: left;
}

/*
 * .index-section h2 {
 *    color: #1d1d1b;
 *    font-size: 1.1rem;
 *    font-weight: 500;
 *    letter-spacing: 0.04em;
 *    text-transform: uppercase;
 *    margin-bottom: 1.75rem;
 * }
 */
.index-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr; /* fixed two columns */
    column-gap: 3rem;
    row-gap: 0.35rem;
    align-items: start; /* top-align items */
}

.index-list li {
    line-height: 1.5;
}

.index-list a {
    font-size: 0.95rem;
}

@media (max-width: 768px) {
    .index-list {
        grid-template-columns: 1fr; /* collapse to single column on mobile */
    }
}
/* Base list */
.index-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Two-column desktop layout */
.index-list.two-column {
    column-count: 2;
    column-gap: 3rem;
    column-fill: auto;
}

/* List items */
.index-list li {
    break-inside: avoid;
    margin: 0.35rem 0;
    line-height: 1.5;
}

.index-list a {
    text-decoration: none;
    color: #1d1d1b;
    font-size: 0.95rem;
}

.index-list a:hover {
    text-decoration: underline;
}

/* Collapse to single column on smaller screens */
@media (max-width: 768px) {
    .index-list.two-column {
        column-count: 1;
    }
}

/* -------------------------------
 *  LISTS in general (policy-body)
 * Add in : <section itemprop="articleBody" class="policy-body">
 * ---------------------------------*/

/* Narrow, academic list styling */
.policy-body ul {
    max-width: 720px;           /* narrower than main text */
    margin: 1.25rem auto;       /* center within article */
    padding-left: 1.2rem;       /* controlled indentation */
    list-style-position: outside;
}

.policy-body ol {
    max-width: 720px;           /* narrower than main text */
    margin: 1.25rem auto;       /* center within article */
    padding-left: 1.2rem;       /* controlled indentation */
    list-style-position: outside;
}

/* List items: compact + readable */
.policy-body li {
    margin: 0.35rem 0;
    line-height: 1.55;
    color: #1d1d1b;
    font-size: 0.95rem;
}

/* Tighten lists that follow headings */
.policy-body h2 + ul {
    margin-top: 0.75rem;
}

/* Slightly reduce bullet visual weight */
.policy-body ul li::marker {
    color: #6b6b6b;
}
/* ------------------------------- */
/* ALIGNMENT */
/* ------------------------------- */
.auto-align {
    text-align: auto;
}
.center-align {
    text-align: center;
}
.justify-align {
    text-align: justify;
}
.none-align {
    text-align: none;
}
.left-align {
    text-align: left;
}
.right-align {
    text-align: right;
}
/* NO HYPHENS */
.no-hyphen {
    hyphens: none
}
/* =============================== */
/* Responsive */
@media (max-width: 768px) {
    .nav-top, .nav-bottom ul {
        flex-direction: column;
        gap: 1rem;
        align-items: center;
    }

    .nav-top .nav-logo {
        margin-left: 0;
    }
}