:root {
    /* Global color variables for the theme */
    --bs-primary: #8b0000; /* Primary color used for buttons, highlights, etc. */
    --bs-primary-rgb: 139, 0, 0; /* RGB value for primary color */
    --bs-primary-text: #ffffff; /* Text color when on primary background */

    --bs-secondary: #4e5d6c; /* Secondary color used for less prominent elements */
    --bs-secondary-rgb: 78, 93, 108; /* RGB value for secondary color */
    --bs-secondary-text: #ffffff; /* Text color when on secondary background */

    --bs-link-color: #d14b4b; /* Link color */
    --bs-link-color-rgb: 209, 75, 75; /* Link color */
    --bs-link-hover-color: #ff6b6b; /* Link color on hover */
    --bs-link-hover-color-rgb: 255, 107, 107;

    --bs-body-bg: #000000; /* Background color for the body */
    --bs-body-color: rgba(255, 255, 255, .92); /* Text color for the body */
    /* Above Bootstrap's 1.5: the body face has a large x-height and needs the extra
       leading to avoid lines touching. Inherited site-wide. */
    --bs-body-line-height: 1.8;

    --bs-primary-hover-bg: #a52a2a; /* Background color for primary elements on hover */
    --bs-secondary-hover-bg: #5a6d7a; /* Background color for secondary elements on hover */

    --bs-border-color: rgba(255, 255, 255, .12); /* Default border color */
    --bs-border-radius: 0.25rem; /* Global border radius for rounded elements */

    --bs-secondary-color: rgba(255, 255, 255, .62);
    --bs-tertiary-color: rgba(255, 255, 255, .45);
    --bs-emphasis-color: rgba(255, 255, 255, .96);

    --bs-success: #2fbf71;
    --bs-success-rgb: 47, 191, 113;

    --bs-info: #4da3ff;
    --bs-info-rgb: 77, 163, 255;

    --bs-warning: #f6c343;
    --bs-warning-rgb: 246, 195, 67;

    --bs-danger: #ff4d4d;
    --bs-danger-rgb: 255, 77, 77;

    --bs-light: #1a1a1a;
    --bs-light-rgb: 26, 26, 26;

    --bs-dark: #0b0b0b;
    --bs-dark-rgb: 11, 11, 11;

    /* Site tokens. Everything in the component layer at the end of this file reads from
       here, so retheming means editing these values and nothing else. */

    /* Typefaces. Three roles, three tokens — no rule below names a family directly.
       Body text uses a face designed for reading on screen; the display face carries the
       character of the site on headings and typographic accents. */
    --vt-font-body: "Merriweather", serif;
    --vt-font-display: "Almendra", serif;
    --vt-font-brand: "Cinzel Decorative", serif;

    --vt-accent: #b3242a; /* Primary, lightened enough to stay legible as text on black */
    --vt-accent-rgb: 179, 36, 42;
    --vt-gold: #d9b45f; /* Accent for honours and rewards; no Bootstrap equivalent */
    --vt-gold-rgb: 217, 180, 95;
    --vt-surface-bg: rgb(16, 16, 16); /* Background of <main>, needed to mask ornaments */
    --vt-hairline: rgba(255, 255, 255, .12);
    --vt-border: rgba(255, 255, 255, .09);
    --vt-elevation: 0 12px 34px rgba(0, 0, 0, .5);
    --vt-measure: 90ch; /* Reading measure: uncapped prose runs past 110 characters per line */

    /* Paper: the site's light surface, for blocks meant to read as a physical document */
    --vt-paper-from: #f5f0e4;
    --vt-paper-to: #e5dcc8;
    --vt-paper-ink: #241c14;
    --vt-paper-ink-strong: #120c06;

    --vt-accent-ink: #f0c9c9; /* Accent lightened to ink weight, for text on a dark accent fill */
}


body {
    background-color: black;
    font-family: var(--vt-font-body);
    font-weight: 400;

    > header {
        h1 {
            font-size: 20px;
            font-family: var(--vt-font-brand);
            font-weight: 700;
            font-style: normal;

            small {
                font-size: 10px;
                display: block;
            }
        }

        .navbar {
            .navbar-brand {
                img {
                    height: 55px;
                    margin-right: 15px;
                }
            }

            li {
                a {
                    font-weight: 400;
                }
            }
        }
    }

    > main {
        background-color: var(--vt-surface-bg);
        color: white;
        margin-top: 80px;

        h1, h2, h3, h4, h5, h6 {
            font-family: var(--vt-font-display);
            font-weight: 400;
        }

        /* Section rhythm, taken from the long-document pages and made the default so every
           page gets it without classes: an `h2` opens a section and is closed by a hairline,
           an `h3` opens an accented subsection. Headings inside a component are left alone,
           and so is the `h2` of a `.section-head`, which draws the rule itself. */
        h2:not(:is(.card, .alert, .paper, .section-head, .literal) *) {
            margin-top: 3.25rem;
            margin-bottom: 1.5rem;
            padding-bottom: .75rem;
            border-bottom: 1px solid var(--vt-hairline);
        }

        h3:not(:is(.card, .alert, .paper, .section-head, .literal) *) {
            margin-top: 2.5rem;
            margin-bottom: 1.25rem;
            padding-left: .9rem;
            border-left: 3px solid var(--vt-accent);
        }

        > .container > :is(h2, h3):first-child {
            margin-top: 0;
        }

        /* Running-text rhythm, applied by default: a content body needs no wrapper class
           to read correctly. Unclassed lists get it too; Bootstrap list components
           (`.nav`, `.list-group`, …) are excluded by the `:not([class])` guard, and
           components that pack content tightly reset the trailing margin themselves. */
        p {
            margin-bottom: 1.5rem;
        }

        ol:not([class]) > li:not(:last-child),
        ul:not([class]) > li:not(:last-child) {
            margin-bottom: .75rem;
        }

        /* Justify running text only, and only from `md` up: a phone column is about 45
           characters wide, where justification opens gaps that hyphenation cannot close.
           Paragraphs inside a component are left out of the rule entirely rather than
           reset afterwards, so alignment utilities like `text-center` keep working on
           them — same reason at panel width, plus an author who centres a block means it. */
        @media (min-width: 768px) {
            p:not(:is(.card, .alert, .table, .paper, .literal, .text-center, .text-end, .text-start) *) {
                text-align: justify;
                hyphens: auto;
            }
        }

        a {
            color: var(--bs-link-color);
            text-decoration: underline;
            text-decoration-thickness: .08em;
            text-underline-offset: .18em;
            text-decoration-color: rgba(209, 75, 75, .55);
        }

        a:hover {
            color: var(--bs-link-hover-color);
            text-decoration-color: rgba(255, 107, 107, .85);
        }

        small {
            font-size: 70%;
        }

        input::placeholder, .form-control::placeholder {
            color: var(--bs-secondary);
        }

        .form-text {
            color: var(--bs-secondary-text) !important;
        }
    }

    > footer {
        padding-top: 60px;
        color: #bdc2c6;

        a {
            color: white;
        }
    }

    .table {
        /* Table-specific variables for customizing the appearance */
        --bs-table-color: #ffffff; /* Text color inside the table */
        --bs-table-bg: #25252b; /* Background color for the table */
        --bs-table-border-color: #3e3e47; /* Border color for table elements */

        --bs-table-striped-color: #ffffff; /* Text color for striped rows */
        --bs-table-striped-bg: rgba(255, 255, 255, 0.05); /* Background color for striped rows */

        --bs-table-active-color: #ffffff; /* Text color for active rows */
        --bs-table-active-bg: rgba(255, 255, 255, 0.1); /* Background color for active rows */

        --bs-table-hover-color: #ffffff; /* Text color for rows on hover */
        --bs-table-hover-bg: rgba(255, 255, 255, 0.075); /* Background color for rows on hover */

        > caption {
            color: var(--bs-table-color);
            font-size: small;
        }

        a {
            text-decoration: none;
        }

        .table-primary {
            --bs-table-color: var(--bs-primary-text); /* Text color for the primary table */
            --bs-table-bg: var(--bs-primary); /* Background color for the primary table */
            --bs-table-border-color: #a6b5cc; /* Border color slightly lighter than the primary bg */
            --bs-table-striped-bg: rgba(var(--bs-primary-rgb), 0.1); /* Striped rows background with transparency */
            --bs-table-striped-color: var(--bs-primary-text); /* Text color for striped rows */
            --bs-table-active-bg: rgba(var(--bs-primary-rgb), 0.15); /* Active row background with more transparency */
            --bs-table-active-color: var(--bs-primary-text); /* Text color for active rows */
            --bs-table-hover-bg: rgba(var(--bs-primary-rgb), 0.2); /* Hovered row background with even more transparency */
            --bs-table-hover-color: var(--bs-primary-text); /* Text color for hovered rows */

            color: var(--bs-table-color);
            border-color: var(--bs-table-border-color);
        }

        .table-secondary {
            --bs-table-color: var(--bs-secondary-text); /* Text color for the secondary table */
            --bs-table-bg: var(--bs-secondary); /* Background color for the secondary table */
            --bs-table-border-color: #6c7a88; /* Border color slightly lighter than the secondary bg */
            --bs-table-striped-bg: rgba(var(--bs-secondary-rgb), 0.1); /* Striped rows background with transparency */
            --bs-table-striped-color: var(--bs-secondary-text); /* Text color for striped rows */
            --bs-table-active-bg: rgba(var(--bs-secondary-rgb), 0.15); /* Active row background with more transparency */
            --bs-table-active-color: var(--bs-secondary-text); /* Text color for active rows */
            --bs-table-hover-bg: rgba(var(--bs-secondary-rgb), 0.2); /* Hovered row background with even more transparency */
            --bs-table-hover-color: var(--bs-secondary-text); /* Text color for hovered rows */

            color: var(--bs-table-color);
            border-color: var(--bs-table-border-color);
        }
    }

    .btn-primary {
        --bs-btn-color: var(--bs-primary-text); /* Text color for the primary button */
        --bs-btn-bg: var(--bs-primary); /* Background color for the primary button */
        --bs-btn-border-color: var(--bs-primary); /* Border color matching the background */
        --bs-btn-hover-bg: var(--bs-primary-hover-bg); /* Background color on hover */
        --bs-btn-hover-color: var(--bs-primary-text); /* Text color on hover */
        --bs-btn-active-bg: var(--bs-primary-hover-bg); /* Background color when active */
        --bs-btn-active-color: var(--bs-primary-text); /* Text color when active */
        --bs-btn-focus-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.5); /* Focus shadow for accessibility */

        color: var(--bs-btn-color);
        background-color: var(--bs-btn-bg);
        border-color: var(--bs-btn-border-color);
        box-shadow: none;
        &:focus-visible{
            box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .5);
        }
    }

    .btn-secondary {
        --bs-btn-color: var(--bs-secondary-text); /* Text color for the secondary button */
        --bs-btn-bg: var(--bs-secondary); /* Background color for the secondary button */
        --bs-btn-border-color: var(--bs-secondary); /* Border color matching the background */
        --bs-btn-hover-bg: var(--bs-secondary-hover-bg); /* Background color on hover */
        --bs-btn-hover-color: var(--bs-secondary-text); /* Text color on hover */
        --bs-btn-active-bg: var(--bs-secondary-hover-bg); /* Background color when active */
        --bs-btn-active-color: var(--bs-secondary-text); /* Text color when active */
        --bs-btn-focus-shadow: 0 0 0 0.2rem rgba(var(--bs-secondary-rgb), 0.5); /* Focus shadow for accessibility */

        color: var(--bs-btn-color);
        background-color: var(--bs-btn-bg);
        border-color: var(--bs-btn-border-color);

        &:focus-visible{
            box-shadow: 0 0 0 .2rem rgba(var(--bs-secondary-rgb), .5);
        }
    }

    /* Bootstrap ships `.btn-outline-*` with literal colours baked in at build time, so the
       `--bs-primary` / `--bs-secondary` overrides at the top of this file never reach them —
       an outline primary button renders Bootstrap blue on a dark red site. Restate the
       variables the compiled rules read. The resting colour is the lightened accent, since
       `--bs-primary` on black is too dark to read as text. */
    .btn-outline-primary {
        --bs-btn-color: var(--vt-accent);
        --bs-btn-border-color: var(--vt-accent);
        --bs-btn-bg: transparent;
        --bs-btn-hover-color: var(--bs-primary-text);
        --bs-btn-hover-bg: var(--bs-primary);
        --bs-btn-hover-border-color: var(--bs-primary);
        --bs-btn-active-color: var(--bs-primary-text);
        --bs-btn-active-bg: var(--bs-primary-hover-bg);
        --bs-btn-active-border-color: var(--bs-primary-hover-bg);
        --bs-btn-disabled-color: var(--vt-accent);
        --bs-btn-disabled-border-color: var(--vt-accent);
        --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
    }

    .btn-outline-secondary {
        --bs-btn-color: var(--bs-secondary-color);
        --bs-btn-border-color: var(--bs-secondary);
        --bs-btn-bg: transparent;
        --bs-btn-hover-color: var(--bs-secondary-text);
        --bs-btn-hover-bg: var(--bs-secondary);
        --bs-btn-hover-border-color: var(--bs-secondary);
        --bs-btn-active-color: var(--bs-secondary-text);
        --bs-btn-active-bg: var(--bs-secondary-hover-bg);
        --bs-btn-active-border-color: var(--bs-secondary-hover-bg);
        --bs-btn-disabled-color: var(--bs-secondary-color);
        --bs-btn-disabled-border-color: var(--bs-secondary);
        --bs-btn-focus-shadow-rgb: var(--bs-secondary-rgb);
    }

    /* Same story as the outline buttons: Bootstrap bakes literal blues into the focus ring
       and the check/radio accents, so an input on this site focuses Bootstrap blue. */
    .form-control,
    .form-select {
        background-color: rgba(255, 255, 255, .04);
        border-color: var(--vt-border);
        color: var(--bs-body-color);
    }

    .form-control:focus,
    .form-select:focus {
        background-color: rgba(255, 255, 255, .06);
        border-color: var(--vt-accent);
        box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .35);
        color: var(--bs-body-color);
    }

    .form-check-input {
        background-color: rgba(255, 255, 255, .06);
        border-color: var(--vt-border);
    }

    .form-check-input:checked {
        background-color: var(--bs-primary);
        border-color: var(--bs-primary);
    }

    .form-check-input:focus {
        border-color: var(--vt-accent);
        box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .35);
    }

    /* Solid button variants carry Bootstrap's palette, not the one declared in `:root`. */
    .btn-danger {
        --bs-btn-bg: var(--bs-danger);
        --bs-btn-border-color: var(--bs-danger);
        --bs-btn-color: #1a0505;
        --bs-btn-hover-bg: #ff6b6b;
        --bs-btn-hover-border-color: #ff6b6b;
        --bs-btn-hover-color: #1a0505;
        --bs-btn-active-bg: #ff6b6b;
        --bs-btn-active-border-color: #ff6b6b;
        --bs-btn-focus-shadow-rgb: var(--bs-danger-rgb);
    }

    .btn-success {
        --bs-btn-bg: var(--bs-success);
        --bs-btn-border-color: var(--bs-success);
        --bs-btn-color: #05170d;
        --bs-btn-hover-bg: #4fd08b;
        --bs-btn-hover-border-color: #4fd08b;
        --bs-btn-hover-color: #05170d;
        --bs-btn-active-bg: #4fd08b;
        --bs-btn-active-border-color: #4fd08b;
        --bs-btn-focus-shadow-rgb: var(--bs-success-rgb);
    }

    .btn-info {
        --bs-btn-bg: var(--bs-info);
        --bs-btn-border-color: var(--bs-info);
        --bs-btn-color: #04182b;
        --bs-btn-hover-bg: #74b8ff;
        --bs-btn-hover-border-color: #74b8ff;
        --bs-btn-hover-color: #04182b;
        --bs-btn-active-bg: #74b8ff;
        --bs-btn-active-border-color: #74b8ff;
        --bs-btn-focus-shadow-rgb: var(--bs-info-rgb);
    }

    /* Alerts and contextual table rows ship as pastel blocks meant for a white page; on
       black they read as holes punched in the layout. Restate them as a tinted wash of the
       same hue, driven by one custom property so every variant shares a recipe. */
    .alert {
        --alert-rgb: var(--bs-info-rgb);
        --bs-alert-color: var(--bs-body-color);
        --bs-alert-bg: rgba(var(--alert-rgb), .12);
        --bs-alert-border-color: rgba(var(--alert-rgb), .35);
        --bs-alert-link-color: var(--bs-link-color);
    }

    .alert-primary {
        --alert-rgb: var(--vt-accent-rgb);
    }

    .alert-secondary {
        --alert-rgb: var(--bs-secondary-rgb);
    }

    .alert-success {
        --alert-rgb: var(--bs-success-rgb);
    }

    .alert-danger {
        --alert-rgb: var(--bs-danger-rgb);
    }

    .alert-warning {
        --alert-rgb: var(--bs-warning-rgb);
    }

    .alert-info {
        --alert-rgb: var(--bs-info-rgb);
    }

    .alert-light,
    .alert-dark {
        --alert-rgb: 255, 255, 255;
    }

    /* Site addition: honours and rewards have no Bootstrap equivalent. */
    .alert-gold {
        --alert-rgb: var(--vt-gold-rgb);
    }

    .table {
        .table-success,
        .table-danger,
        .table-warning,
        .table-info {
            --bs-table-color: var(--bs-body-color);
            --bs-table-bg: rgba(var(--row-rgb), .14);
            --bs-table-border-color: rgba(var(--row-rgb), .3);
            --bs-table-striped-bg: rgba(var(--row-rgb), .2);
            --bs-table-striped-color: var(--bs-body-color);
            --bs-table-active-bg: rgba(var(--row-rgb), .26);
            --bs-table-active-color: var(--bs-body-color);
            --bs-table-hover-bg: rgba(var(--row-rgb), .22);
            --bs-table-hover-color: var(--bs-body-color);

            color: var(--bs-table-color);
            border-color: var(--bs-table-border-color);
        }

        .table-success {
            --row-rgb: var(--bs-success-rgb);
        }

        .table-danger {
            --row-rgb: var(--bs-danger-rgb);
        }

        .table-warning {
            --row-rgb: var(--bs-warning-rgb);
        }

        .table-info {
            --row-rgb: var(--bs-info-rgb);
        }
    }

    /* A `.btn-group` never wraps by design, so a toolbar of section links overflows the
       viewport on a phone. Let it wrap and keep the group's rounded ends per line. */
    .btn-group {
        flex-wrap: wrap;
    }

    /* Tab bars: Bootstrap's active tab is a light pill, which punches a hole in a dark
       page. Underline the active tab instead. */
    .nav-tabs {
        --bs-nav-tabs-border-color: var(--vt-hairline);
        --bs-nav-tabs-link-hover-border-color: transparent transparent var(--vt-accent);
        --bs-nav-tabs-link-active-color: var(--bs-emphasis-color);
        --bs-nav-tabs-link-active-bg: transparent;
        --bs-nav-tabs-link-active-border-color: transparent transparent var(--vt-accent);
        --bs-nav-link-color: var(--bs-link-color);
        --bs-nav-link-hover-color: var(--bs-link-hover-color);

        .nav-link {
            border-bottom-width: 2px;
        }

        .nav-link.active {
            font-weight: 700;
        }
    }

    .card {
        /* A bare Bootstrap card is `--bs-body-bg` (black) on a near-black page, so it reads
           as a hole rather than a raised surface. Lift it a step and soften the corners. */
        --bs-card-bg: rgba(255, 255, 255, .035);
        --bs-card-border-color: var(--vt-border);
        --bs-card-border-radius: 14px;
        --bs-card-inner-border-radius: 12px;

        .card-img-wrapper {
            height: 200px;
            background-color: #dddddd;
            padding: 10px;
            text-align: center;
            overflow: hidden;

            img {
                width: 100%;
                height: 180px;
                object-fit: cover;
                object-position: center center;
                border-radius: 8px;
                display: block;
            }
        }
    }
}

@media (min-width: 576px) {
    body {
        > header {
            h1 {
                font-size: 30px;

                small {
                    font-size: 15px;
                }
            }
        }
    }
}

/* Gallery cover cards (index) */
.gallery-grid__link {
    display: block;
    overflow: hidden;
    border-radius: 8px;
}

.gallery-grid__thumb {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    transition: transform 0.2s ease;
}

.gallery-grid__link:hover .gallery-grid__thumb {
    transform: scale(1.05);
}

/* Masonry grid (gallery view). CSS columns flow the varied aspect ratios
   without cropping; the lightbox itself is handled by GLightbox. */
.gallery-masonry {
    column-count: 4;
    column-gap: 0.75rem;
}

.gallery-masonry__item {
    display: block;
    margin: 0 0 0.75rem;
    break-inside: avoid;
    overflow: hidden;
    border-radius: 8px;
    line-height: 0;
    background: linear-gradient(
        110deg,
        rgba(255, 255, 255, 0.05) 30%,
        rgba(255, 255, 255, 0.14) 50%,
        rgba(255, 255, 255, 0.05) 70%
    );
    background-size: 200% 100%;
    animation: gallery-shimmer 1.6s linear infinite;
}

/* Stop the placeholder shimmer once the photo is visible. */
.gallery-masonry__item:has(.gallery-masonry__img--loaded) {
    background: none;
    animation: none;
}

.gallery-masonry__img {
    width: 100%;
    height: auto;
    opacity: 0;
    transform: scale(1.04);
    filter: blur(12px);
    transition: opacity 0.5s ease, filter 0.5s ease, transform 0.4s ease;
}

.gallery-masonry__img--loaded {
    opacity: 1;
    transform: none;
    filter: none;
    transition: opacity 0.5s ease, filter 0.5s ease, transform 0.25s ease;
}

.gallery-masonry__item:hover .gallery-masonry__img--loaded {
    transform: scale(1.03);
    filter: brightness(1.05);
}

@keyframes gallery-shimmer {
    from {
        background-position: 200% 0;
    }
    to {
        background-position: -200% 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .gallery-masonry__item {
        animation: none;
    }

    .gallery-masonry__img {
        transform: none;
        filter: none;
        transition: opacity 0.3s ease;
    }
}

@media (max-width: 992px) {
    .gallery-masonry {
        column-count: 3;
    }
}

@media (max-width: 768px) {
    .gallery-masonry {
        column-count: 2;
    }
}

@media (max-width: 480px) {
    .gallery-masonry {
        column-count: 1;
    }
}

/* ===========================================================================
   Reusable component layer
   ---------------------------------------------------------------------------
   Generic building blocks for editorial content: long documents, landing
   pages, announcements. Nothing here is tied to a particular page — compose
   these with Bootstrap utilities from any content body or template.

   Two rules keep this layer consistent:
   - Colours, spacing and elevation come from the tokens in `:root`. Never
     hardcode a colour here.
   - Typefaces are referenced only through the `--vt-font-*` tokens, never by
     name, so swapping a face stays an edit to `:root`.

   Catalogue and usage: see doc/frontend/components.md
   =========================================================================== */

/* --- Layout ------------------------------------------------------------- */

/* Caps a whole block to the reading measure, so headings, text, panels and
   tables all share one width instead of leaving a ragged empty column beside
   the prose. Put this on the outermost wrapper. Left aligned by default, which
   keeps the block flush with the page title and the rest of the layout; add
   `.measure-center` when the block stands on its own. */
.measure {
    max-width: var(--vt-measure);
}

.measure-center {
    margin-inline: auto;
}

/* Multi-column list, for long enumerations that would otherwise run down the
   page. Collapses to one column on narrow viewports. */
.cols-2 > li {
    margin-bottom: .75rem;
    break-inside: avoid;
}

@media (min-width: 992px) {
    .cols-2 {
        column-count: 2;
        column-gap: 3rem;
    }
}

/* --- Typographic accents ------------------------------------------------ */

/* Decorative initial. Put on the opening paragraph of a section. */
.dropcap::first-letter {
    float: left;
    font-family: var(--vt-font-display);
    padding: .06em .5rem 0 0;
    color: var(--vt-accent);
    font-size: 3.6rem;
    line-height: .82;
}

/* Small uppercase label above a heading or at the top of a panel. */
.eyebrow {
    display: block;
    font-family: var(--vt-font-display);
    margin-bottom: .5rem;
    color: rgba(255, 255, 255, .68);
    font-size: .78rem;
    letter-spacing: .18em;
    text-transform: uppercase;
}

/* Heading paired with an oversized marker: a number, a numeral or an icon. */
.section-head {
    display: flex;
    align-items: baseline;
    gap: 1.25rem;
    margin-bottom: 1.75rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--vt-hairline);
}

.section-head > :last-child {
    margin: 0;
    line-height: 1.25;
}

.section-marker {
    flex: 0 0 auto;
    font-family: var(--vt-font-display);
    color: var(--vt-accent);
    font-size: 3.4rem;
    line-height: .72;
    text-shadow: 0 0 30px rgba(var(--vt-accent-rgb), .55);
}

.section-marker-sm {
    font-size: 1.9rem;
    line-height: .8;
    text-shadow: none;
}

.section-marker-icon {
    font-size: 2.1rem;
    line-height: 1;
}

/* Ornamental separator between major blocks. */
.ornament {
    position: relative;
    height: 1px;
    margin: 3.75rem 0;
    background: linear-gradient(90deg, transparent, rgba(var(--vt-accent-rgb), .55) 22%,
    rgba(var(--vt-accent-rgb), .55) 78%, transparent);
}

.ornament::after {
    content: "◆";
    position: absolute;
    top: 50%;
    left: 50%;
    padding: 0 1.1rem;
    transform: translate(-50%, -50%);
    background: var(--vt-surface-bg);
    color: var(--vt-accent);
    font-size: 1.1rem;
    line-height: 1;
}

/* --- Surfaces ----------------------------------------------------------- */

/* Accent card: Bootstrap's `.card` plus a coloured top edge, a matching tint and a
   hover lift. The colour is a single custom property, so one rule covers every variant.
   Pair with `.h-100` inside a row and put the content in a `.card-body`, as usual. */
.card-accent {
    --card-accent-rgb: var(--vt-accent-rgb);

    border-top: 2px solid rgba(var(--card-accent-rgb), .85);
    box-shadow: var(--vt-elevation);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.card-accent:hover {
    border-color: rgba(var(--card-accent-rgb), .45);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .6);
    transform: translateY(-3px);
}

/* Tinted variants share one background recipe. */
.card-accent-success,
.card-accent-info,
.card-accent-warning,
.card-accent-gold {
    border-color: rgba(var(--card-accent-rgb), .28);
    background: radial-gradient(circle at 50% 0%, rgba(var(--card-accent-rgb), .14),
    rgba(255, 255, 255, .012) 70%);
}

.card-accent-success {
    --card-accent-rgb: var(--bs-success-rgb);
}

.card-accent-info {
    --card-accent-rgb: var(--bs-info-rgb);
}

.card-accent-warning {
    --card-accent-rgb: var(--bs-warning-rgb);
}

.card-accent-gold {
    --card-accent-rgb: var(--vt-gold-rgb);
}

/* Icon leading a card, tinted with the card's own accent. */
.card-icon {
    display: block;
    margin-bottom: .9rem;
    color: rgba(var(--card-accent-rgb, var(--vt-accent-rgb)), 1);
    font-size: 1.9rem;
}

.card-accent-gold > .card-body > .card-icon,
.card-accent-success > .card-body > .card-icon,
.card-accent-info > .card-body > .card-icon {
    font-size: 2.2rem;
    text-shadow: 0 0 24px rgba(var(--card-accent-rgb), .5);
}

/* Light surface on the dark page: reads as paper. For forms, excerpts,
   anything meant to look like a physical document. */
.paper {
    padding: 2.25rem;
    border-radius: 14px;
    background: linear-gradient(160deg, var(--vt-paper-from), var(--vt-paper-to));
    box-shadow: 0 18px 50px rgba(0, 0, 0, .7);
    color: var(--vt-paper-ink);
}

.paper strong {
    color: var(--vt-paper-ink-strong);
}

/* --- Callouts ----------------------------------------------------------- */

/* Bootstrap's `.alert` is themed for the dark page in the theme section above, so it is
   the callout: use `.alert.alert-warning` and friends. This modifier restyles it as a
   flush aside — colour bar on the left, no box — and lays out an optional leading icon.
   The icon is tinted from the alert's own hue, so `<i>` needs no colour class. */
.alert-flush {
    display: flex;
    gap: 1rem;
    border-width: 0 0 0 3px;
    border-left-color: rgb(var(--alert-rgb));
    border-radius: 0 12px 12px 0;
    background: linear-gradient(90deg, rgba(var(--alert-rgb), .13), rgba(var(--alert-rgb), .03));
}

.alert-flush > i {
    flex: 0 0 auto;
    margin-top: .35rem;
    color: rgb(var(--alert-rgb));
    font-size: 1.15rem;
}

.alert-flush > :last-child {
    margin-bottom: 0;
}

/* --- Emphasis ----------------------------------------------------------- */

/* Verbatim block: shows a format, a command or a naming convention. Pair with
   `<code>` so the monospace comes from the browser, not from a declaration. */
.literal {
    padding: 2.25rem 1.5rem;
    border: 1px solid rgba(var(--vt-accent-rgb), .35);
    border-radius: 14px;
    background: radial-gradient(circle at 50% 0%, rgba(var(--bs-primary-rgb), .22),
    rgba(0, 0, 0, .5) 70%);
    box-shadow: inset 0 0 60px rgba(0, 0, 0, .6);
    text-align: center;
}

.literal code {
    color: var(--vt-accent-ink);
    font-size: 1.15rem;
    text-shadow: 0 0 18px rgba(var(--vt-accent-rgb), .7);
}

.literal .eyebrow {
    margin: 2rem 0 .75rem;
}

.literal-secondary code {
    color: rgba(255, 255, 255, .8);
    font-size: 1rem;
    text-shadow: none;
}

/* Emphatic pill for a single key value: a deadline, a price, a result. */
.seal {
    display: inline-block;
    font-family: var(--vt-font-display);
    padding: .55rem 1.4rem;
    border-radius: 999px;
    background: var(--bs-primary);
    box-shadow: 0 6px 18px rgba(var(--bs-primary-rgb), .45);
    color: var(--bs-primary-text);
    font-size: .95rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}

/* --- Navigation --------------------------------------------------------- */

/* Inline list of anchors, separated by an ornament. */
.inline-nav {
    display: flex;
    font-family: var(--vt-font-display);
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .5rem 1rem;
    padding: .9rem 0;
    border-top: 1px solid var(--vt-hairline);
    border-bottom: 1px solid var(--vt-hairline);
    font-size: .78rem;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.inline-nav a {
    padding-bottom: 2px;
    border-bottom: 1px solid transparent;
    color: rgba(255, 255, 255, .72);
    text-decoration: none;
    transition: color .18s ease, border-color .18s ease;
}

.inline-nav a:hover {
    border-bottom-color: var(--vt-accent);
    color: var(--bs-emphasis-color);
}

.inline-nav-sep {
    color: rgba(var(--vt-accent-rgb), .55);
    font-size: .55rem;
}

/* --- Tables ------------------------------------------------------------- */

/* Two-column ledger of label/value rows: no box, only hairline separators.
   Compose with Bootstrap's `.table`. */
.table-ledger {
    --bs-table-bg: transparent;
    --bs-table-color: rgba(255, 255, 255, .9);
    --bs-table-border-color: rgba(255, 255, 255, .08);
    --bs-table-cell-padding-y: .85rem;
    --bs-table-cell-padding-x: .35rem;

    margin-bottom: 0;
}

.table-ledger th {
    width: 45%;
    font-family: var(--vt-font-display);
    color: rgba(255, 255, 255, .72);
    font-weight: 400;
    font-size: .95rem;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.table-ledger td {
    color: var(--vt-gold);
    font-size: 1.05rem;
    font-style: italic;
}

.table-ledger tr:last-child th,
.table-ledger tr:last-child td {
    border-bottom: 0;
}

/* --- Responsive / motion ------------------------------------------------ */

@media (min-width: 992px) {
    .paper {
        padding: 3rem;
    }
}

@media (max-width: 575.98px) {
    .section-head {
        gap: .85rem;
    }

    .section-marker {
        font-size: 2.4rem;
    }

    .dropcap::first-letter {
        font-size: 2.9rem;
    }

    .inline-nav {
        font-size: .7rem;
        letter-spacing: .1em;
    }
}

@media (prefers-reduced-motion: reduce) {
    .card-accent,
    .inline-nav a {
        transition: none;
    }

    .card-accent:hover {
        transform: none;
    }
}