/*
|--------------------------------------------------------------------------
| Blackthorne Academy
| Global Styles
|--------------------------------------------------------------------------
*/


/*
|--------------------------------------------------------------------------
| Theme
|--------------------------------------------------------------------------
*/

:root {
    --color-background: #120b17;
    --color-background-soft: #1a0f21;

    --color-surface: #24142c;
    --color-surface-light: #311b3a;

    --color-plum: #51285f;
    --color-plum-light: #744081;
    --color-plum-deep: #26102f;

    --color-text: #f6f0f7;
    --color-text-muted: #c9bdcc;
    --color-text-subtle: #9f92a3;

    --color-border: rgba(255, 255, 255, 0.11);

    --color-gold: #c4a15a;
    --color-gold-light: #dbc17d;
    --color-gold-dark: #8b6b32;

    --color-button-text: #211126;
    --color-white: #ffffff;

    --content-width: 1200px;
    --header-height: 88px;

    --radius-small: 6px;
    --radius-medium: 12px;
    --radius-large: 20px;

    --transition: 180ms ease;
}


/*
|--------------------------------------------------------------------------
| Reset
|--------------------------------------------------------------------------
*/

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    overflow-y: scroll;
    scrollbar-gutter: stable;
}

body {
    margin: 0;
    min-height: 100vh;

    background:
        radial-gradient(
            circle at top left,
            #3a1947 0,
            #211029 25%,
            #120b17 56%
        );

    color: var(--color-text);

    font-family:
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif;

    line-height: 1.7;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family:
        Georgia,
        "Times New Roman",
        serif;
}

p {
    font-family:
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif;

    letter-spacing: 0;

    line-height: 1.7;
}

img {
    display: block;
    max-width: 100%;
}

button,
input,
textarea,
select {
    font: inherit;
}

a {
    color: inherit;
}


/*
|--------------------------------------------------------------------------
| Accessibility
|--------------------------------------------------------------------------
*/

.skip-link {
    position: fixed;

    top: 10px;
    left: 10px;

    z-index: 9999;

    padding: 10px 16px;

    background: var(--color-white);
    color: #000000;

    transform: translateY(-200%);

    transition: transform var(--transition);
}

.skip-link:focus {
    transform: translateY(0);
}

.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;
}
/*
|--------------------------------------------------------------------------
| Keyboard Focus
|--------------------------------------------------------------------------
*/

:focus-visible {
    outline:
        3px solid
        var(--color-gold-light);

    outline-offset: 3px;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline:
        3px solid
        var(--color-gold-light);

    outline-offset: 3px;
}


/*
|--------------------------------------------------------------------------
| Accessible Selection
|--------------------------------------------------------------------------
*/

::selection {
    background: var(--color-gold);
    color: #160b19;
}


/*
|--------------------------------------------------------------------------
| Touch Targets
|--------------------------------------------------------------------------
*/

button,
.nav-link,
.nav-icon,
.button {
    min-height: 44px;
}


/*
|--------------------------------------------------------------------------
| Prevent Horizontal Overflow
|--------------------------------------------------------------------------
*/

html,
body {
    max-width: 100%;

    overflow-x: hidden;
}

/* ================================================================
   FIXED SITE HEADER
================================================================ */

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;

    width: 100%;

    z-index: 1000;

    background:
        linear-gradient(
            180deg,
            rgba(19, 10, 24, 1),
            rgba(14, 8, 18, 1)
        );

    border-bottom:
        1px solid
        rgba(219, 193, 125, 0.14);

    box-shadow:
        0 10px 30px
        rgba(0, 0, 0, 0.22);
}


/*
|--------------------------------------------------------------------------
| Reserve space for fixed header
|--------------------------------------------------------------------------
*/

body {
    padding-top: var(--header-height);
}

.header-inner {
    width:
        min(
            calc(100% - 40px),
            var(--content-width)
        );

    min-height: var(--header-height);

    margin: 0 auto;

    display: flex;
    align-items: center;

    gap: 30px;
}


/*
|--------------------------------------------------------------------------
| Branding
|--------------------------------------------------------------------------
*/

.site-brand {
    flex-shrink: 0;

    display: inline-flex;
    align-items: center;

    gap: 13px;

    color: var(--color-text);

    text-decoration: none;
}

.brand-crest-image {
    display: block;

    width: 68px;
    height: 68px;

    flex-shrink: 0;

    object-fit: contain;

    object-position: center;
}

.brand-text {
    display: flex;
    flex-direction: column;

    font-family:
        "Palatino Linotype",
        Palatino,
        "Book Antiqua",
        Georgia,
        serif;

    font-size: 20px;
    font-weight: 700;

    line-height: 1.02;

    letter-spacing: 0.06em;

    text-transform: uppercase;
}

.brand-text span:first-child {
    color: var(--color-text);
}

.brand-text span:last-child {
    color: var(--color-gold-light);

    font-size: 0.86em;

    letter-spacing: 0.18em;
}


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

.site-navigation {
    margin-left: auto;

    display: flex;
    align-items: center;

    position: relative;
}

.primary-menu {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 4px;
}


/*
|--------------------------------------------------------------------------
| Standard Navigation Links
|--------------------------------------------------------------------------
*/

.nav-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 42px;

    padding:
        8px
        13px;

    color: #d8d0da;

    text-decoration: none;

    font-family:
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif;

    font-size: 14px;
    font-weight: 600;

    letter-spacing: 0.025em;

    border-radius: var(--radius-small);

    background: transparent;

    transition:
        color var(--transition),
        background var(--transition),
        transform var(--transition);
}

.nav-link:hover,
.nav-link:focus-visible {
    color: var(--color-white);

    background:
        rgba(
            255,
            255,
            255,
            0.06
        );

    outline: none;
}


/*
|--------------------------------------------------------------------------
| Active Navigation Link
|--------------------------------------------------------------------------
*/

.nav-link.is-active,
.nav-link[aria-current="page"] {
    color: var(--color-white);

    background:
        rgba(
            255,
            255,
            255,
            0.07
        );
}


/*
|--------------------------------------------------------------------------
| Enrollment Navigation Button
|--------------------------------------------------------------------------
*/

.primary-menu .nav-link.nav-enroll {
    margin-left: 8px;

    min-height: 42px;

    padding:
        9px
        20px;

    background:
        linear-gradient(
            180deg,
            var(--color-gold-light),
            var(--color-gold)
        );

    color: #1b1020;

    border:
        1px solid
        rgba(
            255,
            232,
            164,
            0.42
        );

    border-radius: 7px;

    font-family:
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif;

    font-size: 14px;
    font-weight: 700;

    letter-spacing: 0.03em;

    box-shadow:
        0 7px 22px
        rgba(
            196,
            161,
            90,
            0.18
        );

    transition:
        background var(--transition),
        border-color var(--transition),
        box-shadow var(--transition),
        transform var(--transition);
}

.primary-menu .nav-link.nav-enroll:hover,
.primary-menu .nav-link.nav-enroll:focus-visible {
    background:
        linear-gradient(
            180deg,
            #ead68e,
            var(--color-gold-light)
        );

    color: #160b19;

    border-color:
        rgba(
            255,
            239,
            190,
            0.65
        );

    box-shadow:
        0 9px 28px
        rgba(
            196,
            161,
            90,
            0.28
        );

    transform: translateY(-1px);

    outline: none;
}


/*
|--------------------------------------------------------------------------
| Navigation Icon
|--------------------------------------------------------------------------
*/

.nav-icon {
    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    margin-left: 5px;

    padding: 0;

    border: 0;

    border-radius: 50%;

    background: transparent;

    color: #d8d0da;

    cursor: pointer;

    transition:
        color var(--transition),
        background var(--transition),
        transform var(--transition);
}

.nav-icon svg {
    width: 21px;
    height: 21px;

    fill: currentColor;
}

.nav-icon:hover,
.nav-icon:focus-visible {
    background:
        rgba(
            255,
            255,
            255,
            0.07
        );

    color: var(--color-white);

    transform: translateY(-1px);

    outline: none;
}


/*
|--------------------------------------------------------------------------
| Header Search
|--------------------------------------------------------------------------
*/

.header-search {
    position: absolute;

    top: calc(100% + 12px);
    right: 0;

    width:
        min(
            420px,
            calc(100vw - 40px)
        );

    padding: 12px;

    background: var(--color-surface);

    border:
        1px solid
        var(--color-border);

    border-radius: var(--radius-medium);

    box-shadow:
        0 18px 60px
        rgba(
            0,
            0,
            0,
            0.42
        );
}

.header-search[hidden] {
    display: none;
}

.header-search input {
    width: 100%;

    min-height: 46px;

    padding:
        10px
        44px
        10px
        14px;

    border:
        1px solid
        var(--color-border);

    border-radius: var(--radius-small);

    background: #100813;

    color: var(--color-text);

    outline: none;
}

.header-search input:focus {
    border-color: var(--color-gold);
}

.search-close {
    position: absolute;

    top: 20px;
    right: 20px;

    width: 30px;
    height: 30px;

    border: 0;

    background: transparent;

    color: var(--color-text-muted);

    font-size: 25px;

    cursor: pointer;
}


/*
|--------------------------------------------------------------------------
| Mobile Navigation Toggle
|--------------------------------------------------------------------------
*/

.mobile-menu-toggle {
    display: none;

    width: 44px;
    height: 44px;

    padding: 10px;

    border:
        1px solid
        var(--color-border);

    border-radius: var(--radius-small);

    background: transparent;

    cursor: pointer;
}

.mobile-menu-toggle span {
    display: block;

    width: 100%;
    height: 2px;

    margin: 5px 0;

    background: var(--color-text);
}


/*
|--------------------------------------------------------------------------
| Shared Layout
|--------------------------------------------------------------------------
*/

main {
    display: block;
}

.section-inner {
    width:
        min(
            calc(100% - 40px),
            var(--content-width)
        );

    margin: 0 auto;
}


/*
|--------------------------------------------------------------------------
| Buttons
|--------------------------------------------------------------------------
*/

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 48px;

    padding:
        11px
        20px;

    border-radius: var(--radius-small);

    text-decoration: none;

    font-family:
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif;

    font-size: 14px;
    font-weight: 700;

    transition:
        background var(--transition),
        border-color var(--transition),
        transform var(--transition);
}

.button:hover {
    transform: translateY(-1px);
}

.button-primary {
    background: var(--color-gold);

    color: var(--color-button-text);
}

.button-primary:hover,
.button-primary:focus-visible {
    background: var(--color-gold-light);

    color: var(--color-button-text);
}

.button-secondary {
    border:
        1px solid
        var(--color-border);

    background:
        rgba(
            255,
            255,
            255,
            0.04
        );

    color: var(--color-text);
}

.button-secondary:hover,
.button-secondary:focus-visible {
    border-color: var(--color-gold);

    background:
        rgba(
            255,
            255,
            255,
            0.07
        );
}

.button-large {
    min-height: 54px;

    padding:
        14px
        27px;

    font-size: 15px;
}


/*
|--------------------------------------------------------------------------
| Form Elements
|--------------------------------------------------------------------------
*/

.form-group {
    margin-bottom: 17px;
}

.form-group label {
    display: block;

    margin-bottom: 7px;

    font-family:
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif;

    font-size: 13px;
    font-weight: 700;
}

.form-control {
    width: 100%;

    min-height: 51px;

    padding:
        12px
        14px;

    border:
        1px solid
        var(--color-border);

    border-radius: var(--radius-small);

    background: #e9f1ff;

    color: #080808;

    font-family:
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif !important;

    font-size: 15px !important;
    font-weight: 400 !important;

    line-height: 1.4 !important;

    caret-color: #080808;

    outline: none;

    transition:
        border var(--transition),
        box-shadow var(--transition);
}

.form-control::placeholder {
    color: #666b74;

    font-family:
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif;

    font-size: 15px;
    font-weight: 400;

    opacity: 1;
}

.form-control:focus,
.form-control:active {
    border-color: var(--color-gold);

    font-family:
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif !important;

    font-size: 15px !important;
    font-weight: 400 !important;

    line-height: 1.4 !important;

    box-shadow:
        0 0 0 3px
        rgba(
            196,
            161,
            90,
            0.14
        );
}


/*
|--------------------------------------------------------------------------
| Chrome / Edge Autofill
|--------------------------------------------------------------------------
*/

.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover,
.form-control:-webkit-autofill:focus,
.form-control:-webkit-autofill:active {
    -webkit-text-fill-color: #080808 !important;

    font-family:
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif !important;

    font-size: 15px !important;
    font-weight: 400 !important;

    line-height: 1.4 !important;

    caret-color: #080808;

    -webkit-box-shadow:
        0 0 0 1000px
        #e9f1ff
        inset !important;

    box-shadow:
        0 0 0 1000px
        #e9f1ff
        inset !important;

    transition:
        background-color
        9999s
        ease-out
        0s;
}


/*
|--------------------------------------------------------------------------
| Firefox Autofill
|--------------------------------------------------------------------------
*/

.form-control:autofill {
    background: #e9f1ff !important;

    color: #080808 !important;

    font-family:
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif !important;

    font-size: 15px !important;
    font-weight: 400 !important;
}


/*
|--------------------------------------------------------------------------
| Login Utility Text
|--------------------------------------------------------------------------
*/

.login-options {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    margin-bottom: 20px;

    color: var(--color-text-muted);

    font-family:
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif;

    font-size: 13px;
}

.remember-me {
    display: inline-flex;
    align-items: center;

    gap: 7px;
}

.password-note {
    text-align: right;

    color: var(--color-text-subtle);

    font-family:
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif;

    font-size: 12px;
    font-weight: 400;

    letter-spacing: 0.01em;
}

.login-submit {
    width: 100%;

    border: 0;

    cursor: pointer;
}

.login-footer {
    margin:
        18px
        0
        0;

    text-align: center;

    color: var(--color-text-muted);

    font-family:
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif;

    font-size: 13px;

    line-height: 1.6;
}

.login-footer a {
    color: var(--color-gold-light);
}


/*
|--------------------------------------------------------------------------
| Shared Academy Styling
|--------------------------------------------------------------------------
*/

.academy-overline {
    margin:
        0
        0
        14px;

    color: var(--color-gold-light);

    font-family:
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 0.22em;

    text-transform: uppercase;
}

.academy-overline span {
    display: inline-block;

    margin:
        0
        7px;

    color: var(--color-gold-dark);
}

.ornamental-rule {
    display: flex;
    align-items: center;

    gap: 9px;

    width: 100%;

    margin:
        22px
        0;
}

.ornamental-rule span {
    flex: 1;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(
                219,
                193,
                125,
                0.48
            )
        );
}

.ornamental-rule span:last-child {
    background:
        linear-gradient(
            90deg,
            rgba(
                219,
                193,
                125,
                0.48
            ),
            transparent
        );
}

.ornamental-rule i {
    width: 7px;
    height: 7px;

    display: block;

    border:
        1px solid
        var(--color-gold);

    transform: rotate(45deg);
}

.ornamental-rule-left {
    max-width: 290px;
}


/*
|--------------------------------------------------------------------------
| Hero
|--------------------------------------------------------------------------
*/

.home-hero {
    position: relative;

    overflow: hidden;

    min-height:
        calc(
            100vh -
            var(--header-height)
        );

    display: flex;
    align-items: center;

    padding:
        clamp(80px, 9vw, 135px)
        0
        clamp(85px, 10vw, 145px);

    background-image:
        linear-gradient(
            90deg,
            rgba(14, 7, 18, 0.90) 0%,
            rgba(20, 9, 25, 0.78) 38%,
            rgba(18, 8, 23, 0.72) 62%,
            rgba(12, 6, 16, 0.88) 100%
        ),
        linear-gradient(
            180deg,
            rgba(18, 9, 23, 0.18),
            rgba(10, 5, 14, 0.48)
        ),
        image-set(
            url("../images/homepage_hero_bg.webp") type("image/webp"),
            url("../images/homepage_hero_bg.png") type("image/png")
        );

    background-size:
        cover,
        cover,
        cover;

    background-position:
        center,
        center,
        center;

    background-repeat:
        no-repeat;

    border-bottom:
        1px solid
        rgba(219, 193, 125, 0.18);
}

.home-hero::before {
    content: "";

    position: absolute;

    inset: 24px;

    pointer-events: none;

    border:
        1px solid
        rgba(
            219,
            193,
            125,
            0.07
        );
}

.home-hero::after {
    content: "B";

    position: absolute;

    left: -25px;
    bottom: -180px;

    color:
        rgba(
            219,
            193,
            125,
            0.025
        );

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 600px;
    font-weight: 700;

    line-height: 1;

    pointer-events: none;
}

.home-hero-grid {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 1.2fr)
        minmax(350px, 0.66fr);

    gap:
        clamp(60px, 8vw, 110px);

    align-items: center;
}

.home-hero-copy {
    max-width: 760px;
}

.home-hero h1 {
    max-width: 760px;

    margin:
        0
        0
        27px;

    font-size:
        clamp(
            48px,
            7vw,
            83px
        );

    font-weight: 500;

    line-height: 0.98;

    letter-spacing: -0.035em;
}

.home-hero-intro {
    max-width: 670px;

    margin:
        0
        0
        32px;

    color: var(--color-text-muted);

    font-family:
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        clamp(
            17px,
            2vw,
            20px
        );

    font-weight: 400;

    line-height: 1.75;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 12px;
}

.hero-motto {
    display: flex;
    align-items: center;

    gap: 17px;

    max-width: 520px;

    margin-top: 42px;
}

.hero-motto .ornament-line {
    width: 58px;
    height: 1px;

    background:
        var(--color-gold-dark);
}

.hero-motto p {
    margin: 0;

    color: var(--color-text-subtle);

    font-family:
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 0.18em;

    text-transform: uppercase;
}


/*
|--------------------------------------------------------------------------
| Hero Decoration
|--------------------------------------------------------------------------
*/

.hero-ornament {
    position: absolute;

    pointer-events: none;

    width: 260px;
    height: 260px;

    border:
        1px solid
        rgba(
            219,
            193,
            125,
            0.08
        );

    border-radius: 50%;
}

.hero-ornament::before,
.hero-ornament::after {
    content: "";

    position: absolute;

    inset: 27px;

    border:
        1px solid
        rgba(
            219,
            193,
            125,
            0.05
        );

    transform: rotate(45deg);
}

.hero-ornament::after {
    inset: 67px;

    border-radius: 50%;

    transform: none;
}

.hero-ornament-left {
    left: -150px;
    top: 80px;
}

.hero-ornament-right {
    right: -120px;
    bottom: -30px;
}


/*
|--------------------------------------------------------------------------
| Academy Login Panel
|--------------------------------------------------------------------------
*/

.academy-login-panel {
    position: relative;

    padding:
        34px
        34px
        32px;

    background:
        linear-gradient(
            145deg,
            rgba(55, 24, 66, 0.94),
            rgba(20, 9, 26, 0.97)
        );

    backdrop-filter: blur(8px);

    border:
        1px solid
        rgba(219, 193, 125, 0.30);

    box-shadow:
        0 35px 90px
        rgba(0, 0, 0, 0.48),
        inset
        0 0 0 5px
        rgba(255, 255, 255, 0.018);
}

.academy-login-panel::before,
.academy-login-panel::after {
    content: "";

    position: absolute;

    width: 34px;
    height: 34px;

    pointer-events: none;
}

.academy-login-panel::before {
    top: 8px;
    left: 8px;

    border-top:
        1px solid
        var(--color-gold-dark);

    border-left:
        1px solid
        var(--color-gold-dark);
}

.academy-login-panel::after {
    right: 8px;
    bottom: 8px;

    border-right:
        1px solid
        var(--color-gold-dark);

    border-bottom:
        1px solid
        var(--color-gold-dark);
}

.login-panel-top {
    display: flex;
    align-items: center;

    gap: 18px;
}

/*
|--------------------------------------------------------------------------
| Login Crest
|--------------------------------------------------------------------------
*/

.login-crest-image {
    display: block;

    width: 64px;
    height: 64px;

    flex-shrink: 0;

    object-fit: contain;

    object-position: center;
}

.login-eyebrow {
    margin:
        0
        0
        2px;

    color: var(--color-gold-light);

    font-family:
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 0.19em;

    text-transform: uppercase;
}

.academy-login-panel h2 {
    margin: 0;

    font-size: 25px;

    line-height: 1.15;
}


/*
|--------------------------------------------------------------------------
| Academy Experience
|--------------------------------------------------------------------------
*/

.academy-experience {
    padding:
        clamp(90px, 9vw, 125px)
        0;

    background:
        linear-gradient(
            180deg,
            #100814,
            #160b1b
        );

    border-bottom:
        1px solid
        rgba(
            219,
            193,
            125,
            0.14
        );
}

.academy-section-heading {
    max-width: 780px;

    margin-bottom: 60px;
}

.academy-section-heading h2 {
    margin:
        0
        0
        18px;

    font-size:
        clamp(
            37px,
            5vw,
            57px
        );

    font-weight: 500;

    line-height: 1.05;
}

.academy-section-heading > p:last-child {
    margin: 0;

    color: var(--color-text-muted);

    font-size: 18px;

    line-height: 1.75;
}


/*
|--------------------------------------------------------------------------
| Experience Ledger
|--------------------------------------------------------------------------
*/

.experience-ledger {
    border-top:
        1px solid
        rgba(
            219,
            193,
            125,
            0.24
        );

    border-bottom:
        1px solid
        rgba(
            219,
            193,
            125,
            0.24
        );
}

.experience-entry {
    display: grid;

    grid-template-columns:
        60px
        minmax(230px, 0.75fr)
        minmax(320px, 1.25fr);

    gap:
        26px
        48px;

    align-items: start;

    padding:
        40px
        0;

    border-bottom:
        1px solid
        rgba(
            255,
            255,
            255,
            0.075
        );
}

.experience-entry:last-child {
    border-bottom: 0;
}

.experience-symbol {
    color: var(--color-gold);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 25px;

    text-align: center;
}

.experience-label {
    display: block;

    margin-bottom: 7px;

    color: var(--color-gold-light);

    font-family:
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 0.2em;

    text-transform: uppercase;
}

.experience-entry h3 {
    margin: 0;

    font-size:
        clamp(
            22px,
            3vw,
            30px
        );

    font-weight: 500;

    line-height: 1.15;
}

.experience-entry > p {
    max-width: 650px;

    margin: 0;

    color: var(--color-text-muted);

    line-height: 1.75;
}

.academy-section-link {
    margin-top: 32px;
}

.text-link {
    display: inline-flex;
    align-items: center;

    gap: 10px;

    color: var(--color-gold-light);

    text-decoration: none;

    font-family:
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif;

    font-size: 14px;
    font-weight: 700;

    transition:
        gap var(--transition),
        color var(--transition);
}

.text-link:hover,
.text-link:focus-visible {
    gap: 15px;

    color: var(--color-white);
}


/*
|--------------------------------------------------------------------------
| About Preview
|--------------------------------------------------------------------------
*/

.academy-about-preview {
    padding:
        clamp(90px, 10vw, 135px)
        0;

    position: relative;

    background:
        radial-gradient(
            circle at 85% 35%,
            rgba(
                91,
                44,
                105,
                0.18
            ),
            transparent 28%
        ),
        #150a1a;

    border-bottom:
        1px solid
        rgba(
            219,
            193,
            125,
            0.14
        );
}

.academy-about-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(400px, 0.9fr);

    gap:
        clamp(
            60px,
            8vw,
            110px
        );

    align-items: center;
}

.academy-about-copy h2 {
    max-width: 700px;

    margin:
        0
        0
        18px;

    font-size:
        clamp(
            38px,
            5vw,
            58px
        );

    font-weight: 500;

    line-height: 1.05;
}

.academy-about-copy > p:not(.academy-overline) {
    max-width: 700px;

    color: var(--color-text-muted);

    font-size: 17px;

    line-height: 1.8;
}

.academy-about-copy .button {
    margin-top: 14px;
}


/*
|--------------------------------------------------------------------------
| Academy Image Frame
|--------------------------------------------------------------------------
*/

.academy-image-frame {
    position: relative;

    width: 100%;

    padding: 13px;

    border:
        1px solid
        rgba(
            219,
            193,
            125,
            0.31
        );

    background:
        rgba(
            255,
            255,
            255,
            0.018
        );

    box-shadow:
        0 24px 60px
        rgba(
            0,
            0,
            0,
            0.28
        );
}


/*
|--------------------------------------------------------------------------
| Inner Decorative Border
|--------------------------------------------------------------------------
*/

.academy-image-frame::before {
    content: "";

    position: absolute;

    inset: 6px;

    z-index: 2;

    pointer-events: none;

    border:
        1px solid
        rgba(
            219,
            193,
            125,
            0.10
        );
}


/*
|--------------------------------------------------------------------------
| Picture Wrapper
|--------------------------------------------------------------------------
*/

.academy-image-frame picture {
    display: block;

    position: relative;

    z-index: 1;

    width: 100%;
}


/*
|--------------------------------------------------------------------------
| Academy Artwork
|--------------------------------------------------------------------------
*/

.academy-about-image {
    display: block;

    width: 100%;
    height: auto;

    aspect-ratio: 1 / 1;

    object-fit: cover;

    object-position: center;

    position: relative;

    z-index: 1;

    background: var(--color-surface);
}


/*
|--------------------------------------------------------------------------
| Decorative Corner Details
|--------------------------------------------------------------------------
*/

.frame-corner {
    position: absolute;

    z-index: 3;

    width: 23px;
    height: 23px;

    pointer-events: none;
}

.frame-corner-tl {
    top: -1px;
    left: -1px;

    border-top:
        2px solid
        var(--color-gold);

    border-left:
        2px solid
        var(--color-gold);
}

.frame-corner-tr {
    top: -1px;
    right: -1px;

    border-top:
        2px solid
        var(--color-gold);

    border-right:
        2px solid
        var(--color-gold);
}

.frame-corner-bl {
    bottom: -1px;
    left: -1px;

    border-bottom:
        2px solid
        var(--color-gold);

    border-left:
        2px solid
        var(--color-gold);
}

.frame-corner-br {
    right: -1px;
    bottom: -1px;

    border-right:
        2px solid
        var(--color-gold);

    border-bottom:
        2px solid
        var(--color-gold);
}


/*
|--------------------------------------------------------------------------
| Admissions Notice
|--------------------------------------------------------------------------
*/

.admissions-notice {
    padding:
        clamp(70px, 8vw, 105px)
        0;

    background:
        linear-gradient(
            180deg,
            #1f0d27,
            #130817
        );
}

.admissions-frame {
    position: relative;

    display: grid;

    grid-template-columns:
        95px
        minmax(0, 1fr)
        auto;

    gap: 35px;

    align-items: center;

    padding:
        clamp(
            35px,
            5vw,
            55px
        );

    border:
        1px solid
        rgba(
            219,
            193,
            125,
            0.32
        );

    box-shadow:
        inset
        0 0 0 6px
        rgba(
            255,
            255,
            255,
            0.018
        );

    background:
        linear-gradient(
            120deg,
            rgba(
                80,
                38,
                92,
                0.28
            ),
            rgba(
                25,
                10,
                31,
                0.68
            )
        );
}

.admissions-frame::before,
.admissions-frame::after {
    content: "✦";

    position: absolute;

    color:
        rgba(
            219,
            193,
            125,
            0.45
        );

    font-size: 14px;
}

.admissions-frame::before {
    top: 10px;
    left: 12px;
}

.admissions-frame::after {
    right: 12px;
    bottom: 10px;
}

.admissions-seal {
    width: 76px;
    height: 88px;

    display: grid;
    place-items: center;

    border:
        1px solid
        var(--color-gold);

    border-radius:
        50% 50% 42% 42%;

    color: var(--color-gold-light);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 36px;
}

.admissions-copy {
    max-width: 730px;
}

.admissions-copy h2 {
    margin:
        0
        0
        12px;

    font-size:
        clamp(
            30px,
            4vw,
            44px
        );

    font-weight: 500;

    line-height: 1.08;
}

.admissions-copy > p:last-child {
    margin: 0;

    color: var(--color-text-muted);

    font-size: 17px;
}

.admissions-action {
    padding-left: 20px;
}


/*
|--------------------------------------------------------------------------
| Footer
|--------------------------------------------------------------------------
*/

.site-footer {
    background:
        linear-gradient(
            180deg,
            #100814,
            #09060c
        );

    border-top:
        1px solid
        rgba(
            219,
            193,
            125,
            0.20
        );
}

.footer-inner {
    width:
        min(
            calc(100% - 40px),
            var(--content-width)
        );

    margin: 0 auto;

    padding:
        58px
        0;

    display: grid;

    grid-template-columns:
        minmax(0, 40%)
        minmax(0, 60%);

    align-items: center;
}


/*
|--------------------------------------------------------------------------
| Footer Branding
|--------------------------------------------------------------------------
*/

.footer-brand-column {
    display: flex;
    align-items: center;
    justify-content: center;

    padding:
        0
        50px
        0
        10px;

    border-right:
        1px solid
        rgba(
            219,
            193,
            125,
            0.17
        );
}

.footer-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 16px;

    color: var(--color-text);

    text-decoration: none;

    transform: translateY(-5px);
}

.footer-crest-image {
    display: block;

    width: 88px;
    height: 88px;

    flex-shrink: 0;

    object-fit: contain;

    object-position: center;
}

.footer-brand-text {
    font-size: 20px;
}


/*
|--------------------------------------------------------------------------
| Footer Information
|--------------------------------------------------------------------------
*/

.footer-information-column {
    display: flex;
    flex-direction: column;
    justify-content: center;

    padding:
        0
        10px
        0
        55px;
}

.footer-legal-links {
    display: flex;
    flex-wrap: wrap;

    gap: 9px;

    margin:
        0
        0
        20px;

    color: var(--color-text);

    font-family:
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif;

    font-size: 13px;
}

.footer-legal-links a {
    text-decoration: none;

    transition:
        color
        var(--transition);
}

.footer-legal-links a:hover,
.footer-legal-links a:focus-visible {
    color: var(--color-gold-light);
}

.footer-legal-links span {
    color: var(--color-gold-dark);
}

.footer-disclaimer {
    max-width: 720px;

    margin:
        0
        0
        20px;

    color: var(--color-text-subtle);

    font-family:
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif;

    font-size: 11px;

    line-height: 1.75;
}

.footer-copyright {
    margin: 0;

    color: var(--color-text-muted);

    font-family:
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif;

    font-size: 12px;

    line-height: 1.6;
}


/*
|--------------------------------------------------------------------------
| Features Page
|--------------------------------------------------------------------------
|
| Public academy prospectus page.
| Uses the completed homepage as the visual foundation while maintaining
| its own editorial layouts and section rhythm.
|
*/


/*
|--------------------------------------------------------------------------
| Features SVG Icon Library
|--------------------------------------------------------------------------
*/

.feature-icon-library {
    position: absolute;

    width: 0;
    height: 0;

    overflow: hidden;

    pointer-events: none;
}


/*
|--------------------------------------------------------------------------
| Features Hero
|--------------------------------------------------------------------------
*/

.features-hero {
    position: relative;

    overflow: hidden;

    min-height:
        calc(
            100vh -
            var(--header-height)
        );

    display: flex;
    align-items: center;

    padding:
        clamp(90px, 10vw, 145px)
        0
        clamp(95px, 11vw, 155px);

    background-image:
        linear-gradient(
            90deg,
            rgba(11, 5, 15, 0.96) 0%,
            rgba(16, 7, 21, 0.91) 24%,
            rgba(18, 8, 24, 0.78) 48%,
            rgba(16, 7, 21, 0.54) 70%,
            rgba(9, 4, 12, 0.34) 100%
        ),
        linear-gradient(
            180deg,
            rgba(18, 9, 23, 0.10) 0%,
            rgba(10, 5, 14, 0.32) 67%,
            rgba(10, 5, 14, 0.80) 100%
        ),
        image-set(
            url("../images/features_hero_bg.webp") type("image/webp"),
            url("../images/features_hero_bg.png") type("image/png")
        );

    background-size:
        cover,
        cover,
        cover;

    background-position:
        center,
        center,
        center;

    background-repeat:
        no-repeat;

    border-bottom:
        1px solid
        rgba(219, 193, 125, 0.18);
}


/*
|----------------------------------------------------------------------
| Hero Interior Frame
|----------------------------------------------------------------------
*/

.features-hero::before {
    content: "";

    position: absolute;

    inset: 24px;

    pointer-events: none;

    border:
        1px solid
        rgba(
            219,
            193,
            125,
            0.08
        );
}


/*
|----------------------------------------------------------------------
| Large Background Initial
|----------------------------------------------------------------------
*/

.features-hero::after {
    content: "B";

    position: absolute;

    left: -36px;
    bottom: -195px;

    color:
        rgba(
            219,
            193,
            125,
            0.022
        );

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 620px;
    font-weight: 700;

    line-height: 1;

    pointer-events: none;
}


/*
|----------------------------------------------------------------------
| Hero Decorative Corners
|----------------------------------------------------------------------
*/

.features-hero .hero-ornament {
    position: absolute;

    z-index: 1;

    width: 70px;
    height: 70px;

    pointer-events: none;

    opacity: 0.45;
}


.features-hero .hero-ornament-left {
    top: 44px;
    left: 44px;

    border-top:
        1px solid
        var(--color-gold-dark);

    border-left:
        1px solid
        var(--color-gold-dark);
}


.features-hero .hero-ornament-right {
    right: 44px;
    bottom: 44px;

    border-right:
        1px solid
        var(--color-gold-dark);

    border-bottom:
        1px solid
        var(--color-gold-dark);
}


/*
|----------------------------------------------------------------------
| Hero Layout
|----------------------------------------------------------------------
*/

.features-hero-inner {
    position: relative;

    z-index: 2;
}


.features-hero-copy {
    max-width: 780px;
}


.features-hero h1 {
    max-width: 780px;

    margin:
        0
        0
        29px;

    font-size:
        clamp(
            48px,
            6.5vw,
            82px
        );

    font-weight: 500;

    line-height: 0.99;

    letter-spacing: -0.035em;

    text-wrap: balance;
}


.features-hero-intro {
    max-width: 690px;

    margin:
        0
        0
        33px;

    color: var(--color-text-muted);

    font-size:
        clamp(
            17px,
            2vw,
            20px
        );

    line-height: 1.75;
}


/*
|--------------------------------------------------------------------------
| Features Intro
|--------------------------------------------------------------------------
*/

.features-introduction {
    position: relative;

    padding:
        clamp(80px, 9vw, 125px)
        0;

    background:
        linear-gradient(
            180deg,
            #120817,
            #190c20
        );

    border-bottom:
        1px solid
        rgba(
            219,
            193,
            125,
            0.10
        );
}


.features-section-intro {
    max-width: 790px;
}


.features-section-intro-centered {
    margin:
        0
        auto;

    text-align: center;
}


.features-section-intro h2 {
    margin:
        0;

    font-size:
        clamp(
            36px,
            5vw,
            58px
        );

    font-weight: 500;

    line-height: 1.08;

    letter-spacing: -0.025em;

    text-wrap: balance;
}


.features-section-intro > p:last-child {
    max-width: 720px;

    margin:
        0
        auto;

    color: var(--color-text-muted);

    font-size: 17px;

    line-height: 1.8;
}


.features-section-intro-centered .ornamental-rule {
    max-width: 360px;

    margin:
        28px
        auto;
}


/*
|--------------------------------------------------------------------------
| Prospectus Sections
|--------------------------------------------------------------------------
*/

.features-prospectus-section {
    position: relative;

    padding:
        clamp(90px, 10vw, 140px)
        0;

    border-bottom:
        1px solid
        rgba(
            219,
            193,
            125,
            0.10
        );
}


.features-prospectus-light {
    background:
        radial-gradient(
            circle at 12% 18%,
            rgba(81, 40, 95, 0.16),
            transparent 32%
        ),
        linear-gradient(
            180deg,
            #190c20,
            #120917
        );
}


.features-prospectus-dark {
    background:
        radial-gradient(
            circle at 85% 32%,
            rgba(81, 40, 95, 0.14),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            #100713,
            #180b1e
        );
}


.features-prospectus-final {
    background:
        radial-gradient(
            circle at 15% 65%,
            rgba(81, 40, 95, 0.15),
            transparent 35%
        ),
        linear-gradient(
            180deg,
            #16091b,
            #100713
        );
}


.features-prospectus-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 0.82fr)
        minmax(0, 1.18fr);

    gap:
        clamp(
            70px,
            9vw,
            125px
        );

    align-items: start;
}


.features-prospectus-reversed {
    grid-template-columns:
        minmax(0, 1.18fr)
        minmax(0, 0.82fr);
}


/*
|--------------------------------------------------------------------------
| Prospectus Heading
|--------------------------------------------------------------------------
*/

.features-prospectus-heading {
    position: sticky;

    top:
        calc(
            var(--header-height) +
            45px
        );

    max-width: 480px;
}


.features-section-number {
    display: block;

    margin-bottom: 16px;

    color:
        rgba(
            219,
            193,
            125,
            0.25
        );

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(
            48px,
            6vw,
            76px
        );

    font-weight: 400;

    line-height: 1;
}


.features-prospectus-heading h2,
.features-community-heading h2 {
    margin:
        0
        0
        25px;

    font-size:
        clamp(
            37px,
            5vw,
            58px
        );

    font-weight: 500;

    line-height: 1.08;

    letter-spacing: -0.028em;

    text-wrap: balance;
}


.features-prospectus-heading > p:last-child,
.features-community-heading > p:last-child {
    margin: 0;

    color: var(--color-text-muted);

    font-size: 17px;

    line-height: 1.82;
}


/*
|--------------------------------------------------------------------------
| Feature Ledger
|--------------------------------------------------------------------------
*/

.features-ledger {
    position: relative;

    border-top:
        1px solid
        rgba(
            219,
            193,
            125,
            0.24
        );
}


.feature-ledger-entry {
    position: relative;

    display: grid;

    grid-template-columns:
        58px
        minmax(0, 1fr);

    gap: 25px;

    padding:
        34px
        0;

    border-bottom:
        1px solid
        rgba(
            219,
            193,
            125,
            0.18
        );
}


.feature-ledger-entry::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -1px;

    width: 0;
    height: 1px;

    background:
        var(--color-gold);

    transition:
        width
        300ms
        ease;
}


.feature-ledger-entry:hover::after {
    width: 100%;
}


.feature-ledger-entry h3 {
    margin:
        0
        0
        9px;

    color: var(--color-text);

    font-size:
        clamp(
            21px,
            2vw,
            27px
        );

    font-weight: 500;

    line-height: 1.25;
}


.feature-ledger-entry p {
    max-width: 660px;

    margin: 0;

    color: var(--color-text-muted);

    font-size: 15px;

    line-height: 1.75;
}


/*
|--------------------------------------------------------------------------
| Feature Icons
|--------------------------------------------------------------------------
*/

.feature-icon {
    width: 48px;
    height: 48px;

    display: grid;
    place-items: center;

    flex: 0 0 auto;

    border:
        1px solid
        rgba(
            219,
            193,
            125,
            0.30
        );

    border-radius: 50%;

    color: var(--color-gold-light);

    background:
        radial-gradient(
            circle,
            rgba(196, 161, 90, 0.09),
            rgba(196, 161, 90, 0.02)
        );

    box-shadow:
        inset
        0 0 0 4px
        rgba(
            255,
            255,
            255,
            0.012
        );

    transition:
        border-color var(--transition),
        background var(--transition),
        transform var(--transition);
}


.feature-ledger-entry:hover .feature-icon,
.feature-community-entry:hover .feature-icon,
.feature-emblem-entry:hover .feature-icon {
    border-color: var(--color-gold);

    background:
        rgba(
            196,
            161,
            90,
            0.11
        );

    transform: translateY(-2px);
}


.feature-icon svg {
    width: 24px;
    height: 24px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.45;

    stroke-linecap: round;
    stroke-linejoin: round;

    overflow: visible;
}


.feature-icon-large {
    width: 62px;
    height: 62px;
}


.feature-icon-large svg {
    width: 29px;
    height: 29px;
}


/*
|--------------------------------------------------------------------------
| Houses & Achievement
|--------------------------------------------------------------------------
*/

.features-houses-section {
    position: relative;

    overflow: hidden;

    padding:
        clamp(95px, 11vw, 150px)
        0;

    background:
        radial-gradient(
            circle at center,
            rgba(81, 40, 95, 0.28) 0%,
            rgba(32, 13, 40, 0.22) 31%,
            transparent 62%
        ),
        linear-gradient(
            180deg,
            #16091b,
            #100713
        );

    border-bottom:
        1px solid
        rgba(
            219,
            193,
            125,
            0.11
        );
}


.features-houses-section::before {
    content: "";

    position: absolute;

    top: 54%;
    left: 50%;

    width: 650px;
    height: 650px;

    border:
        1px solid
        rgba(
            219,
            193,
            125,
            0.035
        );

    border-radius: 50%;

    transform:
        translate(
            -50%,
            -50%
        );

    pointer-events: none;
}


.features-houses-section .features-section-intro {
    margin-bottom:
        clamp(
            70px,
            8vw,
            105px
        );
}


/*
|--------------------------------------------------------------------------
| House Emblem Layout
|--------------------------------------------------------------------------
*/

.features-emblem-layout {
    position: relative;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        230px
        minmax(0, 1fr);

    grid-template-rows:
        repeat(
            2,
            auto
        );

    gap:
        55px
        70px;

    align-items: center;

    max-width: 1080px;

    margin:
        0
        auto;
}


.feature-emblem-entry {
    max-width: 350px;
}


.feature-emblem-entry:nth-child(1),
.feature-emblem-entry:nth-child(2) {
    justify-self: end;

    text-align: right;
}


.feature-emblem-entry:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
}


.feature-emblem-entry:nth-child(2) {
    grid-column: 1;
    grid-row: 2;
}


.features-central-emblem {
    grid-column: 2;
    grid-row:
        1 /
        span 2;

    align-self: center;
    justify-self: center;
}


.feature-emblem-entry:nth-child(4) {
    grid-column: 3;
    grid-row: 1;
}


.feature-emblem-entry:nth-child(5) {
    grid-column: 3;
    grid-row: 2;
}


.feature-emblem-entry:nth-child(1) .feature-icon,
.feature-emblem-entry:nth-child(2) .feature-icon {
    margin-left: auto;
}


.feature-emblem-entry h3 {
    margin:
        18px
        0
        10px;

    font-size:
        clamp(
            23px,
            2.5vw,
            30px
        );

    font-weight: 500;

    line-height: 1.2;
}


.feature-emblem-entry p {
    margin: 0;

    color: var(--color-text-muted);

    font-size: 15px;

    line-height: 1.75;
}


/*
|--------------------------------------------------------------------------
| Central Academy Emblem
|--------------------------------------------------------------------------
*/

.features-central-emblem {
    position: relative;

    width: 220px;
    height: 220px;

    display: grid;
    place-items: center;
}


.features-central-emblem::before,
.features-central-emblem::after {
    content: "";

    position: absolute;

    border-radius: 50%;

    pointer-events: none;
}


.features-central-emblem::before {
    inset: 0;

    border:
        1px solid
        rgba(
            219,
            193,
            125,
            0.36
        );

    box-shadow:
        0 0 65px
        rgba(
            81,
            40,
            95,
            0.25
        );
}


.features-central-emblem::after {
    inset: 15px;

    border:
        1px solid
        rgba(
            219,
            193,
            125,
            0.13
        );
}


.features-emblem-ring {
    position: relative;

    z-index: 2;

    width: 170px;
    height: 170px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(57, 26, 68, 0.80),
            rgba(18, 8, 23, 0.94)
        );
}


.features-emblem-ring img {
    width: 145px;
    height: 145px;

    object-fit: contain;
}


/*
|--------------------------------------------------------------------------
| Community Section
|--------------------------------------------------------------------------
*/

.features-community-section {
    position: relative;

    padding:
        clamp(95px, 10vw, 145px)
        0;

    background:
        linear-gradient(
            180deg,
            #1a0c21,
            #120817
        );

    border-bottom:
        1px solid
        rgba(
            219,
            193,
            125,
            0.10
        );
}


.features-community-section .section-inner {
    display: grid;

    grid-template-columns:
        minmax(0, 0.78fr)
        minmax(0, 1.22fr);

    gap:
        clamp(
            70px,
            9vw,
            125px
        );

    align-items: start;
}


.features-community-heading {
    position: sticky;

    top:
        calc(
            var(--header-height) +
            45px
        );

    max-width: 470px;
}


/*
|--------------------------------------------------------------------------
| Community Entries
|--------------------------------------------------------------------------
*/

.features-community-list {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    border-top:
        1px solid
        rgba(
            219,
            193,
            125,
            0.22
        );

    border-left:
        1px solid
        rgba(
            219,
            193,
            125,
            0.13
        );
}


.feature-community-entry {
    position: relative;

    min-height: 280px;

    padding:
        34px;

    border-right:
        1px solid
        rgba(
            219,
            193,
            125,
            0.13
        );

    border-bottom:
        1px solid
        rgba(
            219,
            193,
            125,
            0.13
        );

    background:
        linear-gradient(
            145deg,
            rgba(
                255,
                255,
                255,
                0.018
            ),
            rgba(
                255,
                255,
                255,
                0
            )
        );

    transition:
        background var(--transition);
}


.feature-community-entry:hover {
    background:
        linear-gradient(
            145deg,
            rgba(
                196,
                161,
                90,
                0.055
            ),
            rgba(
                81,
                40,
                95,
                0.035
            )
        );
}


.feature-community-entry .feature-icon {
    margin-bottom: 25px;
}


.feature-community-entry h3 {
    margin:
        0
        0
        12px;

    font-size:
        clamp(
            22px,
            2.5vw,
            29px
        );

    font-weight: 500;

    line-height: 1.25;
}


.feature-community-entry p {
    margin: 0;

    color: var(--color-text-muted);

    font-size: 15px;

    line-height: 1.75;
}


/*
|--------------------------------------------------------------------------
| Features Closing Statement
|--------------------------------------------------------------------------
*/

.features-closing {
    position: relative;

    overflow: hidden;

    padding:
        clamp(90px, 10vw, 140px)
        0;

    background:
        radial-gradient(
            circle at center,
            rgba(81, 40, 95, 0.25),
            transparent 53%
        ),
        #100713;
}


.features-closing::before {
    content: "BLACKTHORNE";

    position: absolute;

    left: 50%;
    top: 50%;

    transform:
        translate(
            -50%,
            -50%
        );

    color:
        rgba(
            219,
            193,
            125,
            0.018
        );

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(
            90px,
            15vw,
            210px
        );

    white-space: nowrap;

    letter-spacing: 0.04em;

    pointer-events: none;
}


.features-closing-frame {
    position: relative;

    z-index: 2;

    max-width: 880px;

    margin:
        0
        auto;

    padding:
        clamp(
            42px,
            6vw,
            70px
        );

    border:
        1px solid
        rgba(
            219,
            193,
            125,
            0.28
        );

    box-shadow:
        inset
        0 0 0 6px
        rgba(
            255,
            255,
            255,
            0.012
        );

    text-align: center;

    background:
        linear-gradient(
            135deg,
            rgba(
                64,
                29,
                75,
                0.24
            ),
            rgba(
                17,
                7,
                22,
                0.78
            )
        );
}


.features-closing-frame::before,
.features-closing-frame::after {
    content: "✦";

    position: absolute;

    color:
        rgba(
            219,
            193,
            125,
            0.46
        );

    font-size: 13px;
}


.features-closing-frame::before {
    top: 12px;
    left: 14px;
}


.features-closing-frame::after {
    right: 14px;
    bottom: 12px;
}


.features-closing-frame h2 {
    max-width: 720px;

    margin:
        0
        auto;

    font-size:
        clamp(
            35px,
            5vw,
            58px
        );

    font-weight: 500;

    line-height: 1.08;

    letter-spacing: -0.025em;

    text-wrap: balance;
}


.features-closing-frame .ornamental-rule {
    max-width: 340px;

    margin:
        27px
        auto;
}


.features-closing-frame > p:last-child {
    max-width: 680px;

    margin:
        0
        auto;

    color: var(--color-text-muted);

    font-size: 17px;

    line-height: 1.82;
}


/*
|--------------------------------------------------------------------------
| Features Admissions
|--------------------------------------------------------------------------
*/

.features-admissions {
    border-top:
        1px solid
        rgba(
            219,
            193,
            125,
            0.08
        );
}


/*
|--------------------------------------------------------------------------
| Anchor Positioning
|--------------------------------------------------------------------------
|
| Prevent the fixed header from covering anchored sections.
|
*/

#academic-study {
    scroll-margin-top:
        calc(
            var(--header-height) +
            20px
        );
}


/*
|--------------------------------------------------------------------------
| Features Tablet
|--------------------------------------------------------------------------
*/

@media (max-width: 1000px) {


    /*
    |----------------------------------------------------------------------
    | Hero
    |----------------------------------------------------------------------
    */

    .features-hero {
        min-height: auto;

        background-position:
            center,
            center,
            58% center;
    }


    .features-hero-copy {
        max-width: 700px;
    }


    /*
    |----------------------------------------------------------------------
    | Prospectus
    |----------------------------------------------------------------------
    */

    .features-prospectus-grid,
    .features-prospectus-reversed {
        grid-template-columns: 1fr;

        gap: 55px;
    }


    .features-prospectus-reversed .features-ledger {
        order: 2;
    }


    .features-prospectus-reversed .features-prospectus-heading {
        order: 1;
    }


    .features-prospectus-heading,
    .features-community-heading {
        position: static;

        max-width: 700px;
    }


    /*
    |----------------------------------------------------------------------
    | House Layout
    |----------------------------------------------------------------------
    */

    .features-emblem-layout {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        grid-template-rows: auto;

        gap:
            50px
            55px;

        max-width: 850px;
    }


    .features-central-emblem {
        grid-column:
            1 /
            -1;

        grid-row: 1;

        margin-bottom: 10px;
    }


    .feature-emblem-entry:nth-child(1) {
        grid-column: 1;
        grid-row: 2;
    }


    .feature-emblem-entry:nth-child(2) {
        grid-column: 2;
        grid-row: 2;
    }


    .feature-emblem-entry:nth-child(4) {
        grid-column: 1;
        grid-row: 3;
    }


    .feature-emblem-entry:nth-child(5) {
        grid-column: 2;
        grid-row: 3;
    }


    .feature-emblem-entry,
    .feature-emblem-entry:nth-child(1),
    .feature-emblem-entry:nth-child(2) {
        max-width: 360px;

        justify-self: center;

        text-align: center;
    }


    .feature-emblem-entry .feature-icon,
    .feature-emblem-entry:nth-child(1) .feature-icon,
    .feature-emblem-entry:nth-child(2) .feature-icon {
        margin:
            0
            auto;
    }


    /*
    |----------------------------------------------------------------------
    | Community
    |----------------------------------------------------------------------
    */

    .features-community-section .section-inner {
        grid-template-columns: 1fr;

        gap: 55px;
    }

}


/*
|--------------------------------------------------------------------------
| Features Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 640px) {


    /*
    |----------------------------------------------------------------------
    | Hero
    |----------------------------------------------------------------------
    */

    .features-hero {
        min-height: auto;

        padding:
            70px
            0
            82px;

        background-image:
            linear-gradient(
                90deg,
                rgba(10, 4, 13, 0.95) 0%,
                rgba(14, 6, 18, 0.89) 48%,
                rgba(12, 5, 16, 0.70) 100%
            ),
            linear-gradient(
                180deg,
                rgba(18, 9, 23, 0.20),
                rgba(10, 5, 14, 0.72)
            ),
            image-set(
                url("../images/features_hero_bg.webp") type("image/webp"),
                url("../images/features_hero_bg.png") type("image/png")
            );

        background-position:
            center,
            center,
            68% center;
    }


    .features-hero::before {
        inset: 12px;
    }


    .features-hero::after {
        display: none;
    }


    .features-hero .hero-ornament {
        width: 38px;
        height: 38px;
    }


    .features-hero .hero-ornament-left {
        top: 24px;
        left: 24px;
    }


    .features-hero .hero-ornament-right {
        right: 24px;
        bottom: 24px;
    }


    .features-hero-copy {
        padding-inline: 20px;
    }


    .features-hero h1 {
        font-size:
            clamp(
                42px,
                12.5vw,
                58px
            );

        line-height: 1;
    }


    .features-hero-intro {
        font-size: 16px;

        line-height: 1.72;
    }


    /*
    |----------------------------------------------------------------------
    | Introduction
    |----------------------------------------------------------------------
    */

    .features-introduction {
        padding:
            72px
            0;
    }


    .features-section-intro h2 {
        font-size:
            clamp(
                33px,
                10vw,
                45px
            );
    }


    .features-section-intro > p:last-child {
        font-size: 16px;
    }


    /*
    |----------------------------------------------------------------------
    | Prospectus Sections
    |----------------------------------------------------------------------
    */

    .features-prospectus-section {
        padding:
            75px
            0;
    }


    .features-prospectus-grid,
    .features-prospectus-reversed {
        gap: 42px;
    }


    .features-section-number {
        margin-bottom: 13px;

        font-size: 51px;
    }


    .features-prospectus-heading h2,
    .features-community-heading h2 {
        font-size:
            clamp(
                33px,
                10vw,
                45px
            );

        margin-bottom: 20px;
    }


    .features-prospectus-heading > p:last-child,
    .features-community-heading > p:last-child {
        font-size: 16px;

        line-height: 1.75;
    }


    /*
    |----------------------------------------------------------------------
    | Ledger Entries
    |----------------------------------------------------------------------
    */

    .feature-ledger-entry {
        grid-template-columns:
            48px
            minmax(0, 1fr);

        gap: 18px;

        padding:
            28px
            0;
    }


    .feature-ledger-entry .feature-icon {
        width: 44px;
        height: 44px;
    }


    .feature-ledger-entry .feature-icon svg {
        width: 21px;
        height: 21px;
    }


    .feature-ledger-entry h3 {
        font-size: 22px;
    }


    .feature-ledger-entry p {
        font-size: 14px;

        line-height: 1.7;
    }


    /*
    |----------------------------------------------------------------------
    | Houses
    |----------------------------------------------------------------------
    */

    .features-houses-section {
        padding:
            78px
            0;
    }


    .features-houses-section::before {
        width: 420px;
        height: 420px;
    }


    .features-houses-section .features-section-intro {
        margin-bottom: 55px;
    }


    .features-emblem-layout {
        grid-template-columns: 1fr;

        gap: 45px;
    }


    .features-central-emblem {
        grid-column: 1;
        grid-row: 1;

        width: 185px;
        height: 185px;
    }


    .features-emblem-ring {
        width: 142px;
        height: 142px;
    }


    .features-emblem-ring img {
        width: 122px;
        height: 122px;
    }


    .feature-emblem-entry:nth-child(1) {
        grid-column: 1;
        grid-row: 2;
    }


    .feature-emblem-entry:nth-child(2) {
        grid-column: 1;
        grid-row: 3;
    }


    .feature-emblem-entry:nth-child(4) {
        grid-column: 1;
        grid-row: 4;
    }


    .feature-emblem-entry:nth-child(5) {
        grid-column: 1;
        grid-row: 5;
    }


    .feature-emblem-entry,
    .feature-emblem-entry:nth-child(1),
    .feature-emblem-entry:nth-child(2) {
        max-width: 420px;

        justify-self: center;

        text-align: center;
    }


    .feature-emblem-entry h3 {
        font-size: 24px;
    }


    /*
    |----------------------------------------------------------------------
    | Community
    |----------------------------------------------------------------------
    */

    .features-community-section {
        padding:
            78px
            0;
    }


    .features-community-section .section-inner {
        gap: 42px;
    }


    .features-community-list {
        grid-template-columns: 1fr;
    }


    .feature-community-entry {
        min-height: 0;

        padding:
            30px
            26px;
    }


    .feature-community-entry h3 {
        font-size: 23px;
    }


    /*
    |----------------------------------------------------------------------
    | Closing
    |----------------------------------------------------------------------
    */

    .features-closing {
        padding:
            75px
            0;
    }


    .features-closing::before {
        display: none;
    }


    .features-closing-frame {
        padding:
            38px
            25px;
    }


    .features-closing-frame h2 {
        font-size:
            clamp(
                32px,
                9.5vw,
                43px
            );
    }


    .features-closing-frame > p:last-child {
        font-size: 16px;

        line-height: 1.75;
    }

}


/*
|--------------------------------------------------------------------------
| Features Small Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 420px) {

    .features-hero-copy {
        padding-inline: 16px;
    }


    .features-hero h1 {
        font-size:
            clamp(
                39px,
                12vw,
                50px
            );
    }


    .feature-ledger-entry {
        grid-template-columns: 1fr;

        gap: 14px;
    }


    .feature-ledger-entry .feature-icon {
        margin-bottom: 2px;
    }


    .features-central-emblem {
        width: 165px;
        height: 165px;
    }


    .features-emblem-ring {
        width: 128px;
        height: 128px;
    }


    .features-emblem-ring img {
        width: 108px;
        height: 108px;
    }


    .feature-community-entry {
        padding:
            27px
            22px;
    }


    .features-closing-frame {
        padding:
            34px
            21px;
    }

}


/*
|--------------------------------------------------------------------------
| Features Reduced Motion
|--------------------------------------------------------------------------
*/

@media (prefers-reduced-motion: reduce) {

    .feature-ledger-entry::after {
        transition: none;
    }


    .feature-icon {
        transition: none;
    }


    .feature-ledger-entry:hover .feature-icon,
    .feature-community-entry:hover .feature-icon,
    .feature-emblem-entry:hover .feature-icon {
        transform: none;
    }

}

/*
|--------------------------------------------------------------------------
| About Page
|--------------------------------------------------------------------------
*/


/*
|--------------------------------------------------------------------------
| About Hero
|--------------------------------------------------------------------------
*/

.about-hero {
    position: relative;

    overflow: hidden;

    min-height:
        calc(
            100vh -
            var(--header-height)
        );

    display: flex;
    align-items: center;

    padding:
        clamp(95px, 10vw, 150px)
        0
        clamp(100px, 11vw, 160px);

    background-image:
        linear-gradient(
            90deg,
            rgba(10, 5, 14, 0.96) 0%,
            rgba(14, 7, 19, 0.91) 28%,
            rgba(16, 8, 22, 0.75) 52%,
            rgba(12, 6, 17, 0.46) 74%,
            rgba(8, 4, 11, 0.28) 100%
        ),
        linear-gradient(
            180deg,
            rgba(15, 7, 20, 0.08) 0%,
            rgba(10, 5, 14, 0.28) 68%,
            rgba(9, 4, 12, 0.78) 100%
        ),
        image-set(
            url("../images/about_hero_bg.webp") type("image/webp"),
            url("../images/about_hero_bg.png") type("image/png")
        );

    background-size:
        cover,
        cover,
        cover;

    background-position:
        center,
        center,
        center;

    background-repeat:
        no-repeat;

    border-bottom:
        1px solid
        rgba(219, 193, 125, 0.17);
}


.about-hero::before {
    content: "";

    position: absolute;

    inset: 24px;

    border:
        1px solid
        rgba(219, 193, 125, 0.08);

    pointer-events: none;
}


.about-hero::after {
    content: "B";

    position: absolute;

    left: -48px;
    bottom: -205px;

    color:
        rgba(219, 193, 125, 0.022);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 640px;
    font-weight: 700;

    line-height: 1;

    pointer-events: none;
}


.about-hero .hero-ornament {
    position: absolute;

    z-index: 1;

    width: 70px;
    height: 70px;

    opacity: 0.44;

    pointer-events: none;
}


.about-hero .hero-ornament-left {
    top: 44px;
    left: 44px;

    border-top:
        1px solid
        var(--color-gold-dark);

    border-left:
        1px solid
        var(--color-gold-dark);
}


.about-hero .hero-ornament-right {
    right: 44px;
    bottom: 44px;

    border-right:
        1px solid
        var(--color-gold-dark);

    border-bottom:
        1px solid
        var(--color-gold-dark);
}


.about-hero-inner {
    position: relative;

    z-index: 2;
}


.about-hero-copy {
    max-width: 790px;
}


.about-hero h1 {
    max-width: 790px;

    margin:
        0
        0
        29px;

    font-size:
        clamp(
            50px,
            6.8vw,
            86px
        );

    font-weight: 500;

    line-height: 0.99;

    letter-spacing: -0.035em;

    text-wrap: balance;
}


.about-hero-intro {
    max-width: 700px;

    margin:
        0
        0
        34px;

    color: var(--color-text-muted);

    font-size:
        clamp(
            17px,
            2vw,
            20px
        );

    line-height: 1.76;
}


/*
|--------------------------------------------------------------------------
| About Introduction
|--------------------------------------------------------------------------
*/

.about-introduction {
    position: relative;

    padding:
        clamp(90px, 10vw, 140px)
        0;

    background:
        radial-gradient(
            circle at 16% 20%,
            rgba(81, 40, 95, 0.15),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            #180b1e,
            #110814
        );

    border-bottom:
        1px solid
        rgba(219, 193, 125, 0.10);
}


.about-introduction-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 0.8fr)
        minmax(0, 1.2fr);

    gap:
        clamp(
            70px,
            9vw,
            125px
        );

    align-items: start;
}


.about-introduction-heading h2 {
    margin: 0;

    font-size:
        clamp(
            38px,
            5vw,
            60px
        );

    font-weight: 500;

    line-height: 1.08;

    letter-spacing: -0.028em;

    text-wrap: balance;
}


.about-introduction-copy {
    max-width: 720px;
}


.about-introduction-copy p {
    margin:
        0
        0
        24px;

    color: var(--color-text-muted);

    font-size: 16px;

    line-height: 1.84;
}


.about-introduction-copy .about-lead {
    color: var(--color-text);

    font-size:
        clamp(
            20px,
            2.2vw,
            26px
        );

    line-height: 1.58;
}


/*
|--------------------------------------------------------------------------
| RP Arrival Section
|--------------------------------------------------------------------------
*/

.about-arrival {
    position: relative;

    overflow: hidden;

    padding:
        clamp(95px, 11vw, 155px)
        0;

    background:
        radial-gradient(
            circle at center,
            rgba(86, 45, 101, 0.23),
            transparent 56%
        ),
        linear-gradient(
            180deg,
            #100713,
            #180b1f
        );

    border-bottom:
        1px solid
        rgba(219, 193, 125, 0.11);
}


.about-arrival::before {
    content: "";

    position: absolute;

    inset: 0;

    background:
        repeating-linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.008) 0,
            rgba(255, 255, 255, 0.008) 1px,
            transparent 1px,
            transparent 62px
        );

    pointer-events: none;
}


.about-arrival-frame {
    position: relative;

    z-index: 2;

    max-width: 1000px;

    margin:
        0
        auto;

    display: grid;

    grid-template-columns:
        170px
        minmax(0, 1fr);

    gap: 55px;

    padding:
        clamp(45px, 6vw, 78px);

    border:
        1px solid
        rgba(219, 193, 125, 0.30);

    box-shadow:
        inset
        0 0 0 6px
        rgba(255, 255, 255, 0.012),
        0 25px 80px
        rgba(0, 0, 0, 0.22);

    background:
        linear-gradient(
            145deg,
            rgba(59, 27, 70, 0.40),
            rgba(17, 7, 22, 0.88)
        );
}


.about-arrival-frame::before,
.about-arrival-frame::after {
    content: "✦";

    position: absolute;

    color:
        rgba(219, 193, 125, 0.44);

    font-size: 13px;
}


.about-arrival-frame::before {
    top: 14px;
    left: 16px;
}


.about-arrival-frame::after {
    right: 16px;
    bottom: 14px;
}


.about-arrival-mark {
    display: flex;
    justify-content: center;
    align-items: flex-start;
}


.about-arrival-mark img {
    width: 130px;
    height: 130px;

    object-fit: contain;
}


.about-arrival-content h2 {
    margin:
        0
        0
        6px;

    font-size:
        clamp(
            40px,
            5.4vw,
            62px
        );

    font-weight: 500;

    line-height: 1.06;

    letter-spacing: -0.03em;

    text-wrap: balance;
}


.about-arrival-content .ornamental-rule {
    max-width: 360px;

    margin:
        28px
        0
        32px;
}


.about-rp-prose {
    max-width: 700px;
}


.about-rp-prose p {
    margin:
        0
        0
        22px;

    color:
        rgba(
            239,
            231,
            215,
            0.85
        );

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(
            17px,
            1.7vw,
            20px
        );

    line-height: 1.86;
}


.about-arrival-signature {
    margin-top: 38px;

    padding-top: 25px;

    border-top:
        1px solid
        rgba(219, 193, 125, 0.18);
}


.about-arrival-signature span {
    display: block;

    color: var(--color-gold-light);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 20px;
}


.about-arrival-signature small {
    display: block;

    margin-top: 6px;

    color: var(--color-text-muted);

    font-size: 12px;

    letter-spacing: 0.15em;

    text-transform: uppercase;
}


/*
|--------------------------------------------------------------------------
| Two Worlds
|--------------------------------------------------------------------------
*/

.about-two-worlds {
    position: relative;

    padding:
        clamp(95px, 10vw, 145px)
        0;

    background:
        linear-gradient(
            180deg,
            #190c20,
            #120817
        );

    border-bottom:
        1px solid
        rgba(219, 193, 125, 0.10);
}


.about-section-heading {
    max-width: 800px;
}


.about-section-heading-centered {
    margin:
        0
        auto
        70px;

    text-align: center;
}


.about-section-heading h2 {
    margin: 0;

    font-size:
        clamp(
            37px,
            5vw,
            59px
        );

    font-weight: 500;

    line-height: 1.08;

    letter-spacing: -0.027em;

    text-wrap: balance;
}


.about-section-heading > p:last-child {
    max-width: 720px;

    margin:
        22px
        auto
        0;

    color: var(--color-text-muted);

    font-size: 17px;

    line-height: 1.82;
}


.about-worlds-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        90px
        minmax(0, 1fr);

    gap: 45px;

    align-items: stretch;

    max-width: 1050px;

    margin:
        0
        auto;
}


.about-world {
    position: relative;

    padding:
        42px
        36px;

    border:
        1px solid
        rgba(219, 193, 125, 0.20);

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.018),
            rgba(255, 255, 255, 0)
        );
}


.about-world-number {
    display: block;

    margin-bottom: 18px;

    color:
        rgba(219, 193, 125, 0.26);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 52px;

    line-height: 1;
}


.about-world h3 {
    margin:
        0
        0
        18px;

    font-size:
        clamp(
            28px,
            3vw,
            36px
        );

    font-weight: 500;

    line-height: 1.2;
}


.about-world p {
    margin:
        0
        0
        18px;

    color: var(--color-text-muted);

    font-size: 15px;

    line-height: 1.76;
}


.about-world p:last-child {
    margin-bottom: 0;
}


.about-world-divider {
    display: grid;

    grid-template-rows:
        1fr
        auto
        1fr;

    align-items: center;
    justify-items: center;

    gap: 18px;
}


.about-world-divider span {
    width: 1px;
    height: 100%;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(219, 193, 125, 0.32),
            transparent
        );
}


.about-world-divider div {
    width: 56px;
    height: 56px;

    display: grid;
    place-items: center;

    border:
        1px solid
        rgba(219, 193, 125, 0.35);

    border-radius: 50%;

    color: var(--color-gold-light);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 28px;

    background:
        #140919;
}


/*
|--------------------------------------------------------------------------
| Philosophy
|--------------------------------------------------------------------------
*/

.about-philosophy {
    position: relative;

    padding:
        clamp(95px, 10vw, 145px)
        0;

    background:
        radial-gradient(
            circle at 15% 45%,
            rgba(81, 40, 95, 0.17),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            #110814,
            #180b1f
        );

    border-bottom:
        1px solid
        rgba(219, 193, 125, 0.10);
}


.about-philosophy .section-inner {
    display: grid;

    grid-template-columns:
        minmax(0, 0.82fr)
        minmax(0, 1.18fr);

    gap:
        clamp(
            70px,
            9vw,
            125px
        );

    align-items: start;
}


.about-philosophy-heading {
    position: sticky;

    top:
        calc(
            var(--header-height) +
            45px
        );

    max-width: 470px;
}


.about-section-number {
    display: block;

    margin-bottom: 16px;

    color:
        rgba(219, 193, 125, 0.24);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(
            48px,
            6vw,
            74px
        );

    line-height: 1;
}


.about-philosophy-heading h2 {
    margin:
        0
        0
        24px;

    font-size:
        clamp(
            38px,
            5vw,
            58px
        );

    font-weight: 500;

    line-height: 1.08;

    letter-spacing: -0.028em;

    text-wrap: balance;
}


.about-philosophy-heading > p:last-child {
    margin: 0;

    color: var(--color-text-muted);

    font-size: 17px;

    line-height: 1.8;
}


.about-philosophy-list {
    border-top:
        1px solid
        rgba(219, 193, 125, 0.23);
}


.about-philosophy-entry {
    display: grid;

    grid-template-columns:
        70px
        minmax(0, 1fr);

    gap: 25px;

    padding:
        34px
        0;

    border-bottom:
        1px solid
        rgba(219, 193, 125, 0.17);
}


.about-philosophy-symbol {
    width: 52px;
    height: 52px;

    display: grid;
    place-items: center;

    border:
        1px solid
        rgba(219, 193, 125, 0.29);

    border-radius: 50%;

    color: var(--color-gold-light);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 17px;
}


.about-philosophy-entry h3 {
    margin:
        0
        0
        10px;

    font-size:
        clamp(
            23px,
            2.5vw,
            30px
        );

    font-weight: 500;

    line-height: 1.24;
}


.about-philosophy-entry p {
    margin: 0;

    color: var(--color-text-muted);

    font-size: 15px;

    line-height: 1.75;
}


/*
|--------------------------------------------------------------------------
| Roleplay & Immersion
|--------------------------------------------------------------------------
*/

.about-roleplay {
    position: relative;

    padding:
        clamp(95px, 10vw, 145px)
        0;

    background:
        linear-gradient(
            180deg,
            #190c20,
            #110814
        );

    border-bottom:
        1px solid
        rgba(219, 193, 125, 0.10);
}


.about-roleplay-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.2fr)
        minmax(300px, 0.8fr);

    gap:
        clamp(
            60px,
            8vw,
            100px
        );

    align-items: center;
}


.about-roleplay-copy {
    max-width: 680px;
}


.about-roleplay-copy h2 {
    margin:
        0
        0
        25px;

    font-size:
        clamp(
            38px,
            5vw,
            58px
        );

    font-weight: 500;

    line-height: 1.08;

    letter-spacing: -0.028em;

    text-wrap: balance;
}


.about-roleplay-copy p {
    margin:
        0
        0
        22px;

    color: var(--color-text-muted);

    font-size: 16px;

    line-height: 1.82;
}


.about-roleplay-note {
    position: relative;

    padding:
        45px
        38px;

    border:
        1px solid
        rgba(219, 193, 125, 0.28);

    background:
        linear-gradient(
            145deg,
            rgba(68, 30, 79, 0.28),
            rgba(15, 6, 20, 0.88)
        );

    text-align: center;
}


.about-roleplay-note-mark {
    width: 50px;
    height: 50px;

    display: grid;
    place-items: center;

    margin:
        0
        auto
        22px;

    border:
        1px solid
        rgba(219, 193, 125, 0.34);

    border-radius: 50%;

    color: var(--color-gold-light);

    font-size: 18px;
}


.about-roleplay-note blockquote {
    margin: 0;
}


.about-roleplay-note blockquote p {
    margin: 0;

    color: var(--color-text);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(
            22px,
            2.4vw,
            30px
        );

    line-height: 1.48;
}


.about-roleplay-note > span {
    display: block;

    margin-top: 24px;

    color: var(--color-gold);

    font-size: 11px;

    letter-spacing: 0.17em;

    text-transform: uppercase;
}


/*
|--------------------------------------------------------------------------
| Future / Path Section
|--------------------------------------------------------------------------
*/

.about-future {
    position: relative;

    padding:
        clamp(95px, 10vw, 145px)
        0;

    background:
        radial-gradient(
            circle at center,
            rgba(81, 40, 95, 0.18),
            transparent 58%
        ),
        linear-gradient(
            180deg,
            #110814,
            #180b1f
        );

    border-bottom:
        1px solid
        rgba(219, 193, 125, 0.10);
}


.about-future .about-section-heading {
    margin-bottom: 75px;
}


.about-future .ornamental-rule {
    max-width: 350px;

    margin:
        28px
        auto;
}


.about-future-path {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        90px
        minmax(0, 1fr)
        90px
        minmax(0, 1fr);

    align-items: center;

    max-width: 1080px;

    margin:
        0
        auto;
}


.about-future-path article {
    text-align: center;
}


.about-future-path article > span {
    display: block;

    margin-bottom: 16px;

    color:
        rgba(219, 193, 125, 0.31);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 40px;
}


.about-future-path h3 {
    margin:
        0
        0
        12px;

    font-size:
        clamp(
            24px,
            2.5vw,
            31px
        );

    font-weight: 500;
}


.about-future-path p {
    margin: 0;

    color: var(--color-text-muted);

    font-size: 14px;

    line-height: 1.72;
}


.about-path-line {
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(219, 193, 125, 0.30),
            transparent
        );
}


/*
|--------------------------------------------------------------------------
| About Closing
|--------------------------------------------------------------------------
*/

.about-closing {
    position: relative;

    overflow: hidden;

    padding:
        clamp(95px, 10vw, 145px)
        0;

    background:
        radial-gradient(
            circle at center,
            rgba(81, 40, 95, 0.24),
            transparent 54%
        ),
        #100713;
}


.about-closing::before {
    content: "BLACKTHORNE";

    position: absolute;

    left: 50%;
    top: 50%;

    transform:
        translate(
            -50%,
            -50%
        );

    color:
        rgba(219, 193, 125, 0.017);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(
            95px,
            15vw,
            210px
        );

    white-space: nowrap;

    letter-spacing: 0.04em;

    pointer-events: none;
}


.about-closing-frame {
    position: relative;

    z-index: 2;

    max-width: 850px;

    margin:
        0
        auto;

    padding:
        clamp(
            48px,
            6vw,
            72px
        );

    border:
        1px solid
        rgba(219, 193, 125, 0.27);

    text-align: center;

    background:
        linear-gradient(
            145deg,
            rgba(62, 29, 73, 0.24),
            rgba(17, 7, 22, 0.78)
        );

    box-shadow:
        inset
        0 0 0 6px
        rgba(255, 255, 255, 0.012);
}


.about-closing-crest {
    width: 130px;
    height: 130px;

    margin-bottom: 22px;

    object-fit: contain;
}


.about-closing-frame h2 {
    max-width: 700px;

    margin:
        0
        auto
        24px;

    font-size:
        clamp(
            37px,
            5vw,
            58px
        );

    font-weight: 500;

    line-height: 1.08;

    letter-spacing: -0.027em;

    text-wrap: balance;
}


.about-closing-frame p {
    margin:
        0
        auto
        10px;

    color: var(--color-text-muted);

    font-size: 17px;

    line-height: 1.75;
}


/*
|--------------------------------------------------------------------------
| About Admissions
|--------------------------------------------------------------------------
*/

.about-admissions {
    border-top:
        1px solid
        rgba(219, 193, 125, 0.08);
}


/*
|--------------------------------------------------------------------------
| Anchor Offset
|--------------------------------------------------------------------------
*/

#about-blackthorne {
    scroll-margin-top:
        calc(
            var(--header-height) +
            20px
        );
}


/*
|--------------------------------------------------------------------------
| Tablet
|--------------------------------------------------------------------------
*/

@media (max-width: 1000px) {

    .about-hero {
        min-height: auto;

        background-position:
            center,
            center,
            60% center;
    }


    .about-introduction-grid,
    .about-philosophy .section-inner,
    .about-roleplay-grid {
        grid-template-columns: 1fr;

        gap: 55px;
    }


    .about-philosophy-heading {
        position: static;

        max-width: 720px;
    }


    .about-arrival-frame {
        grid-template-columns: 1fr;

        gap: 28px;
    }


    .about-arrival-mark {
        justify-content: flex-start;
    }


    .about-arrival-mark img {
        width: 100px;
        height: 100px;
    }


    .about-worlds-layout {
        grid-template-columns: 1fr;

        gap: 30px;
    }


    .about-world-divider {
        grid-template-columns:
            1fr
            auto
            1fr;

        grid-template-rows: 1fr;

        gap: 18px;
    }


    .about-world-divider span {
        width: 100%;
        height: 1px;

        background:
            linear-gradient(
                90deg,
                transparent,
                rgba(219, 193, 125, 0.30),
                transparent
            );
    }


    .about-future-path {
        grid-template-columns: 1fr;

        gap: 25px;
    }


    .about-path-line {
        width: 1px;
        height: 42px;

        margin:
            0
            auto;

        background:
            linear-gradient(
                180deg,
                transparent,
                rgba(219, 193, 125, 0.30),
                transparent
            );
    }

}


/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 640px) {

    .about-hero {
        min-height: auto;

        padding:
            72px
            0
            84px;

        background-image:
            linear-gradient(
                90deg,
                rgba(9, 4, 12, 0.95) 0%,
                rgba(13, 6, 17, 0.88) 48%,
                rgba(11, 5, 15, 0.66) 100%
            ),
            linear-gradient(
                180deg,
                rgba(16, 8, 21, 0.15),
                rgba(9, 4, 12, 0.74)
            ),
            image-set(
                url("../images/about_hero_bg.webp") type("image/webp"),
                url("../images/about_hero_bg.png") type("image/png")
            );

        background-position:
            center,
            center,
            67% center;
    }


    .about-hero::before {
        inset: 12px;
    }


    .about-hero::after {
        display: none;
    }


    .about-hero .hero-ornament {
        width: 38px;
        height: 38px;
    }


    .about-hero .hero-ornament-left {
        top: 24px;
        left: 24px;
    }


    .about-hero .hero-ornament-right {
        right: 24px;
        bottom: 24px;
    }


    .about-hero-copy {
        padding-inline: 20px;
    }


    .about-hero h1 {
        font-size:
            clamp(
                42px,
                12.5vw,
                58px
            );
    }


    .about-hero-intro {
        font-size: 16px;

        line-height: 1.72;
    }


    .about-introduction,
    .about-two-worlds,
    .about-philosophy,
    .about-roleplay,
    .about-future,
    .about-closing,
    .about-arrival {
        padding:
            76px
            0;
    }


    .about-introduction-grid,
    .about-philosophy .section-inner,
    .about-roleplay-grid {
        gap: 42px;
    }


    .about-introduction-heading h2,
    .about-philosophy-heading h2,
    .about-roleplay-copy h2,
    .about-section-heading h2,
    .about-closing-frame h2 {
        font-size:
            clamp(
                33px,
                10vw,
                45px
            );
    }


    .about-arrival-frame {
        padding:
            36px
            25px;
    }


    .about-arrival-content h2 {
        font-size:
            clamp(
                34px,
                10vw,
                46px
            );
    }


    .about-rp-prose p {
        font-size: 16px;

        line-height: 1.82;
    }


    .about-world {
        padding:
            34px
            26px;
    }


    .about-world-number {
        font-size: 46px;
    }


    .about-philosophy-entry {
        grid-template-columns:
            56px
            minmax(0, 1fr);

        gap: 18px;
    }


    .about-philosophy-symbol {
        width: 46px;
        height: 46px;
    }


    .about-roleplay-note {
        padding:
            36px
            25px;
    }


    .about-future .about-section-heading {
        margin-bottom: 55px;
    }


    .about-closing::before {
        display: none;
    }


    .about-closing-frame {
        padding:
            40px
            26px;
    }


    .about-closing-crest {
        width: 110px;
        height: 110px;
    }

}


/*
|--------------------------------------------------------------------------
| Small Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 420px) {

    .about-hero-copy {
        padding-inline: 16px;
    }


    .about-hero h1 {
        font-size:
            clamp(
                39px,
                12vw,
                50px
            );
    }


    .about-arrival-frame {
        padding:
            32px
            21px;
    }


    .about-arrival-mark img {
        width: 88px;
        height: 88px;
    }


    .about-world {
        padding:
            30px
            22px;
    }


    .about-philosophy-entry {
        grid-template-columns: 1fr;

        gap: 15px;
    }


    .about-roleplay-note {
        padding:
            32px
            22px;
    }


    .about-closing-frame {
        padding:
            35px
            22px;
    }

}

/*
|--------------------------------------------------------------------------
| About Page Alignment Refinements
|--------------------------------------------------------------------------
*/


/*
|--------------------------------------------------------------------------
| In-Character Introduction
|--------------------------------------------------------------------------
|
| Center the crest above the eyebrow/title and center the entire
| in-character presentation.
|
*/

.about-arrival-frame {
    display: block;

    max-width: 1000px;

    text-align: center;
}


.about-arrival-mark {
    display: flex;
    justify-content: center;

    margin-bottom: 28px;
}


.about-arrival-mark img {
    display: block;

    margin:
        0
        auto;
}


.about-arrival-content {
    max-width: 780px;

    margin:
        0
        auto;
}


.about-arrival-content .academy-overline {
    text-align: center;
}


.about-arrival-content h2 {
    text-align: center;
}


.about-arrival-content .ornamental-rule {
    margin:
        28px
        auto
        32px;
}


.about-rp-prose {
    max-width: 720px;

    margin:
        0
        auto;

    text-align: center;
}


.about-arrival-signature {
    text-align: center;
}


/*
|--------------------------------------------------------------------------
| Future Path Title Alignment
|--------------------------------------------------------------------------
|
| "A Place in Blackthorne" wraps to two lines.
| Give all three title areas the same height so the descriptions line up
| instead of the third entry appearing lower than the first two.
|
*/

.about-future-path h3 {
    min-height: 2.6em;

    display: flex;
    align-items: center;
    justify-content: center;

    margin:
        0
        0
        12px;

    text-align: center;
}


.about-future-path article {
    display: flex;
    flex-direction: column;
    align-items: center;

    height: 100%;
}


.about-future-path article > span {
    flex: 0 0 auto;
}


.about-future-path article p {
    max-width: 290px;

    margin:
        0
        auto;
}


/*
|--------------------------------------------------------------------------
| Closing Crest Alignment
|--------------------------------------------------------------------------
|
| Ensure the Blackthorne crest is centered directly above the closing text.
|
*/

.about-closing-crest {
    display: block;

    margin:
        0
        auto
        22px;
}

/*
|--------------------------------------------------------------------------
| About RP Introduction Actions
|--------------------------------------------------------------------------
*/

.about-arrival-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;

    gap: 14px;

    margin-top: 26px;
}


.about-arrival-actions .button {
    min-width: 150px;
}


/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 480px) {

    .about-arrival-actions {
        flex-direction: column;

        align-items: stretch;
    }


    .about-arrival-actions .button {
        width: 100%;
    }

}

/*
|--------------------------------------------------------------------------
| Contact Page
|--------------------------------------------------------------------------
*/


/*
|--------------------------------------------------------------------------
| Contact Hero
|--------------------------------------------------------------------------
*/

.contact-hero {
    position: relative;

    overflow: hidden;

    min-height:
        calc(
            100vh -
            var(--header-height)
        );

    display: flex;
    align-items: center;

    padding:
        clamp(95px, 10vw, 150px)
        0
        clamp(100px, 11vw, 160px);

    background-image:
        linear-gradient(
            90deg,
            rgba(10, 5, 14, 0.97) 0%,
            rgba(14, 7, 19, 0.92) 29%,
            rgba(16, 8, 22, 0.76) 54%,
            rgba(12, 6, 17, 0.46) 76%,
            rgba(8, 4, 11, 0.26) 100%
        ),
        linear-gradient(
            180deg,
            rgba(15, 7, 20, 0.08) 0%,
            rgba(10, 5, 14, 0.26) 68%,
            rgba(9, 4, 12, 0.80) 100%
        ),
        image-set(
            url("../images/contact_hero_bg.webp") type("image/webp"),
            url("../images/contact_hero_bg.png") type("image/png")
        );

    background-size:
        cover,
        cover,
        cover;

    background-position:
        center,
        center,
        center;

    background-repeat:
        no-repeat;

    border-bottom:
        1px solid
        rgba(219, 193, 125, 0.17);
}


.contact-hero::before {
    content: "";

    position: absolute;

    inset: 24px;

    border:
        1px solid
        rgba(219, 193, 125, 0.08);

    pointer-events: none;
}


.contact-hero::after {
    content: "B";

    position: absolute;

    left: -45px;
    bottom: -205px;

    color:
        rgba(219, 193, 125, 0.022);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 640px;
    font-weight: 700;

    line-height: 1;

    pointer-events: none;
}


.contact-hero .hero-ornament {
    position: absolute;

    z-index: 1;

    width: 70px;
    height: 70px;

    opacity: 0.44;

    pointer-events: none;
}


.contact-hero .hero-ornament-left {
    top: 44px;
    left: 44px;

    border-top:
        1px solid
        var(--color-gold-dark);

    border-left:
        1px solid
        var(--color-gold-dark);
}


.contact-hero .hero-ornament-right {
    right: 44px;
    bottom: 44px;

    border-right:
        1px solid
        var(--color-gold-dark);

    border-bottom:
        1px solid
        var(--color-gold-dark);
}


.contact-hero-inner {
    position: relative;

    z-index: 2;
}


.contact-hero-copy {
    max-width: 780px;
}


.contact-hero h1 {
    max-width: 780px;

    margin:
        0
        0
        29px;

    font-size:
        clamp(
            50px,
            6.8vw,
            86px
        );

    font-weight: 500;

    line-height: 0.99;

    letter-spacing: -0.035em;

    text-wrap: balance;
}


.contact-hero-intro {
    max-width: 690px;

    margin:
        0
        0
        34px;

    color: var(--color-text-muted);

    font-size:
        clamp(
            17px,
            2vw,
            20px
        );

    line-height: 1.76;
}


/*
|--------------------------------------------------------------------------
| Contact Introduction
|--------------------------------------------------------------------------
*/

.contact-introduction {
    position: relative;

    padding:
        clamp(85px, 9vw, 125px)
        0;

    background:
        linear-gradient(
            180deg,
            #180b1e,
            #120817
        );

    border-bottom:
        1px solid
        rgba(219, 193, 125, 0.10);
}


.contact-section-heading {
    max-width: 800px;
}


.contact-section-heading-centered {
    margin:
        0
        auto;

    text-align: center;
}


.contact-section-heading h2 {
    margin: 0;

    font-size:
        clamp(
            37px,
            5vw,
            58px
        );

    font-weight: 500;

    line-height: 1.08;

    letter-spacing: -0.027em;

    text-wrap: balance;
}


.contact-section-heading .ornamental-rule {
    max-width: 350px;

    margin:
        28px
        auto;
}


.contact-section-heading > p:last-child {
    max-width: 720px;

    margin:
        0
        auto;

    color: var(--color-text-muted);

    font-size: 17px;

    line-height: 1.82;
}


/*
|--------------------------------------------------------------------------
| Contact Routes
|--------------------------------------------------------------------------
*/

.contact-routes {
    position: relative;

    padding:
        clamp(90px, 10vw, 140px)
        0;

    background:
        radial-gradient(
            circle at 15% 35%,
            rgba(81, 40, 95, 0.16),
            transparent 35%
        ),
        linear-gradient(
            180deg,
            #110814,
            #190c20
        );

    border-bottom:
        1px solid
        rgba(219, 193, 125, 0.10);
}


.contact-routes .section-inner {
    display: grid;

    grid-template-columns:
        minmax(0, 0.75fr)
        minmax(0, 1.25fr);

    gap:
        clamp(
            70px,
            9vw,
            125px
        );

    align-items: start;
}


.contact-routes-heading {
    position: sticky;

    top:
        calc(
            var(--header-height) +
            45px
        );

    max-width: 450px;
}


.contact-routes-heading h2 {
    margin: 0;

    font-size:
        clamp(
            38px,
            5vw,
            58px
        );

    font-weight: 500;

    line-height: 1.08;

    letter-spacing: -0.028em;

    text-wrap: balance;
}


.contact-route-list {
    border-top:
        1px solid
        rgba(219, 193, 125, 0.24);
}


.contact-route {
    position: relative;

    display: grid;

    grid-template-columns:
        55px
        minmax(0, 1fr)
        34px;

    gap: 22px;

    align-items: center;

    padding:
        31px
        0;

    color: inherit;

    text-decoration: none;

    border-bottom:
        1px solid
        rgba(219, 193, 125, 0.18);

    transition:
        background var(--transition),
        padding-left var(--transition);
}


.contact-route:hover {
    padding-left: 12px;

    background:
        linear-gradient(
            90deg,
            rgba(196, 161, 90, 0.045),
            transparent
        );
}


.contact-route-number {
    color:
        rgba(219, 193, 125, 0.30);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 34px;

    line-height: 1;
}


.contact-route h3 {
    margin:
        0
        0
        8px;

    color: var(--color-text);

    font-size:
        clamp(
            21px,
            2.2vw,
            28px
        );

    font-weight: 500;

    line-height: 1.25;
}


.contact-route p {
    margin: 0;

    color: var(--color-text-muted);

    font-size: 15px;

    line-height: 1.72;
}


.contact-route-arrow {
    color: var(--color-gold-light);

    font-size: 24px;

    transition:
        transform var(--transition);
}


.contact-route:hover .contact-route-arrow {
    transform: translateX(4px);
}


/*
|--------------------------------------------------------------------------
| Correspondence Section
|--------------------------------------------------------------------------
*/

.contact-correspondence {
    position: relative;

    padding:
        clamp(95px, 11vw, 155px)
        0;

    background:
        radial-gradient(
            circle at 75% 20%,
            rgba(81, 40, 95, 0.18),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            #180b1f,
            #100713
        );

    border-bottom:
        1px solid
        rgba(219, 193, 125, 0.10);
}


.contact-correspondence-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.3fr)
        minmax(300px, 0.7fr);

    gap:
        clamp(
            55px,
            8vw,
            100px
        );

    align-items: start;
}


/*
|--------------------------------------------------------------------------
| Form Panel
|--------------------------------------------------------------------------
*/

.contact-form-panel {
    position: relative;

    padding:
        clamp(
            36px,
            5vw,
            58px
        );

    border:
        1px solid
        rgba(219, 193, 125, 0.26);

    background:
        linear-gradient(
            145deg,
            rgba(59, 27, 70, 0.28),
            rgba(16, 7, 21, 0.90)
        );

    box-shadow:
        inset
        0 0 0 5px
        rgba(255, 255, 255, 0.010),
        0 24px 70px
        rgba(0, 0, 0, 0.20);
}


.contact-form-panel::before,
.contact-form-panel::after {
    content: "✦";

    position: absolute;

    color:
        rgba(219, 193, 125, 0.42);

    font-size: 12px;
}


.contact-form-panel::before {
    top: 13px;
    left: 15px;
}


.contact-form-panel::after {
    right: 15px;
    bottom: 13px;
}


.contact-form-heading {
    margin-bottom: 34px;
}


.contact-form-heading h2 {
    margin:
        0
        0
        13px;

    font-size:
        clamp(
            38px,
            5vw,
            56px
        );

    font-weight: 500;

    line-height: 1.08;

    letter-spacing: -0.028em;
}


.contact-form-heading > p:last-child {
    margin: 0;

    color: var(--color-text-muted);

    font-size: 14px;
}


/*
|--------------------------------------------------------------------------
| Form Layout
|--------------------------------------------------------------------------
*/

.contact-form {
    position: relative;
}


.contact-form-row {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 20px;
}


.contact-form .form-field {
    margin-bottom: 24px;
}


.contact-form label {
    display: block;

    margin-bottom: 9px;

    color: var(--color-text);

    font-size: 14px;
    font-weight: 600;
}


.required-marker {
    color: var(--color-gold-light);
}


.field-optional {
    margin-left: 6px;

    color: var(--color-text-muted);

    font-size: 11px;
    font-weight: 400;

    text-transform: uppercase;

    letter-spacing: 0.08em;
}


.contact-form input,
.contact-form select,
.contact-form textarea {
    width: 100%;

    border:
        1px solid
        rgba(219, 193, 125, 0.22);

    border-radius: 4px;

    background:
        rgba(7, 3, 10, 0.55);

    color: var(--color-text);

    font: inherit;

    transition:
        border-color var(--transition),
        box-shadow var(--transition),
        background var(--transition);
}


.contact-form input,
.contact-form select {
    min-height: 48px;

    padding:
        0
        14px;
}


.contact-form textarea {
    min-height: 210px;

    padding: 14px;

    resize: vertical;

    line-height: 1.65;
}


.contact-form select {
    cursor: pointer;
}


.contact-form option {
    background: #16091b;

    color: var(--color-text);
}


.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
    outline: none;

    border-color: var(--color-gold);

    background:
        rgba(13, 6, 17, 0.72);

    box-shadow:
        0 0 0 3px
        rgba(196, 161, 90, 0.10);
}


.field-help,
.field-meta small {
    display: block;

    margin-top: 8px;

    color: var(--color-text-muted);

    font-size: 12px;

    line-height: 1.55;
}


/*
|--------------------------------------------------------------------------
| Honeypot
|--------------------------------------------------------------------------
*/

.contact-honeypot {
    position: absolute !important;

    left: -9999px !important;

    width: 1px !important;
    height: 1px !important;

    overflow: hidden !important;

    opacity: 0 !important;

    pointer-events: none !important;
}


/*
|--------------------------------------------------------------------------
| Contact Form Notice
|--------------------------------------------------------------------------
*/

.contact-form-notice {
    display: grid;

    grid-template-columns:
        40px
        minmax(0, 1fr);

    gap: 16px;

    align-items: start;

    margin-top: 8px;

    padding:
        18px
        20px;

    border:
        1px solid
        rgba(219, 193, 125, 0.18);

    background:
        rgba(196, 161, 90, 0.045);
}


.contact-notice-icon {
    width: 34px;
    height: 34px;

    display: grid;
    place-items: center;

    border:
        1px solid
        rgba(219, 193, 125, 0.30);

    border-radius: 50%;

    color: var(--color-gold-light);
}


.contact-form-notice p {
    margin: 0;

    color: var(--color-text-muted);

    font-size: 13px;

    line-height: 1.65;
}


.contact-form-notice strong {
    color: var(--color-text);
}


/*
|--------------------------------------------------------------------------
| Contact Form Actions
|--------------------------------------------------------------------------
*/

.contact-form-actions {
    margin-top: 28px;
}


.contact-form-actions p {
    max-width: 540px;

    margin:
        14px
        0
        0;

    color: var(--color-text-muted);

    font-size: 12px;

    line-height: 1.6;
}


/*
|--------------------------------------------------------------------------
| Guidance Panel
|--------------------------------------------------------------------------
*/

.contact-guidance {
    position: sticky;

    top:
        calc(
            var(--header-height) +
            35px
        );
}


.contact-guidance-inner {
    position: relative;

    padding:
        40px
        30px;

    border:
        1px solid
        rgba(219, 193, 125, 0.24);

    text-align: center;

    background:
        linear-gradient(
            145deg,
            rgba(52, 24, 62, 0.28),
            rgba(13, 5, 17, 0.88)
        );
}


.contact-guidance-crest {
    display: block;

    width: 100px;
    height: 100px;

    margin:
        0
        auto
        20px;

    object-fit: contain;
}


.contact-guidance-inner h2 {
    margin:
        0;

    font-size:
        clamp(
            30px,
            3.5vw,
            42px
        );

    font-weight: 500;

    line-height: 1.12;

    letter-spacing: -0.025em;
}


.contact-guidance-inner .ornamental-rule {
    max-width: 250px;

    margin:
        24px
        auto
        28px;
}


/*
|--------------------------------------------------------------------------
| Guidance List
|--------------------------------------------------------------------------
*/

.contact-guidance-list {
    text-align: left;
}


.contact-guidance-list section {
    display: grid;

    grid-template-columns:
        38px
        minmax(0, 1fr);

    gap: 14px;

    padding:
        21px
        0;

    border-top:
        1px solid
        rgba(219, 193, 125, 0.14);
}


.contact-guidance-list section > span {
    width: 32px;
    height: 32px;

    display: grid;
    place-items: center;

    border:
        1px solid
        rgba(219, 193, 125, 0.26);

    border-radius: 50%;

    color: var(--color-gold-light);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 12px;
}


.contact-guidance-list h3 {
    margin:
        0
        0
        6px;

    font-size: 17px;

    font-weight: 500;

    line-height: 1.35;
}


.contact-guidance-list p {
    margin: 0;

    color: var(--color-text-muted);

    font-size: 13px;

    line-height: 1.65;
}


.contact-guidance-actions {
    display: flex;

    justify-content: center;
    flex-wrap: wrap;

    gap: 12px;

    margin-top: 28px;
}


.contact-guidance-actions .button {
    min-width: 120px;
}


/*
|--------------------------------------------------------------------------
| Safety Section
|--------------------------------------------------------------------------
*/

.contact-safety {
    position: relative;

    padding:
        clamp(80px, 9vw, 120px)
        0;

    background:
        linear-gradient(
            180deg,
            #180b1f,
            #120817
        );

    border-bottom:
        1px solid
        rgba(219, 193, 125, 0.10);
}


.contact-safety-frame {
    display: grid;

    grid-template-columns:
        70px
        minmax(0, 1fr)
        auto;

    gap: 28px;

    align-items: center;

    padding:
        clamp(
            30px,
            4vw,
            45px
        );

    border:
        1px solid
        rgba(219, 193, 125, 0.24);

    background:
        linear-gradient(
            135deg,
            rgba(83, 32, 43, 0.12),
            rgba(24, 9, 29, 0.68)
        );
}


.contact-safety-symbol {
    width: 58px;
    height: 58px;

    display: grid;
    place-items: center;

    border:
        1px solid
        rgba(219, 193, 125, 0.35);

    border-radius: 50%;

    color: var(--color-gold-light);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 30px;
}


.contact-safety-frame h2 {
    margin:
        0
        0
        12px;

    font-size:
        clamp(
            28px,
            3.6vw,
            42px
        );

    font-weight: 500;

    line-height: 1.15;

    text-wrap: balance;
}


.contact-safety-frame p {
    max-width: 750px;

    margin: 0;

    color: var(--color-text-muted);

    font-size: 15px;

    line-height: 1.74;
}


.contact-safety-frame strong {
    color: var(--color-text);
}


/*
|--------------------------------------------------------------------------
| Closing Section
|--------------------------------------------------------------------------
*/

.contact-closing {
    position: relative;

    overflow: hidden;

    padding:
        clamp(90px, 10vw, 140px)
        0;

    background:
        radial-gradient(
            circle at center,
            rgba(81, 40, 95, 0.23),
            transparent 54%
        ),
        #100713;
}


.contact-closing::before {
    content: "CORRESPONDENCE";

    position: absolute;

    left: 50%;
    top: 50%;

    transform:
        translate(
            -50%,
            -50%
        );

    color:
        rgba(219, 193, 125, 0.015);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(
            82px,
            13vw,
            180px
        );

    white-space: nowrap;

    letter-spacing: 0.04em;

    pointer-events: none;
}


.contact-closing-frame {
    position: relative;

    z-index: 2;

    max-width: 820px;

    margin:
        0
        auto;

    padding:
        clamp(
            42px,
            6vw,
            68px
        );

    border:
        1px solid
        rgba(219, 193, 125, 0.27);

    text-align: center;

    background:
        linear-gradient(
            145deg,
            rgba(62, 29, 73, 0.24),
            rgba(17, 7, 22, 0.80)
        );
}


.contact-closing-frame h2 {
    max-width: 680px;

    margin:
        0
        auto;

    font-size:
        clamp(
            36px,
            5vw,
            57px
        );

    font-weight: 500;

    line-height: 1.08;

    letter-spacing: -0.027em;

    text-wrap: balance;
}


.contact-closing-frame .ornamental-rule {
    max-width: 330px;

    margin:
        27px
        auto;
}


.contact-closing-frame > p:last-child {
    max-width: 650px;

    margin:
        0
        auto;

    color: var(--color-text-muted);

    font-size: 17px;

    line-height: 1.82;
}


/*
|--------------------------------------------------------------------------
| Anchor Offset
|--------------------------------------------------------------------------
*/

#contact-form {
    scroll-margin-top:
        calc(
            var(--header-height) +
            20px
        );
}


/*
|--------------------------------------------------------------------------
| Tablet
|--------------------------------------------------------------------------
*/

@media (max-width: 1000px) {

    .contact-hero {
        min-height: auto;

        background-position:
            center,
            center,
            58% center;
    }


    .contact-routes .section-inner,
    .contact-correspondence-grid {
        grid-template-columns: 1fr;

        gap: 55px;
    }


    .contact-routes-heading,
    .contact-guidance {
        position: static;
    }


    .contact-routes-heading {
        max-width: 700px;
    }


    .contact-guidance-inner {
        max-width: 720px;

        margin:
            0
            auto;
    }


    .contact-safety-frame {
        grid-template-columns:
            70px
            minmax(0, 1fr);

        align-items: start;
    }


    .contact-safety-action {
        grid-column:
            2;
    }

}


/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 640px) {

    .contact-hero {
        min-height: auto;

        padding:
            72px
            0
            84px;

        background-image:
            linear-gradient(
                90deg,
                rgba(9, 4, 12, 0.96) 0%,
                rgba(13, 6, 17, 0.89) 48%,
                rgba(11, 5, 15, 0.68) 100%
            ),
            linear-gradient(
                180deg,
                rgba(16, 8, 21, 0.15),
                rgba(9, 4, 12, 0.76)
            ),
            image-set(
                url("../images/contact_hero_bg.webp") type("image/webp"),
                url("../images/contact_hero_bg.png") type("image/png")
            );

        background-position:
            center,
            center,
            67% center;
    }


    .contact-hero::before {
        inset: 12px;
    }


    .contact-hero::after {
        display: none;
    }


    .contact-hero .hero-ornament {
        width: 38px;
        height: 38px;
    }


    .contact-hero .hero-ornament-left {
        top: 24px;
        left: 24px;
    }


    .contact-hero .hero-ornament-right {
        right: 24px;
        bottom: 24px;
    }


    .contact-hero-copy {
        padding-inline: 20px;
    }


    .contact-hero h1 {
        font-size:
            clamp(
                42px,
                12.5vw,
                58px
            );
    }


    .contact-hero-intro {
        font-size: 16px;

        line-height: 1.72;
    }


    .contact-introduction,
    .contact-routes,
    .contact-correspondence,
    .contact-safety,
    .contact-closing {
        padding:
            76px
            0;
    }


    .contact-section-heading h2,
    .contact-routes-heading h2,
    .contact-form-heading h2,
    .contact-closing-frame h2 {
        font-size:
            clamp(
                33px,
                10vw,
                45px
            );
    }


    .contact-route {
        grid-template-columns:
            44px
            minmax(0, 1fr)
            24px;

        gap: 14px;

        padding:
            26px
            0;
    }


    .contact-route-number {
        font-size: 29px;
    }


    .contact-route h3 {
        font-size: 21px;
    }


    .contact-route p {
        font-size: 14px;
    }


    .contact-form-panel {
        padding:
            34px
            24px;
    }


    .contact-form-row {
        grid-template-columns: 1fr;
    }


    .contact-form-notice {
        grid-template-columns: 1fr;

        gap: 12px;
    }


    .contact-guidance-inner {
        padding:
            34px
            24px;
    }


    .contact-safety-frame {
        grid-template-columns: 1fr;

        gap: 20px;
    }


    .contact-safety-action {
        grid-column: auto;
    }


    .contact-safety-symbol {
        width: 52px;
        height: 52px;
    }


    .contact-closing::before {
        display: none;
    }


    .contact-closing-frame {
        padding:
            38px
            25px;
    }

}


/*
|--------------------------------------------------------------------------
| Small Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 420px) {

    .contact-hero-copy {
        padding-inline: 16px;
    }


    .contact-hero h1 {
        font-size:
            clamp(
                39px,
                12vw,
                50px
            );
    }


    .contact-route {
        grid-template-columns:
            38px
            minmax(0, 1fr);
    }


    .contact-route-arrow {
        display: none;
    }


    .contact-form-panel {
        padding:
            30px
            20px;
    }


    .contact-guidance-inner {
        padding:
            30px
            20px;
    }


    .contact-guidance-actions {
        flex-direction: column;

        align-items: stretch;
    }


    .contact-guidance-actions .button {
        width: 100%;
    }


    .contact-closing-frame {
        padding:
            34px
            21px;
    }

}

/*
|--------------------------------------------------------------------------
| Login Page
|--------------------------------------------------------------------------
*/


/*
|--------------------------------------------------------------------------
| Login Hero
|--------------------------------------------------------------------------
*/

.login-hero {
    position: relative;

    overflow: hidden;

    min-height:
        calc(
            100vh -
            var(--header-height)
        );

    display: flex;
    align-items: center;

    padding:
        clamp(70px, 8vw, 110px)
        0;

    background-image:
        linear-gradient(
            90deg,
            rgba(9, 4, 12, 0.94) 0%,
            rgba(13, 6, 18, 0.86) 28%,
            rgba(14, 7, 19, 0.66) 50%,
            rgba(12, 6, 17, 0.48) 70%,
            rgba(8, 4, 11, 0.28) 100%
        ),
        linear-gradient(
            180deg,
            rgba(15, 7, 20, 0.08) 0%,
            rgba(10, 5, 14, 0.22) 65%,
            rgba(8, 4, 11, 0.72) 100%
        ),
        image-set(
            url("../images/login_hero_bg.webp") type("image/webp"),
            url("../images/login_hero_bg.png") type("image/png")
        );

    background-size:
        cover,
        cover,
        cover;

    background-position:
        center,
        center,
        center;

    background-repeat:
        no-repeat;

    border-bottom:
        1px solid
        rgba(219, 193, 125, 0.14);
}


.login-hero::before {
    content: "";

    position: absolute;

    inset: 24px;

    border:
        1px solid
        rgba(219, 193, 125, 0.08);

    pointer-events: none;
}


.login-hero::after {
    content: "B";

    position: absolute;

    left: -40px;
    bottom: -205px;

    color:
        rgba(219, 193, 125, 0.02);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 630px;
    font-weight: 700;

    line-height: 1;

    pointer-events: none;
}


/*
|--------------------------------------------------------------------------
| Hero Ornament Corners
|--------------------------------------------------------------------------
*/

.login-hero .hero-ornament {
    position: absolute;

    z-index: 1;

    width: 70px;
    height: 70px;

    opacity: 0.44;

    pointer-events: none;
}


.login-hero .hero-ornament-left {
    top: 44px;
    left: 44px;

    border-top:
        1px solid
        var(--color-gold-dark);

    border-left:
        1px solid
        var(--color-gold-dark);
}


.login-hero .hero-ornament-right {
    right: 44px;
    bottom: 44px;

    border-right:
        1px solid
        var(--color-gold-dark);

    border-bottom:
        1px solid
        var(--color-gold-dark);
}


/*
|--------------------------------------------------------------------------
| Hero Layout
|--------------------------------------------------------------------------
*/

.login-hero-inner {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(360px, 0.82fr);

    gap:
        clamp(
            60px,
            8vw,
            110px
        );

    align-items: center;
}


/*
|--------------------------------------------------------------------------
| Hero Copy
|--------------------------------------------------------------------------
*/

.login-hero-copy {
    max-width: 690px;
}


.login-hero h1 {
    max-width: 700px;

    margin:
        0
        0
        28px;

    font-size:
        clamp(
            52px,
            6.8vw,
            86px
        );

    font-weight: 500;

    line-height: 0.99;

    letter-spacing: -0.035em;

    text-wrap: balance;
}


.login-hero-intro {
    max-width: 650px;

    margin:
        0
        0
        34px;

    color: var(--color-text-muted);

    font-size:
        clamp(
            17px,
            2vw,
            20px
        );

    line-height: 1.76;
}


.login-hero-motto {
    display: flex;
    align-items: center;

    gap: 16px;
}


.login-hero-motto > span {
    width: 58px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            var(--color-gold-dark),
            var(--color-gold-light)
        );
}


.login-hero-motto p {
    margin: 0;

    color: var(--color-gold-light);

    font-size: 11px;

    letter-spacing: 0.17em;

    text-transform: uppercase;
}


/*
|--------------------------------------------------------------------------
| Login Panel
|--------------------------------------------------------------------------
*/

.login-page-panel {
    position: relative;

    width: 100%;
    max-width: 470px;

    justify-self: end;

    padding:
        clamp(
            34px,
            4.5vw,
            48px
        );

    border:
        1px solid
        rgba(219, 193, 125, 0.28);

    background:
        linear-gradient(
            145deg,
            rgba(44, 18, 53, 0.92),
            rgba(13, 5, 17, 0.94)
        );

    box-shadow:
        inset
        0 0 0 5px
        rgba(255, 255, 255, 0.01),
        0 28px 90px
        rgba(0, 0, 0, 0.36);
}


.login-page-panel::before,
.login-page-panel::after {
    content: "✦";

    position: absolute;

    color:
        rgba(219, 193, 125, 0.42);

    font-size: 12px;
}


.login-page-panel::before {
    top: 13px;
    left: 15px;
}


.login-page-panel::after {
    right: 15px;
    bottom: 13px;
}


/*
|--------------------------------------------------------------------------
| Crest
|--------------------------------------------------------------------------
*/

.login-page-crest {
    display: flex;
    justify-content: center;

    margin-bottom: 18px;
}


.login-page-crest img {
    display: block;

    width: 108px;
    height: 108px;

    object-fit: contain;
}


/*
|--------------------------------------------------------------------------
| Login Panel Heading
|--------------------------------------------------------------------------
*/

.login-page-panel-heading {
    text-align: center;
}


.login-eyebrow {
    margin:
        0
        0
        8px;

    color: var(--color-gold);

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 0.18em;

    text-transform: uppercase;
}


.login-page-panel-heading h2 {
    margin:
        0
        0
        9px;

    font-size:
        clamp(
            34px,
            4vw,
            46px
        );

    font-weight: 500;

    line-height: 1.08;

    letter-spacing: -0.025em;
}


.login-page-panel-heading > p:last-child {
    margin: 0;

    color: var(--color-text-muted);

    font-size: 14px;

    letter-spacing: 0.04em;
}


.login-page-panel .ornamental-rule {
    max-width: 270px;

    margin:
        24px
        auto
        28px;
}


/*
|--------------------------------------------------------------------------
| Temporary Notice
|--------------------------------------------------------------------------
*/

.login-page-notice {
    display: grid;

    grid-template-columns:
        34px
        minmax(0, 1fr);

    gap: 13px;

    align-items: start;

    margin-bottom: 24px;

    padding:
        14px
        16px;

    border:
        1px solid
        rgba(219, 193, 125, 0.18);

    background:
        rgba(196, 161, 90, 0.045);
}


.login-page-notice > span {
    width: 28px;
    height: 28px;

    display: grid;
    place-items: center;

    border:
        1px solid
        rgba(219, 193, 125, 0.28);

    border-radius: 50%;

    color: var(--color-gold-light);

    font-size: 11px;
}


.login-page-notice p {
    margin: 0;

    color: var(--color-text-muted);

    font-size: 13px;

    line-height: 1.6;
}


/*
|--------------------------------------------------------------------------
| Login Form
|--------------------------------------------------------------------------
*/

.login-page-form .form-group {
    margin-bottom: 21px;
}


.login-page-form label {
    display: block;

    margin-bottom: 8px;

    color: var(--color-text);

    font-size: 14px;
    font-weight: 600;
}


.login-page-form .form-control {
    width: 100%;
    min-height: 48px;

    padding:
        0
        14px;

    border:
        1px solid
        rgba(219, 193, 125, 0.22);

    border-radius: 4px;

    background:
        rgba(7, 3, 10, 0.58);

    color: var(--color-text);

    font: inherit;

    transition:
        border-color var(--transition),
        background var(--transition),
        box-shadow var(--transition);
}


.login-page-form .form-control:focus {
    outline: none;

    border-color: var(--color-gold);

    background:
        rgba(13, 6, 17, 0.72);

    box-shadow:
        0 0 0 3px
        rgba(196, 161, 90, 0.10);
}


/*
|--------------------------------------------------------------------------
| Password Field
|--------------------------------------------------------------------------
*/

.login-password-field {
    position: relative;
}


.login-password-field .form-control {
    padding-right: 76px;
}


.login-password-toggle {
    position: absolute;

    top: 50%;
    right: 10px;

    min-width: 54px;
    min-height: 34px;

    transform:
        translateY(-50%);

    border: 0;

    color: var(--color-gold-light);

    background: transparent;

    font: inherit;

    font-size: 12px;
    font-weight: 700;

    cursor: pointer;
}


.login-password-toggle:hover {
    color: var(--color-gold);
}


.login-password-toggle:focus-visible {
    outline:
        2px solid
        var(--color-gold);

    outline-offset: 2px;
}


.password-hide-text {
    display: none;
}


.login-password-toggle[aria-pressed="true"] .password-show-text {
    display: none;
}


.login-password-toggle[aria-pressed="true"] .password-hide-text {
    display: inline;
}


/*
|--------------------------------------------------------------------------
| Login Options
|--------------------------------------------------------------------------
*/

.login-page-options {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 18px;

    margin:
        4px
        0
        24px;
}


.login-page-options .remember-me {
    display: inline-flex;
    align-items: center;

    gap: 9px;

    margin: 0;

    color: var(--color-text-muted);

    font-size: 13px;
    font-weight: 400;

    cursor: pointer;
}


.login-page-options .remember-me input {
    width: 17px;
    height: 17px;

    accent-color: var(--color-gold);
}


.login-help-link {
    color: var(--color-gold-light);

    font-size: 13px;

    text-decoration: none;
}


.login-help-link:hover {
    text-decoration: underline;
}


/*
|--------------------------------------------------------------------------
| Submit
|--------------------------------------------------------------------------
*/

.login-page-submit {
    width: 100%;

    min-height: 50px;

    margin-top: 2px;
}


/*
|--------------------------------------------------------------------------
| Enrollment Link
|--------------------------------------------------------------------------
*/

.login-page-enrollment {
    margin-top: 24px;

    padding-top: 22px;

    border-top:
        1px solid
        rgba(219, 193, 125, 0.15);

    text-align: center;
}


.login-page-enrollment p {
    margin:
        0
        0
        5px;

    color: var(--color-text-muted);

    font-size: 13px;
}


.login-page-enrollment a {
    color: var(--color-gold-light);

    font-size: 14px;
    font-weight: 700;

    text-decoration: none;
}


.login-page-enrollment a:hover {
    text-decoration: underline;
}


/*
|--------------------------------------------------------------------------
| Security Note
|--------------------------------------------------------------------------
*/

.login-security-note {
    display: flex;

    align-items: flex-start;

    gap: 10px;

    margin-top: 22px;

    padding-top: 18px;

    border-top:
        1px solid
        rgba(219, 193, 125, 0.12);
}


.login-security-note > span {
    color: var(--color-gold-dark);

    font-size: 11px;

    line-height: 1.5;
}


.login-security-note p {
    margin: 0;

    color:
        rgba(
            201,
            191,
            202,
            0.70
        );

    font-size: 11px;

    line-height: 1.55;
}


/*
|--------------------------------------------------------------------------
| Autofill Handling
|--------------------------------------------------------------------------
*/

.login-page-form input:-webkit-autofill,
.login-page-form input:-webkit-autofill:hover,
.login-page-form input:-webkit-autofill:focus {
    -webkit-text-fill-color:
        var(--color-text);

    -webkit-box-shadow:
        0 0 0 1000px
        #100713
        inset;

    transition:
        background-color
        9999s
        ease-out;
}


/*
|--------------------------------------------------------------------------
| Tablet
|--------------------------------------------------------------------------
*/

@media (max-width: 980px) {

    .login-hero {
        min-height: auto;

        padding:
            75px
            0
            90px;

        background-position:
            center,
            center,
            55% center;
    }


    .login-hero-inner {
        grid-template-columns: 1fr;

        gap: 55px;
    }


    .login-hero-copy {
        max-width: 720px;
    }


    .login-page-panel {
        justify-self: center;

        max-width: 540px;
    }

}


/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 640px) {

    .login-hero {
        min-height: auto;

        padding:
            68px
            0
            78px;

        background-image:
            linear-gradient(
                90deg,
                rgba(8, 4, 11, 0.95) 0%,
                rgba(12, 5, 16, 0.89) 48%,
                rgba(10, 5, 14, 0.70) 100%
            ),
            linear-gradient(
                180deg,
                rgba(15, 7, 20, 0.16),
                rgba(8, 4, 11, 0.76)
            ),
            image-set(
                url("../images/login_hero_bg.webp") type("image/webp"),
                url("../images/login_hero_bg.png") type("image/png")
            );

        background-position:
            center,
            center,
            68% center;
    }


    .login-hero::before {
        inset: 12px;
    }


    .login-hero::after {
        display: none;
    }


    .login-hero .hero-ornament {
        width: 38px;
        height: 38px;
    }


    .login-hero .hero-ornament-left {
        top: 24px;
        left: 24px;
    }


    .login-hero .hero-ornament-right {
        right: 24px;
        bottom: 24px;
    }


    .login-hero-copy {
        padding-inline: 20px;
    }


    .login-hero h1 {
        font-size:
            clamp(
                42px,
                12.5vw,
                58px
            );

        line-height: 1;
    }


    .login-hero-intro {
        font-size: 16px;

        line-height: 1.72;
    }


    .login-hero-motto {
        align-items: flex-start;
    }


    .login-page-panel {
        max-width: none;

        padding:
            34px
            24px;

        margin-inline: 8px;
    }


    .login-page-crest img {
        width: 96px;
        height: 96px;
    }


    .login-page-panel-heading h2 {
        font-size:
            clamp(
                32px,
                10vw,
                42px
            );
    }


    .login-page-options {
        align-items: flex-start;
        flex-direction: column;

        gap: 12px;
    }


    .login-page-options .remember-me {
        min-height: 44px;
    }


    .login-help-link {
        min-height: 44px;

        display: inline-flex;
        align-items: center;
    }


    .login-page-submit {
        min-height: 52px;
    }

}


/*
|--------------------------------------------------------------------------
| Small Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 420px) {

    .login-hero-copy {
        padding-inline: 16px;
    }


    .login-hero h1 {
        font-size:
            clamp(
                39px,
                12vw,
                50px
            );
    }


    .login-page-panel {
        padding:
            30px
            20px;

        margin-inline: 4px;
    }


    .login-page-crest img {
        width: 88px;
        height: 88px;
    }


    .login-page-notice {
        grid-template-columns: 1fr;
    }


    .login-page-options {
        gap: 8px;
    }

}


/*
|--------------------------------------------------------------------------
| Registration Page
|--------------------------------------------------------------------------
*/

.enroll-page {
    background:
        linear-gradient(
            180deg,
            #120817 0%,
            #0d0611 100%
        );
}


/*
|--------------------------------------------------------------------------
| Intro
|--------------------------------------------------------------------------
*/

.enroll-intro {
    position: relative;

    padding:
        clamp(70px, 8vw, 110px)
        0
        clamp(50px, 6vw, 80px);

    border-bottom:
        1px solid
        rgba(219, 193, 125, 0.12);

    background:
        radial-gradient(
            circle at center top,
            rgba(98, 39, 110, 0.16),
            transparent 48%
        );
}


.enroll-intro-inner {
    max-width: 820px;

    margin: 0 auto;

    text-align: center;
}


.enroll-intro-mark {
    display: flex;
    justify-content: center;

    margin-bottom: 20px;
}


.enroll-intro-mark img {
    display: block;

    width: 100px;
    height: 100px;

    object-fit: contain;
}


.enroll-intro h1 {
    max-width: 780px;

    margin:
        0
        auto
        24px;

    font-size:
        clamp(
            46px,
            6vw,
            78px
        );

    font-weight: 500;

    line-height: 1.02;

    letter-spacing: -0.035em;

    text-wrap: balance;
}


.enroll-intro-copy {
    max-width: 720px;

    margin:
        0
        auto;

    color: var(--color-text-muted);

    font-size:
        clamp(
            16px,
            1.8vw,
            19px
        );

    line-height: 1.78;
}


.enroll-intro .ornamental-rule {
    max-width: 280px;

    margin:
        28px
        auto;
}


.enroll-age-notice {
    margin: 0;

    color:
        rgba(
            231,
            219,
            196,
            0.86
        );

    font-size: 14px;

    line-height: 1.6;
}


.enroll-age-notice strong {
    color: var(--color-gold-light);
}


/*
|--------------------------------------------------------------------------
| Registration Section
|--------------------------------------------------------------------------
*/

.enroll-form-section {
    padding:
        clamp(60px, 7vw, 95px)
        0
        clamp(75px, 8vw, 110px);
}


.enroll-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1.45fr)
        minmax(300px, 0.55fr);

    gap:
        clamp(
            40px,
            6vw,
            75px
        );

    align-items: start;
}


/*
|--------------------------------------------------------------------------
| Main Form Panel
|--------------------------------------------------------------------------
*/

.enroll-form-panel {
    position: relative;

    padding:
        clamp(
            32px,
            4vw,
            48px
        );

    border:
        1px solid
        rgba(219, 193, 125, 0.22);

    background:
        linear-gradient(
            145deg,
            rgba(43, 17, 51, 0.78),
            rgba(16, 7, 20, 0.90)
        );

    box-shadow:
        0 30px 80px
        rgba(0, 0, 0, 0.28);
}


.enroll-form-panel::before,
.enroll-form-panel::after {
    content: "✦";

    position: absolute;

    color:
        rgba(219, 193, 125, 0.38);

    font-size: 11px;
}


.enroll-form-panel::before {
    top: 14px;
    left: 16px;
}


.enroll-form-panel::after {
    right: 16px;
    bottom: 14px;
}


/*
|--------------------------------------------------------------------------
| Form Heading
|--------------------------------------------------------------------------
*/

.enroll-form-header {
    margin-bottom: 34px;
}


.enroll-form-header h2 {
    margin:
        0
        0
        10px;

    font-size:
        clamp(
            34px,
            4vw,
            48px
        );

    font-weight: 500;

    line-height: 1.08;

    letter-spacing: -0.025em;
}


.enroll-form-header > p:last-child {
    margin: 0;

    color: var(--color-text-muted);

    font-size: 13px;
}


/*
|--------------------------------------------------------------------------
| Error Status
|--------------------------------------------------------------------------
*/

.enroll-status {
    margin-bottom: 32px;

    padding:
        20px
        22px;

    border:
        1px solid
        rgba(204, 126, 126, 0.35);

    background:
        rgba(133, 56, 56, 0.10);
}


.enroll-status strong {
    display: block;

    margin-bottom: 8px;

    color: #e2aaaa;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 20px;

    font-weight: 500;
}


.enroll-status ul {
    margin:
        10px
        0
        0;

    padding-left: 22px;
}


.enroll-status li {
    margin: 6px 0;

    color:
        rgba(
            239,
            215,
            215,
            0.86
        );

    font-size: 14px;

    line-height: 1.55;
}


.enroll-age-correction {
    margin-top: 18px;

    padding-top: 18px;

    border-top:
        1px solid
        rgba(204, 126, 126, 0.24);
}


.enroll-age-correction p {
    margin:
        0
        0
        14px;

    color:
        rgba(
            239,
            215,
            215,
            0.82
        );

    font-size: 13px;

    line-height: 1.6;
}


/*
|--------------------------------------------------------------------------
| Fieldsets
|--------------------------------------------------------------------------
*/

.enroll-fieldset {
    margin: 0;
    padding: 0;

    border: 0;
}


.enroll-fieldset + .enroll-fieldset {
    margin-top: 36px;

    padding-top: 32px;

    border-top:
        1px solid
        rgba(219, 193, 125, 0.14);
}


.enroll-fieldset legend {
    margin-bottom: 8px;

    color: var(--color-gold-light);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 24px;

    font-weight: 500;
}


.enroll-fieldset-description {
    margin:
        0
        0
        24px;

    color: var(--color-text-muted);

    font-size: 13px;

    line-height: 1.6;
}


/*
|--------------------------------------------------------------------------
| Form Grid
|--------------------------------------------------------------------------
*/

.enroll-form-row {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 20px;
}


.enroll-form .form-field {
    margin-bottom: 22px;
}


.enroll-form label {
    display: block;

    margin-bottom: 8px;

    color: var(--color-text);

    font-size: 14px;

    font-weight: 600;
}


.required-marker {
    color: var(--color-gold-light);
}


/*
|--------------------------------------------------------------------------
| Inputs
|--------------------------------------------------------------------------
*/

.enroll-form input[type="text"],
.enroll-form input[type="email"],
.enroll-form input[type="date"],
.enroll-form input[type="password"] {
    width: 100%;

    min-height: 48px;

    padding:
        0
        14px;

    border:
        1px solid
        rgba(219, 193, 125, 0.22);

    border-radius: 4px;

    background:
        rgba(7, 3, 10, 0.58);

    color: var(--color-text);

    font: inherit;

    transition:
        border-color var(--transition),
        background var(--transition),
        box-shadow var(--transition);
}


.enroll-form input:focus {
    outline: none;

    border-color: var(--color-gold);

    background:
        rgba(13, 6, 17, 0.72);

    box-shadow:
        0 0 0 3px
        rgba(196, 161, 90, 0.10);
}


.enroll-form input[aria-invalid="true"] {
    border-color:
        rgba(204, 126, 126, 0.75);

    box-shadow:
        0 0 0 3px
        rgba(133, 56, 56, 0.12);
}


/*
|--------------------------------------------------------------------------
| Date Input
|--------------------------------------------------------------------------
*/

.enroll-form input[type="date"] {
    color-scheme: dark;
}


.enroll-form input[type="date"]::-webkit-calendar-picker-indicator {
    opacity: 0.78;

    cursor: pointer;
}


/*
|--------------------------------------------------------------------------
| Field Help
|--------------------------------------------------------------------------
*/

.enroll-form .field-help {
    display: block;

    margin-top: 7px;

    color:
        rgba(
            201,
            191,
            202,
            0.68
        );

    font-size: 12px;

    line-height: 1.5;
}


/*
|--------------------------------------------------------------------------
| Inline Age Warning
|--------------------------------------------------------------------------
*/

.enroll-inline-age-warning {
    margin-top: 14px;

    padding:
        15px
        17px;

    border:
        1px solid
        rgba(204, 126, 126, 0.38);

    background:
        rgba(133, 56, 56, 0.11);
}


.enroll-inline-age-warning[hidden] {
    display: none;
}


.enroll-inline-age-warning strong {
    display: block;

    margin-bottom: 5px;

    color: #e2aaaa;

    font-size: 14px;
}


.enroll-inline-age-warning p {
    margin: 0;

    color:
        rgba(
            239,
            215,
            215,
            0.82
        );

    font-size: 12px;

    line-height: 1.55;
}


/*
|--------------------------------------------------------------------------
| Password Fields
|--------------------------------------------------------------------------
*/

.enroll-password-field {
    position: relative;
}


.enroll-password-field input {
    padding-right: 74px;
}


.enroll-password-toggle {
    position: absolute;

    top: 50%;
    right: 10px;

    min-width: 54px;
    min-height: 34px;

    transform:
        translateY(-50%);

    border: 0;

    background: transparent;

    color: var(--color-gold-light);

    font: inherit;

    font-size: 12px;
    font-weight: 700;

    cursor: pointer;
}


.enroll-password-toggle:hover {
    color: var(--color-gold);
}


.enroll-password-toggle:focus-visible {
    outline:
        2px solid
        var(--color-gold);

    outline-offset: 2px;
}


/*
|--------------------------------------------------------------------------
| Agreement
|--------------------------------------------------------------------------
*/

.enroll-agreement {
    margin-top: 38px;
}


.enroll-checkbox {
    display: grid !important;

    grid-template-columns:
        20px
        minmax(0, 1fr);

    gap: 12px;

    align-items: start;

    margin: 0 !important;

    cursor: pointer;
}


.enroll-checkbox input {
    width: 18px;
    height: 18px;

    margin-top: 2px;

    accent-color: var(--color-gold);
}


.enroll-checkbox span {
    color: var(--color-text-muted);

    font-size: 13px;

    font-weight: 400;

    line-height: 1.65;
}


/*
|--------------------------------------------------------------------------
| Submit Area
|--------------------------------------------------------------------------
*/

.enroll-submit-area {
    margin-top: 36px;

    padding-top: 28px;

    border-top:
        1px solid
        rgba(219, 193, 125, 0.14);
}


.enroll-submit-area .button {
    width: 100%;
}


.enroll-submit-area > p {
    margin:
        18px
        0
        0;

    text-align: center;

    color: var(--color-text-muted);

    font-size: 13px;
}


.enroll-submit-area a {
    color: var(--color-gold-light);

    font-weight: 700;

    text-decoration: none;
}


.enroll-submit-area a:hover {
    text-decoration: underline;
}


/*
|--------------------------------------------------------------------------
| Sidebar
|--------------------------------------------------------------------------
*/

.enroll-sidebar {
    position: sticky;

    top:
        calc(
            var(--header-height)
            +
            28px
        );
}


.enroll-sidebar-inner {
    padding:
        30px
        28px;

    border:
        1px solid
        rgba(219, 193, 125, 0.18);

    background:
        linear-gradient(
            180deg,
            rgba(32, 13, 39, 0.76),
            rgba(13, 6, 17, 0.88)
        );
}


.enroll-sidebar-inner > img {
    display: block;

    width: 104px;
    height: 104px;

    margin:
        0
        auto
        18px;

    object-fit: contain;
}


.enroll-sidebar-inner > .academy-overline {
    text-align: center;
}


.enroll-sidebar-inner > h2 {
    margin:
        0
        0
        18px;

    text-align: center;

    font-size:
        clamp(
            30px,
            3vw,
            38px
        );

    font-weight: 500;

    line-height: 1.1;
}


.enroll-sidebar-inner .ornamental-rule {
    margin:
        20px
        auto
        28px;
}


/*
|--------------------------------------------------------------------------
| Sidebar List
|--------------------------------------------------------------------------
*/

.enroll-sidebar-list {
    display: grid;

    gap: 24px;
}


.enroll-sidebar-list section {
    display: grid;

    grid-template-columns:
        30px
        minmax(0, 1fr);

    gap: 14px;

    align-items: start;
}


.enroll-sidebar-list section > span {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 28px;
    height: 28px;

    border:
        1px solid
        rgba(219, 193, 125, 0.24);

    border-radius: 50%;

    color: var(--color-gold-light);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 11px;
}


.enroll-sidebar-list h3 {
    margin:
        0
        0
        7px;

    color: var(--color-text);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 17px;

    font-weight: 500;

    line-height: 1.3;
}


.enroll-sidebar-list p {
    margin: 0;

    color: var(--color-text-muted);

    font-size: 12px;

    line-height: 1.6;
}


/*
|--------------------------------------------------------------------------
| Autofill
|--------------------------------------------------------------------------
*/

.enroll-form input:-webkit-autofill,
.enroll-form input:-webkit-autofill:hover,
.enroll-form input:-webkit-autofill:focus {
    -webkit-text-fill-color:
        var(--color-text);

    -webkit-box-shadow:
        0 0 0 1000px
        #100713
        inset;

    transition:
        background-color
        9999s
        ease-out;
}


/*
|--------------------------------------------------------------------------
| Tablet
|--------------------------------------------------------------------------
*/

@media (max-width: 980px) {

    .enroll-layout {
        grid-template-columns: 1fr;

        gap: 45px;
    }


    .enroll-sidebar {
        position: static;
    }


    .enroll-sidebar-inner {
        max-width: 760px;

        margin: 0 auto;
    }

}


/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 700px) {

    .enroll-intro {
        padding:
            58px
            0
            46px;
    }


    .enroll-intro-inner {
        padding-inline: 18px;
    }


    .enroll-intro h1 {
        font-size:
            clamp(
                40px,
                12vw,
                56px
            );

        line-height: 1.02;
    }


    .enroll-form-section {
        padding:
            48px
            0
            68px;
    }


    .enroll-form-panel {
        padding:
            30px
            22px;
    }


    .enroll-form-row {
        grid-template-columns: 1fr;

        gap: 0;
    }


    .enroll-form-header h2 {
        font-size:
            clamp(
                32px,
                9vw,
                42px
            );
    }


    .enroll-fieldset legend {
        font-size: 22px;
    }


    .enroll-sidebar-inner {
        padding:
            28px
            22px;
    }

}


/*
|--------------------------------------------------------------------------
| Small Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 430px) {

    .enroll-intro-mark img {
        width: 88px;
        height: 88px;
    }


    .enroll-form-panel {
        padding:
            28px
            18px;
    }


    .enroll-status {
        padding:
            17px
            16px;
    }


    .enroll-sidebar-list section {
        grid-template-columns: 1fr;
    }


    .enroll-sidebar-list section > span {
        margin-bottom: 2px;
    }

}


/*
|--------------------------------------------------------------------------
| Reduced Motion
|--------------------------------------------------------------------------
*/

@media (prefers-reduced-motion: reduce) {

    .enroll-form input,
    .enroll-password-toggle {
        transition: none;
    }

}

/*
|--------------------------------------------------------------------------
| Reduced Motion
|--------------------------------------------------------------------------
*/

@media (prefers-reduced-motion: reduce) {

    .login-page-form .form-control,
    .login-password-toggle {
        transition: none;
    }

}

/*
|--------------------------------------------------------------------------
| Reduced Motion
|--------------------------------------------------------------------------
*/

@media (prefers-reduced-motion: reduce) {

    .contact-route,
    .contact-route-arrow,
    .contact-form input,
    .contact-form select,
    .contact-form textarea {
        transition: none;
    }


    .contact-route:hover {
        padding-left: 0;
    }


    .contact-route:hover .contact-route-arrow {
        transform: none;
    }

}

/*
|--------------------------------------------------------------------------
| Reduced Motion
|--------------------------------------------------------------------------
*/

@media (prefers-reduced-motion: reduce) {

    .about-world,
    .about-philosophy-entry,
    .about-roleplay-note {
        transition: none;
    }

}

/*
|--------------------------------------------------------------------------
| Tablet
|--------------------------------------------------------------------------
*/

@media (max-width: 980px) {

    .header-inner {
        width:
            min(
                calc(100% - 28px),
                var(--content-width)
            );
    }
    .home-hero {
        background-position:
            56% center;
    }


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

    .mobile-menu-toggle {
        display: block;
    }

    .primary-menu {
        display: none;

        position: absolute;

        top: calc(100% + 12px);
        right: 0;

        width:
            min(
                340px,
                calc(100vw - 28px)
            );

        padding: 12px;

        flex-direction: column;
        align-items: stretch;

        background: var(--color-surface);

        border:
            1px solid
            var(--color-border);

        border-radius: var(--radius-medium);

        box-shadow:
            0 20px 60px
            rgba(
                0,
                0,
                0,
                0.42
            );
    }

    .primary-menu.is-open {
        display: flex;
    }

    .nav-link {
        width: 100%;

        justify-content: flex-start;

        padding:
            11px
            13px;
    }

    .primary-menu .nav-link.nav-enroll {
        width: 100%;

        margin-left: 0;
        margin-top: 4px;

        justify-content: center;
    }

    .nav-icon {
        width: 100%;

        margin-left: 0;

        border-radius: var(--radius-small);
    }


    /*
    |--------------------------------------------------------------------------
    | Hero
    |--------------------------------------------------------------------------
    */

    .home-hero {
        min-height: auto;
    }

    .home-hero-grid {
        grid-template-columns: 1fr;

        gap: 60px;
    }

    .home-hero-copy {
        max-width: 760px;
    }

    .academy-login-panel {
        max-width: 650px;
    }


    /*
    |--------------------------------------------------------------------------
    | Academy Experience
    |--------------------------------------------------------------------------
    */

    .experience-entry {
        grid-template-columns:
            50px
            minmax(0, 1fr);

        gap:
            18px
            30px;
    }

    .experience-entry > p {
        grid-column: 2;
    }


    /*
    |--------------------------------------------------------------------------
    | About
    |--------------------------------------------------------------------------
    */

    .academy-about-grid {
        grid-template-columns: 1fr;

        gap: 60px;
    }

    .academy-image-frame {
        max-width: 700px;
    }

    .academy-image-placeholder {
        min-height: 400px;
    }


    /*
    |--------------------------------------------------------------------------
    | Admissions
    |--------------------------------------------------------------------------
    */

    .admissions-frame {
        grid-template-columns:
            80px
            minmax(0, 1fr);

        gap: 28px;
    }

    .admissions-action {
        grid-column: 2;

        padding-left: 0;
    }


    /*
    |--------------------------------------------------------------------------
    | Footer
    |--------------------------------------------------------------------------
    */

    .footer-inner {
        grid-template-columns:
            minmax(0, 38%)
            minmax(0, 62%);
    }

    .footer-brand-column {
        padding-right: 30px;
    }

    .footer-information-column {
        padding-left: 35px;
    }

}


/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 640px) {

    :root {
        --header-height: 76px;
    }

    .header-inner,
    .section-inner,
    .footer-inner {
        width:
            calc(
                100% -
                28px
            );
    }


    /*
    |--------------------------------------------------------------------------
    | Branding
    |--------------------------------------------------------------------------
    */

    .brand-crest-image {
        width: 54px;
        height: 54px;
    }

    .brand-text {
        font-size: 15px;
    }


    /*
    |--------------------------------------------------------------------------
    | Hero
    |--------------------------------------------------------------------------
    */

    .home-hero {
        padding:
            60px
            0
            75px;
    }

    .home-hero::before {
        inset: 12px;
    }

    .home-hero::after {
        display: none;
    }

    .home-hero h1 {
        font-size:
            clamp(
                43px,
                13vw,
                60px
            );
    }

    .hero-actions {
        flex-direction: column;
    }

    .hero-actions .button {
        width: 100%;
    }

    .hero-motto {
        margin-top: 32px;
    }

    .hero-motto .ornament-line {
        width: 35px;
    }

    .home-hero {
    background-position:
        58% center;
}


    /*
    |--------------------------------------------------------------------------
    | Login
    |--------------------------------------------------------------------------
    */

    .academy-login-panel {
        padding:
            27px
            22px;
    }

    .login-panel-top {
        align-items: flex-start;
    }

    .login-options {
        align-items: flex-start;

        flex-direction: column;
    }

    .password-note {
        text-align: left;
    }

    .login-crest-image {
    width: 56px;
    height: 56px;
}


    /*
    |--------------------------------------------------------------------------
    | Academy Experience
    |--------------------------------------------------------------------------
    */

    .academy-experience {
        padding:
            75px
            0;
    }

    .experience-entry {
        grid-template-columns: 1fr;

        gap: 12px;

        padding:
            31px
            0;
    }

    .experience-symbol {
        text-align: left;
    }

    .experience-entry > p {
        grid-column: auto;
    }


    /*
    |--------------------------------------------------------------------------
    | About
    |--------------------------------------------------------------------------
    */

    .academy-about-preview {
        padding:
            75px
            0;
    }

    .academy-about-grid {
        gap: 45px;
    }

    .academy-image-placeholder {
        min-height: 310px;
    }

    .image-sigil {
        width: 70px;
        height: 82px;

        font-size: 34px;
    }


    /*
    |--------------------------------------------------------------------------
    | Admissions
    |--------------------------------------------------------------------------
    */

    .admissions-notice {
        padding:
            60px
            0;
    }

    .admissions-frame {
        grid-template-columns: 1fr;

        gap: 25px;

        padding: 29px;
    }

    .admissions-seal {
        width: 63px;
        height: 74px;

        font-size: 29px;
    }

    .admissions-action {
        grid-column: auto;
    }

    .admissions-action,
    .admissions-action .button {
        width: 100%;
    }


    /*
    |--------------------------------------------------------------------------
    | Footer
    |--------------------------------------------------------------------------
    */

    .footer-inner {
        grid-template-columns: 1fr;

        padding:
            42px
            0;
    }

    .footer-brand-column {
        padding:
            0
            0
            30px;

        border-right: 0;

        border-bottom:
            1px solid
            rgba(
                219,
                193,
                125,
                0.17
            );
    }

    .footer-logo {
        transform: none;
    }

    .footer-crest-image {
        width: 76px;
        height: 76px;
    }

    .footer-information-column {
        padding:
            30px
            0
            0;
    }

    .footer-legal-links {
        justify-content: center;

        gap:
            7px
            8px;
    }

    .footer-disclaimer,
    .footer-copyright {
        text-align: center;
    }

}


/*
|--------------------------------------------------------------------------
| Small Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 420px) {

    .brand-crest-image {
        width: 48px;
        height: 48px;
    }

    .brand-text {
        font-size: 13px;
    }

    .brand-text span:last-child {
        letter-spacing: 0.13em;
    }

    .footer-logo {
        flex-direction: column;

        gap: 10px;

        text-align: center;
    }

    .footer-crest-image {
        width: 82px;
        height: 82px;
    }

}


/*
|--------------------------------------------------------------------------
| Reduced Motion
|--------------------------------------------------------------------------
*/

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }

}

@media (max-width: 768px) {

    .home-hero-copy {
        padding-inline: 20px;
    }

    .home-hero-copy h1 {
        font-size: clamp(3rem, 13vw, 4.5rem);
        line-height: 0.98;
    }

}

/*
|--------------------------------------------------------------------------
| Login Page No-Scroll Refinement
|--------------------------------------------------------------------------
*/

@media (min-width: 981px) {

    .login-hero {
        min-height:
            calc(
                100vh -
                var(--header-height)
            );

        height:
            calc(
                100vh -
                var(--header-height)
            );

        padding:
            34px
            0;
    }


    .login-hero-inner {
        grid-template-columns:
            minmax(0, 0.9fr)
            minmax(470px, 1.1fr);

        gap:
            clamp(
                42px,
                6vw,
                80px
            );

        align-items: center;
    }


    .login-hero-copy {
        max-width: 610px;
    }


    .login-hero h1 {
        font-size:
            clamp(
                48px,
                5.8vw,
                74px
            );

        margin-bottom: 22px;
    }


    .login-hero-intro {
        max-width: 590px;

        margin-bottom: 26px;

        font-size:
            clamp(
                16px,
                1.7vw,
                18px
            );

        line-height: 1.68;
    }


    .login-page-panel {
        max-width: 560px;

        padding:
            30px
            38px;
    }


    .login-page-crest {
        margin-bottom: 12px;
    }


    .login-page-crest img {
        width: 88px;
        height: 88px;
    }


    .login-page-panel-heading h2 {
        font-size:
            clamp(
                32px,
                3.3vw,
                42px
            );
    }


    .login-page-panel .ornamental-rule {
        margin:
            18px
            auto
            22px;
    }


    .login-page-form .form-group {
        margin-bottom: 16px;
    }


    .login-page-form .form-control {
        min-height: 44px;
    }


    .login-page-options {
        margin:
            2px
            0
            18px;
    }


    .login-page-submit {
        min-height: 46px;
    }


    .login-page-enrollment {
        margin-top: 18px;

        padding-top: 16px;
    }


    .login-security-note {
        margin-top: 16px;

        padding-top: 14px;
    }

}
/*
|--------------------------------------------------------------------------
| Registration / Verification Success Spacing
|--------------------------------------------------------------------------
*/

.registration-success-actions,
.verification-actions {
    margin-top: 28px;
}


.enroll-age-notice + .registration-success-actions,
.enroll-age-notice + .verification-actions {
    margin-top: 30px;
}

/*
|--------------------------------------------------------------------------
| Registration Email Reminder
|--------------------------------------------------------------------------
*/

.registration-email-reminder {
    max-width: 620px;

    margin:
        18px
        auto
        0;

    color:
        var(--color-text-muted);

    font-size: 13px;

    line-height: 1.65;

    text-align: center;
}


.registration-email-reminder strong {
    color: var(--color-gold-light);
}


.registration-email-reminder
+
.registration-success-actions {
    margin-top: 30px;
}


/* ================================================================
   AUTHENTICATED NAVIGATION
================================================================ */

.authenticated-menu {
    gap: 10px;
}

.authenticated-menu-links,
.authenticated-menu-icons {
    display: flex;
    align-items: center;
}

.authenticated-menu-links {
    gap: 3px;
}

.authenticated-menu-icons {
    gap: 2px;

    margin-left: 6px;

    padding-left: 10px;

    border-left:
        1px solid
        rgba(
            219,
            193,
            125,
            0.14
        );
}

.nav-action,
.nav-logout-form {
    position: relative;

    margin: 0;
}

.nav-account-icon {
    position: relative;

    margin-left: 0;
}

.nav-account-icon svg,
.authenticated-menu-icons .search-toggle svg {
    width: 20px;
    height: 20px;
}

.nav-notification-badge {
    position: absolute;

    top: 2px;
    right: 1px;

    min-width: 16px;
    height: 16px;

    padding:
        0
        4px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border:
        2px solid
        #120918;

    border-radius: 999px;

    background:
        var(--color-gold-light);

    color:
        #160b19;

    font-size: 9px;
    font-weight: 800;
    line-height: 1;
}

.nav-notification-badge[hidden],
.nav-notification-popover[hidden] {
    display: none !important;
}

.nav-notification-popover {
    position: absolute;

    top:
        calc(100% + 10px);

    right: 0;

    z-index: 1200;

    width:
        min(
            330px,
            calc(100vw - 30px)
        );

    padding: 14px;

    border:
        1px solid
        rgba(
            219,
            193,
            125,
            0.22
        );

    border-radius:
        var(--radius-small);

    background:
        #170b1d;

    box-shadow:
        0 18px 45px
        rgba(
            0,
            0,
            0,
            0.42
        );
}

.nav-logout-button {
    border: 0;

    font: inherit;
}

.nav-logout-button:hover,
.nav-logout-button:focus-visible {
    color:
        #f0c8c8;

    background:
        rgba(
            170,
            63,
            63,
            0.14
        );
}


/* ================================================================
   DASHBOARD
================================================================ */

.dashboard-page {
    min-height:
        calc(
            100vh -
            var(--header-height)
        );

    background:
        #100713;
}

.dashboard-hero {
    position: relative;

    overflow: hidden;

    padding:
        clamp(
            88px,
            9vw,
            130px
        )
        0
        clamp(
            72px,
            8vw,
            110px
        );

    background:
        radial-gradient(
            circle at 78% 34%,
            rgba(
                92,
                45,
                108,
                0.22
            ),
            transparent 37%
        ),
        linear-gradient(
            180deg,
            #170b1d,
            #100713
        );

    border-bottom:
        1px solid
        rgba(
            219,
            193,
            125,
            0.13
        );
}

.dashboard-hero::before {
    content: "";

    position: absolute;

    inset: 22px;

    border:
        1px solid
        rgba(
            219,
            193,
            125,
            0.07
        );

    pointer-events: none;
}

.dashboard-hero-inner {
    position: relative;

    z-index: 1;

    max-width: 850px;
}

.dashboard-hero h1 {
    margin:
        10px
        0
        22px;

    color:
        var(--color-text);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(
            42px,
            6vw,
            72px
        );

    font-weight: 500;
    line-height: 1.04;
}

.dashboard-hero-copy {
    max-width: 720px;

    margin: 0;

    color:
        var(--color-text-muted);

    font-size:
        clamp(
            16px,
            1.7vw,
            19px
        );

    line-height: 1.75;
}

.dashboard-status-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    gap: 10px;

    margin-top: 28px;

    color:
        #9f929e;

    font-size: 13px;
    font-weight: 600;

    letter-spacing: 0.04em;
}

.dashboard-status-label {
    color:
        var(--color-gold-light);
}

.dashboard-overview {
    padding:
        clamp(
            72px,
            8vw,
            112px
        )
        0
        clamp(
            90px,
            10vw,
            135px
        );
}

.dashboard-section-heading {
    max-width: 760px;

    margin-bottom:
        clamp(
            38px,
            5vw,
            58px
        );
}

.dashboard-section-heading h2 {
    margin:
        8px
        0
        0;

    color:
        var(--color-text);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(
            32px,
            4vw,
            48px
        );

    font-weight: 500;
    line-height: 1.15;
}

.dashboard-card-grid {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(
                0,
                1fr
            )
        );

    gap: 22px;
}

.dashboard-card {
    position: relative;

    min-height: 280px;

    padding:
        32px;

    display: flex;
    flex-direction: column;

    border:
        1px solid
        rgba(
            219,
            193,
            125,
            0.12
        );

    background:
        linear-gradient(
            180deg,
            rgba(
                33,
                16,
                41,
                0.94
            ),
            rgba(
                20,
                9,
                25,
                0.94
            )
        );

    box-shadow:
        0 16px 42px
        rgba(
            0,
            0,
            0,
            0.16
        );
}

.dashboard-card-featured {
    border-color:
        rgba(
            219,
            193,
            125,
            0.28
        );
}

.dashboard-card-number {
    margin-bottom: 24px;

    color:
        var(--color-gold);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 13px;

    letter-spacing: 0.16em;
}

.dashboard-card h3 {
    margin:
        0
        0
        13px;

    color:
        var(--color-text);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        27px;

    font-weight: 500;
}

.dashboard-card p {
    margin:
        0
        0
        26px;

    color:
        var(--color-text-muted);

    font-size: 15px;
    line-height: 1.72;
}

.dashboard-card-link,
.dashboard-card-coming-soon {
    margin-top: auto;
}

.dashboard-card-link {
    width: fit-content;

    display: inline-flex;
    align-items: center;

    gap: 9px;

    color:
        var(--color-gold-light);

    font-size: 14px;
    font-weight: 700;

    text-decoration: none;
}

.dashboard-card-link:hover,
.dashboard-card-link:focus-visible {
    color:
        #f0dfa6;
}

.dashboard-card-coming-soon {
    color:
        #7f7380;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 0.12em;

    text-transform: uppercase;
}

.dashboard-registration-note {
    max-width: 980px;

    margin:
        42px
        auto
        0;

    padding:
        28px
        30px;

    display: grid;

    grid-template-columns:
        auto
        minmax(
            0,
            1fr
        );

    gap: 22px;

    border:
        1px solid
        rgba(
            219,
            193,
            125,
            0.18
        );

    background:
        rgba(
            26,
            12,
            32,
            0.72
        );
}

.dashboard-registration-mark {
    color:
        var(--color-gold-light);

    font-size: 20px;
}

.dashboard-registration-note h2 {
    margin:
        0
        0
        9px;

    color:
        var(--color-text);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 24px;
    font-weight: 500;
}

.dashboard-registration-note p {
    margin: 0;

    color:
        var(--color-text-muted);

    font-size: 14px;
    line-height: 1.72;
}


/* ================================================================
   AUTHENTICATED NAV / DASHBOARD RESPONSIVE
================================================================ */

@media (max-width: 1120px) {

    .authenticated-menu {
        gap: 4px;
    }

    .authenticated-menu-links .nav-link {
        padding:
            8px
            9px;
    }

    .authenticated-menu-icons {
        margin-left: 2px;

        padding-left: 6px;
    }

    .authenticated-menu-icons .nav-icon {
        width: 40px;
        height: 40px;
    }

}


@media (max-width: 900px) {

    .authenticated-menu-links,
    .authenticated-menu-icons {
        width: 100%;
    }

    .authenticated-menu-links {
        flex-direction: column;
        align-items: stretch;
    }

    .authenticated-menu-links .nav-link {
        width: 100%;

        justify-content: flex-start;
    }

    .authenticated-menu-icons {
        justify-content: center;

        margin:
            10px
            0
            0;

        padding:
            14px
            0
            0;

        border-left: 0;

        border-top:
            1px solid
            rgba(
                219,
                193,
                125,
                0.12
            );
    }

    .dashboard-card-grid {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 600px) {

    .dashboard-hero {
        padding:
            72px
            0
            64px;
    }

    .dashboard-hero::before {
        inset:
            16px
            10px;
    }

    .dashboard-hero h1 {
        font-size:
            clamp(
                38px,
                12vw,
                52px
            );
    }

    .dashboard-card {
        min-height: 0;

        padding:
            27px
            23px;
    }

    .dashboard-registration-note {
        grid-template-columns: 1fr;

        padding:
            24px
            22px;
    }

}


/* ================================================================
   REGISTERED USER DASHBOARD HERO
================================================================ */

.dashboard-hero.dashboard-hero-registered {
    min-height:
        clamp(
            500px,
            62vh,
            720px
        );

    display: flex;
    align-items: center;

    background-image:
        linear-gradient(
            90deg,
            rgba(10, 5, 14, 0.96) 0%,
            rgba(13, 7, 18, 0.91) 28%,
            rgba(16, 8, 22, 0.73) 52%,
            rgba(12, 6, 17, 0.42) 76%,
            rgba(8, 4, 11, 0.24) 100%
        ),
        linear-gradient(
            180deg,
            rgba(10, 5, 14, 0.12) 0%,
            rgba(10, 5, 14, 0.18) 58%,
            rgba(10, 5, 14, 0.68) 100%
        ),
        image-set(
            url("../images/logged_in_user_hero_dashboard_bg.webp") type("image/webp"),
            url("../images/logged_in_user_hero_dashboard_bg.png") type("image/png")
        );

    background-size:
        cover,
        cover,
        cover;

    background-position:
        center,
        center,
        center;

    background-repeat:
        no-repeat;
}

.dashboard-hero.dashboard-hero-registered::before {
    border-color:
        rgba(
            219,
            193,
            125,
            0.12
        );
}

.dashboard-hero.dashboard-hero-registered .dashboard-hero-inner {
    max-width: 760px;
}

.dashboard-hero.dashboard-hero-registered .dashboard-hero-copy {
    max-width: 650px;

    color:
        #d0c5cf;
}

.dashboard-hero.dashboard-hero-registered .dashboard-status-line {
    color:
        #b8abb7;
}

@media (max-width: 760px) {

    .dashboard-hero.dashboard-hero-registered {
        min-height:
            clamp(
                520px,
                68vh,
                690px
            );

        background-image:
            linear-gradient(
                180deg,
                rgba(10, 5, 14, 0.72) 0%,
                rgba(10, 5, 14, 0.78) 46%,
                rgba(10, 5, 14, 0.92) 100%
            ),
            image-set(
                url("../images/logged_in_user_hero_dashboard_bg.webp") type("image/webp"),
                url("../images/logged_in_user_hero_dashboard_bg.png") type("image/png")
            );

        background-size:
            cover,
            cover;

        background-position:
            center,
            58% center;
    }

}


/* ================================================================
   REGISTERED-MEMBER HOMEPAGE
================================================================ */

.member-homepage {
    min-height:
        calc(
            100vh -
            var(--header-height)
        );

    background:
        linear-gradient(
            180deg,
            #120815,
            #0e0711
        );
}

.member-home-hero {
    position: relative;

    min-height:
        clamp(
            360px,
            47vh,
            540px
        );

    display: flex;
    align-items: stretch;

    overflow: hidden;

    border-bottom:
        1px solid
        rgba(
            219,
            193,
            125,
            0.22
        );

    background-color:
        #160a1b;

    background-image:
        image-set(
            url("../images/homepage_reg_user_bg.webp") type("image/webp"),
            url("../images/homepage_reg_user_bg.png") type("image/png")
        );

    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.member-home-hero::before {
    content: "";

    position: absolute;
    inset: 20px;
    z-index: 1;

    border:
        1px solid
        rgba(
            219,
            193,
            125,
            0.17
        );

    pointer-events: none;
}

.member-home-hero-overlay {
    position: relative;
    z-index: 0;

    width: 100%;

    display: flex;
    align-items: center;

    padding:
        clamp(
            70px,
            9vw,
            112px
        )
        0;

    background:
        linear-gradient(
            180deg,
            rgba(9, 4, 12, 0.58),
            rgba(16, 7, 20, 0.68)
        ),
        radial-gradient(
            circle at center,
            rgba(52, 23, 62, 0.18),
            rgba(8, 3, 10, 0.38) 72%
        );
}

.member-home-hero-inner {
    position: relative;
    z-index: 2;

    text-align: center;
}

.member-home-hero h1 {
    margin: 0;

    color:
        #fffaf1;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(
            45px,
            7vw,
            84px
        );

    font-weight: 500;
    line-height: 1.04;

    letter-spacing: 0.015em;

    text-shadow:
        0 4px 24px
        rgba(
            0,
            0,
            0,
            0.72
        );
}

.member-home-slogan {
    margin:
        16px
        0
        0;

    color:
        var(--color-gold-light);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(
            17px,
            2.2vw,
            23px
        );

    font-style: italic;

    letter-spacing: 0.05em;

    text-shadow:
        0 2px 14px
        rgba(
            0,
            0,
            0,
            0.85
        );
}

.member-home-online-count {
    margin:
        22px
        0
        0;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    color:
        #e7dde5;

    font-size: 13px;
    font-weight: 700;

    letter-spacing: 0.09em;
    text-transform: uppercase;

    text-shadow:
        0 2px 12px
        rgba(
            0,
            0,
            0,
            0.9
        );
}

.member-home-online-count span {
    color:
        var(--color-gold);

    font-size: 9px;
}

.member-home-layout {
    padding-top:
        clamp(
            40px,
            5vw,
            68px
        );

    padding-bottom:
        clamp(
            74px,
            9vw,
            120px
        );

    display: grid;

    grid-template-columns:
        minmax(
            235px,
            290px
        )
        minmax(
            0,
            1fr
        );

    gap:
        clamp(
            28px,
            4vw,
            54px
        );

    align-items: start;
}

.member-sidebar {
    display: grid;
    gap: 18px;
}

.sidebar-panel {
    overflow: hidden;

    border:
        1px solid
        rgba(
            219,
            193,
            125,
            0.16
        );

    border-radius:
        var(--radius-small);

    background:
        linear-gradient(
            180deg,
            rgba(36, 20, 44, 0.94),
            rgba(22, 11, 27, 0.96)
        );

    box-shadow:
        0 14px 35px
        rgba(
            0,
            0,
            0,
            0.2
        );
}

.sidebar-titlebar,
.member-content-titlebar {
    border-bottom:
        1px solid
        rgba(
            219,
            193,
            125,
            0.2
        );

    background:
        linear-gradient(
            135deg,
            #3b1b47,
            #26102f
        );
}

.sidebar-titlebar {
    min-height: 49px;

    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        46px;

    align-items: stretch;
}

.sidebar-titlebar h2 {
    min-width: 0;

    margin: 0;
    padding:
        12px
        3px
        11px
        16px;

    color:
        #f4edf4;

    font-size: 16px;
    font-weight: 600;
    line-height: 1.55;

    letter-spacing: 0.035em;
}

.sidebar-titlebar h2 a {
    color:
        var(--color-gold-light);

    text-decoration: none;
}

.sidebar-titlebar h2 a:hover,
.sidebar-titlebar h2 a:focus-visible {
    color:
        #f3dfa4;

    text-decoration: underline;
    text-underline-offset: 3px;
}

.sidebar-collapse-toggle {
    width: 46px;
    min-height: 46px;

    padding: 0;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 0;
    border-left:
        1px solid
        rgba(
            219,
            193,
            125,
            0.13
        );

    background: transparent;
    color:
        var(--color-gold-light);

    cursor: pointer;

    transition:
        color var(--transition),
        background-color var(--transition);
}

.sidebar-collapse-toggle:hover,
.sidebar-collapse-toggle:focus-visible {
    background:
        rgba(
            219,
            193,
            125,
            0.09
        );

    color:
        #f4dda0;
}

.sidebar-toggle-mark {
    font-size: 22px;
    font-weight: 400;
    line-height: 1;
}

.sidebar-panel-content {
    padding:
        14px
        16px;
}

.sidebar-panel-content[hidden] {
    display: none;
}


/*
|--------------------------------------------------------------------------
| Dynamic Forum Sidebar
|--------------------------------------------------------------------------
*/

.sidebar-forum-navigation {
    padding:
        8px
        0
        10px;
}

.sidebar-forum-group + .sidebar-forum-group {
    border-top:
        1px solid
        rgba(
            105,
            72,
            100,
            0.18
        );
}

.sidebar-forum-link {
    display: block;

    color:
        var(--color-text-muted);

    text-decoration: none;

    transition:
        color var(--transition),
        background-color var(--transition),
        padding-left var(--transition);
}

.sidebar-forum-main-link {
    position: relative;

    padding:
        10px
        16px
        9px;

    color:
        #eee6ef;

    font-size: 13px;

    font-weight: 600;

    line-height: 1.4;
}

.sidebar-forum-main-link::before {
    content: "";

    position: absolute;

    top: 50%;
    left: 8px;

    width: 3px;
    height: 3px;

    border-radius: 50%;

    background:
        rgba(
            219,
            193,
            125,
            0.7
        );

    transform:
        translateY(-50%);
}

.sidebar-forum-main-link:hover,
.sidebar-forum-main-link:focus-visible {
    padding-left: 19px;

    color:
        var(--color-gold-light);

    background:
        rgba(
            81,
            40,
            95,
            0.12
        );
}

.sidebar-subforum-list {
    margin:
        -1px
        0
        7px
        17px;

    padding-left: 9px;

    border-left:
        1px solid
        rgba(
            116,
            64,
            129,
            0.42
        );
}

.sidebar-subforum-link {
    position: relative;

    padding:
        7px
        12px
        7px
        11px;

    color:
        var(--color-text-subtle);

    font-size: 12px;

    line-height: 1.35;
}

.sidebar-subforum-link::before {
    content: "↳";

    position: absolute;

    left: -5px;

    color:
        rgba(
            196,
            161,
            90,
            0.62
        );

    font-size: 10px;
}

.sidebar-subforum-link:hover,
.sidebar-subforum-link:focus-visible {
    color:
        var(--color-gold-light);

    background:
        rgba(
            81,
            40,
            95,
            0.09
        );
}

.sidebar-forum-empty {
    margin: 0;

    padding:
        12px
        16px;

    color:
        var(--color-text-subtle);

    font-size: 12px;

    font-style: italic;

    line-height: 1.5;
}


.sidebar-profile-details p {
    margin:
        0
        0
        10px;

    color:
        var(--color-text-muted);

    font-size: 14px;
}

.sidebar-profile-details p:last-child {
    margin-bottom: 0;
}

.sidebar-detail-label {
    display: block;

    margin-bottom: 1px;

    color:
        var(--color-text-subtle);

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.sidebar-profile-details a,
.sidebar-link-list a,
.announcement-entry a {
    color:
        var(--color-gold-light);
}

.sidebar-profile-details a {
    text-decoration: none;
}

.sidebar-house-name {
    font-weight: 700;
}

.sidebar-link-list {
    display: grid;

    padding:
        8px
        0;
}

.sidebar-link-list a {
    position: relative;

    padding:
        8px
        16px
        8px
        28px;

    font-size: 14px;

    text-decoration: none;

    transition:
        color var(--transition),
        background-color var(--transition),
        padding-left var(--transition);
}

.sidebar-link-list a::before {
    content: "◆";

    position: absolute;
    top: 12px;
    left: 15px;

    color:
        var(--color-gold-dark);

    font-size: 6px;
}

.sidebar-link-list a:hover,
.sidebar-link-list a:focus-visible {
    padding-left: 31px;

    background:
        rgba(
            219,
            193,
            125,
            0.07
        );

    color:
        #f0dda6;
}

.member-home-main {
    min-width: 0;
}

.member-home-datetime {
    margin:
        0
        0
        14px;

    color:
        var(--color-text-subtle);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(
            13px,
            1.6vw,
            15px
        );

    font-style: italic;
    line-height: 1.5;

    text-align: right;
}

.member-content-titlebar {
    padding:
        14px
        22px;

    border:
        1px solid
        rgba(
            219,
            193,
            125,
            0.22
        );

    border-radius:
        var(--radius-small)
        var(--radius-small)
        0
        0;
}

.member-content-titlebar h2 {
    margin: 0;

    color:
        #f4edf4;

    font-size:
        clamp(
            21px,
            2.5vw,
            27px
        );

    font-weight: 500;
    line-height: 1.3;

    text-align: center;
}

.announcement-list {
    padding:
        0
        clamp(
            20px,
            3vw,
            34px
        );

    border-right:
        1px solid
        rgba(
            219,
            193,
            125,
            0.13
        );

    border-bottom:
        1px solid
        rgba(
            219,
            193,
            125,
            0.13
        );

    border-left:
        1px solid
        rgba(
            219,
            193,
            125,
            0.13
        );

    background:
        rgba(
            27,
            13,
            33,
            0.78
        );
}

.announcement-entry {
    padding:
        clamp(
            26px,
            3.5vw,
            42px
        )
        0;

    border-bottom:
        1px solid
        rgba(
            219,
            193,
            125,
            0.13
        );
}

.announcement-entry:last-child {
    border-bottom: 0;
}

.announcement-entry h3 {
    margin:
        0
        0
        6px;

    font-size:
        clamp(
            22px,
            3vw,
            30px
        );

    font-weight: 500;
    line-height: 1.25;
}

.announcement-entry h3 a {
    text-decoration: none;
}

.announcement-entry h3 a:hover,
.announcement-entry h3 a:focus-visible,
.announcement-byline a:hover,
.announcement-byline a:focus-visible,
.announcement-actions a:hover,
.announcement-actions a:focus-visible {
    color:
        #f1dfa9;

    text-decoration: underline;
    text-underline-offset: 3px;
}

.announcement-byline {
    margin:
        0
        0
        22px;

    display: flex;
    flex-wrap: wrap;
    gap: 5px;

    color:
        var(--color-text-subtle);

    font-size: 12px;
}

.announcement-byline a {
    text-decoration: none;
}

.announcement-content {
    color:
        var(--color-text-muted);

    font-size: 15px;
    line-height: 1.78;
}

.announcement-content > :first-child {
    margin-top: 0;
}

.announcement-content > :last-child {
    margin-bottom: 0;
}

.announcement-content img,
.rich-text-content img {
    max-width: 100%;
    height: auto;
}

.announcement-actions {
    margin:
        26px
        0
        0;

    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;

    color:
        var(--color-text-subtle);

    font-size: 13px;
    font-weight: 600;

    text-align: center;
}

.announcement-actions a {
    text-decoration: none;
}

.announcement-empty-state {
    padding:
        clamp(
            42px,
            7vw,
            82px
        )
        0;

    text-align: center;
}

.announcement-empty-state p {
    max-width: 560px;

    margin: 0 auto;

    color:
        var(--color-text-muted);
}

.announcement-view-all {
    margin-top: 26px;

    text-align: center;
}


/* ================================================================
   REGISTERED-MEMBER HOMEPAGE RESPONSIVE
================================================================ */

@media (max-width: 880px) {

    .member-home-layout {
        grid-template-columns: 1fr;
    }

    .member-sidebar {
        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );
    }

    .sidebar-forum-panel {
        grid-column: auto;
    }

    .member-home-main {
        margin-top: 12px;
    }

}


@media (max-width: 600px) {

    .sidebar-forum-main-link {
        padding:
            10px
            15px
            9px;
    }

    .sidebar-subforum-list {
        margin-left: 15px;
    }

    .sidebar-subforum-link {
        padding-right: 10px;
    }

    .member-home-hero {
        min-height: 390px;

        background-position: center;
    }

    .member-home-hero::before {
        inset:
            14px
            10px;
    }

    .member-home-hero-overlay {
        padding:
            72px
            0;

        background:
            linear-gradient(
                180deg,
                rgba(9, 4, 12, 0.72),
                rgba(13, 5, 17, 0.82)
            );
    }

    .member-home-hero h1 {
        font-size:
            clamp(
                40px,
                13vw,
                58px
            );
    }

    .member-home-online-count {
        padding:
            0
            8px;

        font-size: 11px;
        letter-spacing: 0.07em;
    }

    .member-home-layout {
        padding-top: 32px;
    }

    .member-sidebar {
        grid-template-columns: 1fr;
    }

    .member-home-datetime {
        text-align: center;
    }

    .member-content-titlebar {
        padding:
            13px
            16px;
    }

    .announcement-list {
        padding:
            0
            19px;
    }

}


/* ================================================================
   REGISTERED HOMEPAGE DARKER PANELS AND BORDERS
================================================================ */

.sidebar-panel {
    border-color:
        rgba(
            98,
            67,
            93,
            0.28
        );

    background:
        linear-gradient(
            180deg,
            #160a1a 0%,
            #110714 100%
        );

    box-shadow:
        0 14px 35px
        rgba(
            0,
            0,
            0,
            0.26
        );
}

.sidebar-titlebar,
.member-content-titlebar {
    border-color:
        rgba(
            101,
            68,
            96,
            0.28
        );

    border-bottom-color:
        rgba(
            105,
            72,
            100,
            0.3
        );
}

.sidebar-collapse-toggle {
    border-left-color:
        rgba(
            105,
            72,
            100,
            0.26
        );
}

.sidebar-panel-content {
    background:
        rgba(
            14,
            7,
            17,
            0.32
        );
}

.announcement-list {
    border-right-color:
        rgba(
            98,
            67,
            93,
            0.25
        );

    border-bottom-color:
        rgba(
            98,
            67,
            93,
            0.25
        );

    border-left-color:
        rgba(
            98,
            67,
            93,
            0.25
        );

    background:
        rgba(
            17,
            8,
            20,
            0.92
        );
}

.announcement-entry {
    border-bottom-color:
        rgba(
            98,
            67,
            93,
            0.22
        );
}

.announcement-view-all .button-secondary {
    border-color:
        rgba(
            105,
            72,
            100,
            0.3
        );

    background:
        #130918;
}


/* ================================================================
   ADMINISTRATIVE DASHBOARD
================================================================ */

.admin-dashboard-page {
    background:
        linear-gradient(
            180deg,
            #100713 0%,
            #0d060f 100%
        );
}

.admin-dashboard-hero {
    padding:
        clamp(
            82px,
            8vw,
            118px
        )
        0
        clamp(
            68px,
            7vw,
            96px
        );

    background:
        radial-gradient(
            circle at 78% 32%,
            rgba(
                99,
                52,
                111,
                0.2
            ),
            transparent 35%
        ),
        radial-gradient(
            circle at 18% 88%,
            rgba(
                139,
                107,
                50,
                0.1
            ),
            transparent 31%
        ),
        linear-gradient(
            145deg,
            #180a1d 0%,
            #100713 58%,
            #0b050d 100%
        );

    border-bottom-color:
        rgba(
            105,
            72,
            100,
            0.3
        );
}

.admin-dashboard-hero::after {
    content: "";

    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(
                255,
                255,
                255,
                0.012
            )
            1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(
                255,
                255,
                255,
                0.012
            )
            1px,
            transparent 1px
        );

    background-size:
        42px
        42px;

    pointer-events: none;
}

.admin-dashboard-hero .dashboard-hero-inner {
    max-width: 900px;
}

.admin-dashboard-hero .dashboard-status-line {
    width: fit-content;

    padding:
        9px
        13px;

    border:
        1px solid
        rgba(
            139,
            107,
            50,
            0.32
        );

    background:
        rgba(
            12,
            6,
            15,
            0.58
        );
}

.admin-dashboard-overview,
.admin-management-section {
    padding:
        clamp(
            64px,
            7vw,
            96px
        )
        0;
}

.admin-dashboard-overview {
    border-bottom:
        1px solid
        rgba(
            98,
            67,
            93,
            0.22
        );

    background:
        #0f0712;
}

.admin-management-section {
    background:
        linear-gradient(
            180deg,
            #110814,
            #0d060f
        );
}

.admin-dashboard-page .dashboard-section-heading > p:last-child {
    max-width: 680px;

    margin:
        16px
        0
        0;

    color:
        var(--color-text-muted);

    font-size: 15px;
}

.admin-stat-grid {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(
                0,
                1fr
            )
        );

    gap: 18px;
}

.admin-stat-card {
    min-height: 184px;

    padding:
        25px
        26px;

    border:
        1px solid
        rgba(
            98,
            67,
            93,
            0.3
        );

    background:
        linear-gradient(
            180deg,
            rgba(
                24,
                11,
                29,
                0.96
            ),
            rgba(
                16,
                7,
                19,
                0.96
            )
        );

    box-shadow:
        0 14px 34px
        rgba(
            0,
            0,
            0,
            0.2
        );
}

.admin-stat-value {
    display: block;

    margin-bottom: 8px;

    color:
        var(--color-gold-light);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(
            34px,
            4vw,
            48px
        );

    font-weight: 500;
    line-height: 1;
}

.admin-stat-card h3 {
    margin:
        0
        0
        7px;

    color:
        var(--color-text);

    font-family:
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif;

    font-size: 16px;
    font-weight: 700;
}

.admin-stat-card p {
    margin: 0;

    color:
        var(--color-text-subtle);

    font-size: 12px;
    line-height: 1.55;
}

.admin-dashboard-quick-links {
    margin-top: 30px;

    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.admin-dashboard-quick-links .button-secondary {
    border-color:
        rgba(
            105,
            72,
            100,
            0.34
        );

    background:
        #140919;
}

.admin-management-grid {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(
                0,
                1fr
            )
        );

    gap: 20px;
}

.admin-management-card {
    min-height: 300px;

    border-color:
        rgba(
            98,
            67,
            93,
            0.28
        );

    background:
        linear-gradient(
            180deg,
            #180b1d 0%,
            #110814 100%
        );
}

.admin-management-card:nth-child(2) {
    border-color:
        rgba(
            139,
            107,
            50,
            0.4
        );
}

.admin-management-card h3 {
    font-family:
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif;

    font-size: 21px;
    font-weight: 700;
}

.admin-management-card .dashboard-card-coming-soon {
    width: fit-content;

    padding:
        6px
        9px;

    border:
        1px solid
        rgba(
            105,
            72,
            100,
            0.27
        );

    background:
        rgba(
            10,
            5,
            12,
            0.42
        );

    color:
        #9d8b9e;
}

.admin-management-card:nth-child(2) .dashboard-card-coming-soon {
    border-color:
        rgba(
            139,
            107,
            50,
            0.32
        );

    color:
        var(--color-gold);
}

.admin-owner-notice {
    max-width: 1040px;

    margin:
        42px
        auto
        0;

    padding:
        27px
        30px;

    display: grid;

    grid-template-columns:
        auto
        minmax(
            0,
            1fr
        );

    gap: 21px;

    border:
        1px solid
        rgba(
            139,
            107,
            50,
            0.32
        );

    background:
        linear-gradient(
            90deg,
            rgba(
                38,
                18,
                42,
                0.82
            ),
            rgba(
                18,
                8,
                22,
                0.82
            )
        );
}

.admin-owner-notice-mark {
    color:
        var(--color-gold-light);

    font-size: 21px;
}

.admin-owner-notice h2 {
    margin:
        0
        8px;

    color:
        var(--color-text);

    font-family:
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif;

    font-size: 20px;
    font-weight: 700;
}

.admin-owner-notice p {
    margin: 0;

    color:
        var(--color-text-muted);

    font-size: 14px;
    line-height: 1.7;
}


/* ================================================================
   ADMINISTRATIVE DASHBOARD RESPONSIVE
================================================================ */

@media (max-width: 960px) {

    .admin-stat-grid,
    .admin-management-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );
    }

}


@media (max-width: 620px) {

    .admin-dashboard-hero .dashboard-status-line {
        width: 100%;
    }

    .admin-stat-grid,
    .admin-management-grid {
        grid-template-columns: 1fr;
    }

    .admin-stat-card,
    .admin-management-card {
        min-height: 0;
    }

    .admin-dashboard-quick-links {
        flex-direction: column;
    }

    .admin-dashboard-quick-links .button {
        width: 100%;
    }

    .admin-owner-notice {
        grid-template-columns: 1fr;

        padding:
            23px
            21px;
    }

}


/* ================================================================
   FORUM ADMINISTRATION
================================================================ */

/*
|--------------------------------------------------------------------------
| Forum Administration Page
|--------------------------------------------------------------------------
*/

.forum-admin-page {
    min-height:
        calc(
            100vh -
            var(--header-height)
        );

    background:
        #100713;
}


/*
|--------------------------------------------------------------------------
| Forum Administration Hero
|--------------------------------------------------------------------------
*/

.forum-admin-hero {
    position: relative;

    overflow: hidden;

    padding:
        clamp(
            76px,
            8vw,
            112px
        )
        0
        clamp(
            58px,
            7vw,
            86px
        );

    background:
        radial-gradient(
            circle at 82% 28%,
            rgba(
                81,
                40,
                95,
                0.24
            ),
            transparent 36%
        ),
        linear-gradient(
            180deg,
            #170b1d,
            #100713
        );

    border-bottom:
        1px solid
        rgba(
            219,
            193,
            125,
            0.14
        );
}

.forum-admin-hero::before {
    content: "";

    position: absolute;

    inset: 22px;

    border:
        1px solid
        rgba(
            219,
            193,
            125,
            0.07
        );

    pointer-events: none;
}

.forum-admin-hero .section-inner {
    position: relative;

    z-index: 1;
}

.forum-admin-hero h1 {
    max-width: 780px;

    margin:
        8px
        0
        20px;

    color:
        var(--color-text);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(
            42px,
            6vw,
            70px
        );

    font-weight: 500;

    line-height: 1.04;

    letter-spacing: -0.025em;
}

.forum-admin-hero .section-inner > p:not(.academy-overline) {
    max-width: 720px;

    margin:
        0
        0
        26px;

    color:
        var(--color-text-muted);

    font-size:
        clamp(
            16px,
            1.7vw,
            19px
        );

    line-height: 1.75;
}


/*
|--------------------------------------------------------------------------
| Forum Administration Content
|--------------------------------------------------------------------------
*/

.forum-admin-content {
    padding:
        clamp(
            64px,
            7vw,
            96px
        )
        0
        clamp(
            90px,
            10vw,
            132px
        );

    background:
        radial-gradient(
            circle at 16% 16%,
            rgba(
                81,
                40,
                95,
                0.12
            ),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #100713,
            #130817
        );
}


/*
|--------------------------------------------------------------------------
| Forum Messages
|--------------------------------------------------------------------------
*/

.forum-admin-page .form-message {
    margin:
        0
        0
        28px;

    padding:
        18px
        20px;

    border:
        1px solid
        rgba(
            219,
            193,
            125,
            0.18
        );

    background:
        rgba(
            25,
            12,
            31,
            0.86
        );

    color:
        var(--color-text-muted);

    font-size: 14px;

    line-height: 1.65;
}

.forum-admin-page .form-message h2 {
    margin:
        0
        0
        10px;

    color:
        var(--color-text);

    font-family:
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif;

    font-size: 17px;

    font-weight: 700;
}

.forum-admin-page .form-message ul {
    margin:
        0;

    padding-left: 20px;
}

.forum-admin-page .form-message-success {
    border-color:
        rgba(
            94,
            166,
            113,
            0.36
        );

    background:
        rgba(
            34,
            85,
            49,
            0.14
        );
}

.forum-admin-page .form-message-error {
    border-color:
        rgba(
            188,
            87,
            87,
            0.42
        );

    background:
        rgba(
            116,
            38,
            38,
            0.14
        );
}


/*
|--------------------------------------------------------------------------
| Forum Creation Grid
|--------------------------------------------------------------------------
*/

.forum-admin-form-grid {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(
                0,
                1fr
            )
        );

    gap: 28px;

    align-items: start;
}


/*
|--------------------------------------------------------------------------
| Forum Administration Panels
|--------------------------------------------------------------------------
*/

.forum-admin-panel,
.forum-structure-panel {
    position: relative;

    border:
        1px solid
        rgba(
            219,
            193,
            125,
            0.18
        );

    background:
        linear-gradient(
            180deg,
            rgba(
                31,
                15,
                38,
                0.96
            ),
            rgba(
                17,
                8,
                21,
                0.97
            )
        );

    box-shadow:
        0 18px 48px
        rgba(
            0,
            0,
            0,
            0.18
        );
}

.forum-admin-panel {
    min-width: 0;
}

.forum-admin-titlebar {
    padding:
        18px
        24px
        16px;

    border-bottom:
        1px solid
        rgba(
            219,
            193,
            125,
            0.12
        );

    background:
        linear-gradient(
            90deg,
            rgba(
                55,
                25,
                66,
                0.16
            ),
            rgba(
                31,
                15,
                38,
                0.04
            )
        );
}

.forum-admin-step {
    margin:
        0
        0
        4px;

    color:
        var(--color-gold);

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 0.18em;

    text-transform: uppercase;
}

.forum-admin-titlebar h2 {
    margin: 0;

    color:
        var(--color-text);

    font-size:
        clamp(
            23px,
            2.5vw,
            30px
        );

    font-weight: 500;

    line-height: 1.1;
}


/*
|--------------------------------------------------------------------------
| Forum Forms
|--------------------------------------------------------------------------
*/

.forum-admin-form {
    padding:
        28px;
}

.forum-admin-form .form-group {
    margin-bottom: 22px;
}

.forum-admin-form .form-group:last-child {
    margin-bottom: 0;
}

.forum-admin-form .form-control {
    background:
        rgba(
            7,
            3,
            10,
            0.72
        );

    color:
        var(--color-text);

    border-color:
        rgba(
            219,
            193,
            125,
            0.22
        );

    caret-color:
        var(--color-text);
}

.forum-admin-form .form-control::placeholder {
    color:
        #887c8a;
}

.forum-admin-form .form-control:focus,
.forum-admin-form .form-control:active {
    border-color:
        var(--color-gold);

    color:
        var(--color-text);

    background:
        rgba(
            12,
            6,
            16,
            0.9
        );

    box-shadow:
        0 0 0 3px
        rgba(
            196,
            161,
            90,
            0.11
        );
}

.forum-admin-form textarea.form-control {
    min-height: 132px;

    resize: vertical;

    line-height: 1.6;
}

.forum-admin-form select.form-control {
    cursor: pointer;
}

.forum-admin-form select.form-control[multiple] {
    min-height: 150px;

    padding:
        8px
        10px;
}

.forum-admin-form select.form-control option {
    padding:
        7px
        8px;

    background:
        #16091b;

    color:
        var(--color-text);
}

.forum-admin-form select.form-control option:checked {
    background:
        var(--color-plum);

    color:
        var(--color-white);
}

.forum-admin-page .form-help {
    margin:
        8px
        0
        0;

    color:
        var(--color-text-subtle);

    font-size: 12px;

    line-height: 1.55;
}

.forum-admin-page .form-help code {
    padding:
        2px
        6px;

    border:
        1px solid
        rgba(
            219,
            193,
            125,
            0.13
        );

    border-radius:
        4px;

    background:
        rgba(
            0,
            0,
            0,
            0.18
        );

    color:
        var(--color-gold-light);

    font-family:
        Consolas,
        "Courier New",
        monospace;

    font-size:
        0.96em;
}


/*
|--------------------------------------------------------------------------
| Forum Fieldsets
|--------------------------------------------------------------------------
*/

.forum-admin-fieldset {
    min-width: 0;

    margin:
        0
        0
        24px;

    padding:
        18px;

    border:
        1px solid
        rgba(
            219,
            193,
            125,
            0.17
        );

    background:
        rgba(
            8,
            4,
            11,
            0.24
        );
}

.forum-admin-fieldset legend {
    padding:
        0
        8px;

    color:
        var(--color-gold-light);

    font-family:
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 0.06em;
}

.forum-admin-choice {
    display: flex;

    align-items: center;

    gap: 10px;

    width: fit-content;

    margin:
        9px
        0;

    color:
        var(--color-text-muted);

    font-size: 14px;

    cursor: pointer;
}

.forum-admin-choice input {
    width: 17px;
    height: 17px;

    flex:
        0
        0
        auto;

    accent-color:
        var(--color-gold);
}

.forum-admin-choice:hover span {
    color:
        var(--color-text);
}


/*
|--------------------------------------------------------------------------
| Role Access Box
|--------------------------------------------------------------------------
*/

.forum-admin-role-box {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(
                0,
                1fr
            )
        );

    gap:
        8px
        14px;

    margin-top: 15px;

    padding:
        14px;

    border:
        1px solid
        rgba(
            219,
            193,
            125,
            0.13
        );

    background:
        rgba(
            0,
            0,
            0,
            0.15
        );
}

.forum-admin-role-box[hidden] {
    display: none;
}

.forum-admin-role-box label {
    display: flex;

    align-items: center;

    gap: 8px;

    min-width: 0;

    color:
        var(--color-text-muted);

    font-size: 13px;

    cursor: pointer;
}

.forum-admin-role-box input {
    width: 16px;
    height: 16px;

    flex:
        0
        0
        auto;

    accent-color:
        var(--color-gold);
}


/*
|--------------------------------------------------------------------------
| Forum Permission Groups
|--------------------------------------------------------------------------
*/

.forum-permission-group {
    margin-bottom: 18px;
}

.forum-permission-group:last-child {
    margin-bottom: 0;
}

.forum-permission-group > label {
    margin-bottom: 8px;

    color:
        var(--color-text-muted);

    font-size: 13px;

    line-height: 1.45;
}


/*
|--------------------------------------------------------------------------
| Thread Label Builder
|--------------------------------------------------------------------------
*/

.forum-label-row {
    display: grid;

    grid-template-columns:
        minmax(
            0,
            1fr
        )
        48px
        40px;

    gap: 10px;

    align-items: center;

    margin-bottom: 10px;
}

.forum-label-row .form-control {
    min-width: 0;
}

.forum-label-color {
    width: 48px;
    height: 48px;

    padding: 4px;

    border:
        1px solid
        rgba(
            219,
            193,
            125,
            0.22
        );

    border-radius:
        var(--radius-small);

    background:
        rgba(
            7,
            3,
            10,
            0.72
        );

    cursor: pointer;
}

.forum-label-remove {
    width: 40px;
    height: 40px;

    display: grid;
    place-items: center;

    padding: 0;

    border:
        1px solid
        rgba(
            186,
            82,
            82,
            0.32
        );

    border-radius:
        var(--radius-small);

    background:
        rgba(
            94,
            30,
            30,
            0.14
        );

    color:
        #e3a2a2;

    font-size: 23px;

    line-height: 1;

    cursor: pointer;

    transition:
        border-color var(--transition),
        background var(--transition),
        color var(--transition);
}

.forum-label-remove:hover,
.forum-label-remove:focus-visible {
    border-color:
        rgba(
            221,
            116,
            116,
            0.58
        );

    background:
        rgba(
            120,
            38,
            38,
            0.26
        );

    color:
        #ffd0d0;
}

.forum-add-label {
    margin-top: 6px;
}


/*
|--------------------------------------------------------------------------
| Empty Administration States
|--------------------------------------------------------------------------
*/

.forum-admin-empty {
    margin:
        28px;

    padding:
        20px;

    border:
        1px dashed
        rgba(
            219,
            193,
            125,
            0.20
        );

    background:
        rgba(
            196,
            161,
            90,
            0.035
        );

    color:
        var(--color-text-muted);

    font-size: 14px;

    line-height: 1.65;
}


/*
|--------------------------------------------------------------------------
| Current Forum Structure
|--------------------------------------------------------------------------
*/

.forum-structure-panel {
    margin-top: 34px;
}

.forum-structure-list {
    padding:
        8px
        28px
        28px;
}

.forum-structure-category {
    padding:
        24px
        0;

    border-bottom:
        1px solid
        rgba(
            219,
            193,
            125,
            0.14
        );
}

.forum-structure-category:last-child {
    border-bottom: 0;
}

.forum-structure-category > header {
    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    gap: 20px;

    margin-bottom: 16px;
}

.forum-structure-category h3 {
    margin:
        0
        0
        4px;

    color:
        var(--color-text);

    font-size:
        clamp(
            21px,
            2.4vw,
            27px
        );

    font-weight: 500;

    line-height: 1.2;
}

.forum-structure-category header p,
.forum-structure-forum p {
    margin: 0;

    color:
        var(--color-text-subtle);

    font-family:
        Consolas,
        "Courier New",
        monospace;

    font-size: 12px;
}

.forum-structure-badges,
.forum-structure-meta {
    display: flex;

    flex-wrap: wrap;

    gap: 7px;
}

.forum-structure-badges {
    justify-content: flex-end;
}

.forum-structure-badges span,
.forum-structure-meta span {
    display: inline-flex;

    align-items: center;

    min-height: 28px;

    padding:
        4px
        9px;

    border:
        1px solid
        rgba(
            219,
            193,
            125,
            0.17
        );

    border-radius:
        999px;

    background:
        rgba(
            196,
            161,
            90,
            0.045
        );

    color:
        var(--color-text-muted);

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 0.035em;
}

.forum-structure-forums {
    display: grid;

    gap: 9px;
}

.forum-structure-forum {
    display: grid;

    grid-template-columns:
        minmax(
            0,
            1fr
        )
        auto;

    gap: 18px;

    align-items: center;

    padding:
        16px
        18px;

    border:
        1px solid
        rgba(
            219,
            193,
            125,
            0.12
        );

    background:
        rgba(
            255,
            255,
            255,
            0.018
        );
}

.forum-structure-forum.is-subforum {
    margin-left: 30px;

    border-left:
        3px solid
        rgba(
            116,
            64,
            129,
            0.6
        );

    background:
        rgba(
            81,
            40,
            95,
            0.07
        );
}

.forum-structure-forum h4 {
    margin:
        0
        0
        4px;

    color:
        var(--color-text);

    font-family:
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif;

    font-size: 15px;

    font-weight: 700;
}

.forum-structure-meta {
    justify-content: flex-end;
}

.forum-structure-empty {
    margin:
        5px
        0
        0;

    color:
        var(--color-text-subtle);

    font-size: 13px;

    font-style: italic;
}


/*
|--------------------------------------------------------------------------
| Forum Administration Edit Controls
|--------------------------------------------------------------------------
*/

.forum-admin-edit-actions {
    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    align-items: center;

    margin-top: 8px;
}

.forum-structure-edit {
    min-height: 28px;

    padding:
        5px
        10px;

    font-size: 10px;

    line-height: 1.2;

    white-space: nowrap;
}


/* ================================================================
   FORUM ADMINISTRATION RESPONSIVE
================================================================ */

@media (max-width: 980px) {

    .forum-admin-form-grid {
        grid-template-columns: 1fr;
    }

    .forum-admin-panel {
        width: 100%;
    }

}


@media (max-width: 700px) {

    .forum-admin-hero {
        padding:
            70px
            0
            58px;
    }

    .forum-admin-hero::before {
        inset:
            16px
            10px;
    }

    .forum-admin-hero h1 {
        font-size:
            clamp(
                38px,
                11vw,
                52px
            );
    }

    .forum-admin-content {
        padding:
            52px
            0
            82px;
    }

    .forum-admin-titlebar,
    .forum-admin-form {
        padding:
            22px;
    }

    .forum-admin-role-box {
        grid-template-columns: 1fr;
    }

    .forum-structure-list {
        padding:
            5px
            22px
            22px;
    }

    .forum-structure-category > header {
        flex-direction: column;
    }

    .forum-structure-badges {
        justify-content: flex-start;
    }

    .forum-structure-forum {
        grid-template-columns: 1fr;
    }

    .forum-structure-meta {
        justify-content: flex-start;
    }

    .forum-structure-forum.is-subforum {
        margin-left: 18px;
    }

}


@media (max-width: 440px) {

    .forum-admin-edit-actions {
        display: grid;

        grid-template-columns: 1fr;
    }

    .forum-admin-edit-actions .button {
        width: 100%;
    }

    .forum-admin-titlebar,
    .forum-admin-form {
        padding:
            20px
            18px;
    }

    .forum-admin-fieldset {
        padding:
            16px
            14px;
    }

    .forum-label-row {
        grid-template-columns:
            minmax(
                0,
                1fr
            )
            44px
            38px;

        gap: 8px;
    }

    .forum-label-color {
        width: 44px;
        height: 44px;
    }

    .forum-label-remove {
        width: 38px;
        height: 38px;
    }

    .forum-admin-form > .button,
    .forum-add-label {
        width: 100%;
    }

    .forum-structure-list {
        padding:
            4px
            18px
            18px;
    }

    .forum-structure-forum {
        padding:
            15px;
    }

    .forum-structure-forum.is-subforum {
        margin-left: 10px;
    }

}


/*
|--------------------------------------------------------------------------
| Forum Administration Reduced Motion
|--------------------------------------------------------------------------
*/

@media (prefers-reduced-motion: reduce) {

    .forum-label-remove {
        transition: none;
    }

}
/* ================================================================
   BLACKTHORNE TITLE BAR + SIDEBAR RESTORATION
   2026-09-13
================================================================ */

/*
|--------------------------------------------------------------------------
| Unified Dark Title Bars
|--------------------------------------------------------------------------
|
| Keep every existing title-bar component on the same dark Blackthorne
| background instead of the brighter plum treatment.
|
*/

.sidebar-titlebar,
.member-content-titlebar,
.forum-admin-titlebar {
    background:
        #211027;

    border-color:
        rgba(
            101,
            68,
            96,
            0.28
        );

    border-bottom-color:
        rgba(
            126,
            86,
            120,
            0.34
        );
}

.sidebar-collapse-toggle {
    border-left-color:
        rgba(
            105,
            72,
            100,
            0.26
        );
}

.sidebar-collapse-toggle:hover,
.sidebar-collapse-toggle:focus-visible {
    background:
        rgba(
            255,
            255,
            255,
            0.025
        );
}


/*
|--------------------------------------------------------------------------
| Restore Profile / Points Layout
|--------------------------------------------------------------------------
*/

.sidebar-profile-details {
    padding:
        14px
        16px
        15px;
}

.sidebar-profile-details > p {
    margin:
        0
        0
        10px;
}

.sidebar-profile-details > p:last-child {
    margin-bottom: 0;
}

.sidebar-user-role {
    color:
        var(--color-text-muted);
}

.sidebar-user-points {
    margin-top: 14px;

    padding-top: 13px;

    border-top:
        1px solid
        rgba(
            105,
            72,
            100,
            0.26
        );
}

.sidebar-user-points p {
    display: flex;

    align-items: baseline;

    justify-content: space-between;

    gap: 16px;

    margin:
        0
        0
        9px;

    color:
        var(--color-text-muted);

    font-size: 14px;
}

.sidebar-user-points p:last-child {
    margin-bottom: 0;
}

.sidebar-user-points p > span {
    color:
        var(--color-text-subtle);
}

.sidebar-class-year {
    margin-top: 13px !important;

    padding-top: 12px;

    border-top:
        1px solid
        rgba(
            105,
            72,
            100,
            0.20
        );
}


/*
|--------------------------------------------------------------------------
| Sidebar Navigation — No Decorative Bullets
|--------------------------------------------------------------------------
*/

.sidebar-link-list {
    list-style: none;
}

.sidebar-link-list a {
    padding:
        8px
        16px;

    list-style: none;
}

.sidebar-link-list a::before {
    content: none;
    display: none;
}

.sidebar-link-list a:hover,
.sidebar-link-list a:focus-visible {
    padding-left: 19px;
}


/*
|--------------------------------------------------------------------------
| Dynamic Forum Navigation — Clean Link Treatment
|--------------------------------------------------------------------------
*/

.sidebar-forum-main-link {
    padding:
        10px
        16px
        9px;
}

.sidebar-forum-main-link::before {
    content: none;
    display: none;
}

.sidebar-forum-main-link:hover,
.sidebar-forum-main-link:focus-visible {
    padding-left: 19px;
}

.sidebar-subforum-link::before {
    content: none;
    display: none;
}

.sidebar-subforum-link {
    padding:
        7px
        12px
        7px
        10px;
}


/*
|--------------------------------------------------------------------------
| Small-Screen Sidebar Profile
|--------------------------------------------------------------------------
*/

@media (max-width: 600px) {

    .sidebar-user-points p {
        gap: 12px;
    }

    .sidebar-link-list a {
        padding-left: 15px;
        padding-right: 15px;
    }

    .sidebar-link-list a:hover,
    .sidebar-link-list a:focus-visible {
        padding-left: 18px;
    }

    .sidebar-forum-main-link {
        padding-left: 15px;
        padding-right: 15px;
    }

    .sidebar-forum-main-link:hover,
    .sidebar-forum-main-link:focus-visible {
        padding-left: 18px;
    }

}
/* ================================================================
   FORUM ADMIN MODALS + TOOLBAR + DELETE SPACING
   2026-09-13
================================================================ */

/*
|--------------------------------------------------------------------------
| Forum Tools Toolbar
|--------------------------------------------------------------------------
*/

.forum-admin-actions {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 24px;

    margin:
        0
        0
        24px;

    padding:
        20px
        22px;

    border:
        1px solid
        rgba(
            105,
            72,
            100,
            0.28
        );

    border-radius:
        var(--radius-lg);

    background:
        rgba(
            17,
            8,
            20,
            0.72
        );
}

.forum-admin-actions h2 {
    margin:
        2px
        0
        6px;

    color:
        var(--color-text);

    font-size:
        clamp(
            22px,
            2.3vw,
            28px
        );
}

.forum-admin-actions p {
    margin: 0;

    color:
        var(--color-text-muted);
}

.forum-admin-action-buttons {
    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    justify-content: flex-end;
}

.forum-admin-action-buttons .button {
    min-width: 145px;
}


/*
|--------------------------------------------------------------------------
| Forum Admin Modals
|--------------------------------------------------------------------------
*/

.forum-admin-modal {
    width:
        min(
            820px,
            calc(100vw - 32px)
        );

    max-height:
        min(
            88vh,
            900px
        );

    margin: auto;

    padding: 0;

    overflow: auto;

    border:
        1px solid
        rgba(
            126,
            86,
            120,
            0.40
        );

    border-radius:
        var(--radius-lg);

    background:
        #100712;

    color:
        var(--color-text);

    box-shadow:
        0
        28px
        80px
        rgba(
            0,
            0,
            0,
            0.58
        );
}

.forum-admin-modal::backdrop {
    background:
        rgba(
            5,
            2,
            7,
            0.78
        );

    backdrop-filter:
        blur(3px);
}

.forum-admin-modal[open] {
    animation:
        forum-admin-modal-in
        160ms
        ease-out;
}

@keyframes forum-admin-modal-in {
    from {
        opacity: 0;
        transform:
            translateY(10px)
            scale(0.99);
    }

    to {
        opacity: 1;
        transform:
            translateY(0)
            scale(1);
    }
}

.forum-admin-modal-titlebar {
    position: sticky;

    top: 0;

    z-index: 3;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 16px;

    background:
        #211027;
}

.forum-admin-modal-close {
    display: inline-grid;

    flex: 0 0 auto;

    place-items: center;

    width: 38px;
    height: 38px;

    margin: 0;

    padding: 0;

    border:
        1px solid
        rgba(
            219,
            193,
            125,
            0.20
        );

    border-radius: 50%;

    background:
        rgba(
            255,
            255,
            255,
            0.02
        );

    color:
        var(--color-gold-light);

    font: inherit;

    font-size: 24px;

    line-height: 1;

    cursor: pointer;

    transition:
        border-color var(--transition),
        background-color var(--transition),
        color var(--transition);
}

.forum-admin-modal-close:hover,
.forum-admin-modal-close:focus-visible {
    border-color:
        rgba(
            219,
            193,
            125,
            0.46
        );

    background:
        rgba(
            219,
            193,
            125,
            0.07
        );

    color:
        #fff4c4;
}

.forum-admin-modal .forum-admin-form {
    padding-bottom: 24px;
}


/*
|--------------------------------------------------------------------------
| Delete / Danger Zone
|--------------------------------------------------------------------------
*/

.forum-admin-danger-zone {
    margin:
        28px
        24px
        24px;

    padding:
        20px
        22px;

    border:
        1px solid
        rgba(
            174,
            68,
            74,
            0.28
        );

    border-radius:
        var(--radius-md);

    background:
        rgba(
            74,
            20,
            26,
            0.10
        );
}

.forum-admin-danger-zone h3 {
    margin:
        0
        0
        8px;

    color:
        #f3dede;

    font-size: 18px;
}

.forum-admin-danger-zone p {
    margin:
        0
        0
        16px;

    color:
        var(--color-text-muted);

    line-height: 1.55;
}

.forum-admin-danger-confirm {
    display: flex;

    align-items: flex-start;

    gap: 10px;

    margin:
        0
        0
        16px;

    color:
        var(--color-text);

    line-height: 1.45;
}

.forum-admin-danger-confirm input {
    flex: 0 0 auto;

    margin-top: 3px;
}

.forum-admin-delete-button {
    border-color:
        rgba(
            190,
            77,
            84,
            0.50
        ) !important;

    background:
        rgba(
            111,
            34,
            42,
            0.78
        ) !important;

    color:
        #fff1f1 !important;
}

.forum-admin-delete-button:hover,
.forum-admin-delete-button:focus-visible {
    border-color:
        rgba(
            224,
            104,
            111,
            0.72
        ) !important;

    background:
        rgba(
            133,
            41,
            51,
            0.94
        ) !important;
}


/*
|--------------------------------------------------------------------------
| Modal / Toolbar Responsive
|--------------------------------------------------------------------------
*/

@media (max-width: 760px) {

    .forum-admin-actions {
        display: grid;

        grid-template-columns: 1fr;

        align-items: stretch;
    }

    .forum-admin-action-buttons {
        justify-content: stretch;
    }

    .forum-admin-action-buttons .button {
        flex: 1 1 180px;

        min-width: 0;
    }

    .forum-admin-modal {
        width:
            min(
                94vw,
                820px
            );

        max-height: 90vh;
    }

}

@media (max-width: 520px) {

    .forum-admin-actions {
        padding:
            18px
            16px;
    }

    .forum-admin-action-buttons {
        display: grid;

        grid-template-columns: 1fr;
    }

    .forum-admin-action-buttons .button {
        width: 100%;
    }

    .forum-admin-modal {
        width:
            calc(100vw - 18px);

        max-height:
            calc(100vh - 18px);

        border-radius:
            12px;
    }

    .forum-admin-danger-zone {
        margin:
            24px
            16px
            16px;

        padding:
            18px
            16px;
    }

}


/* ================================================================
   PUBLIC FORUM INDEX + BOARD PAGES
   ================================================================ */

.forum-index-page,
.forum-board-page {
    min-height: 70vh;
    background: linear-gradient(180deg, #120b17 0%, #0e0812 100%);
    color: var(--color-text);
}

.forum-index-page .section-inner,
.forum-board-page .section-inner {
    width: min(calc(100% - 40px), var(--content-width));
    margin: 0 auto;
}

.forum-index-page a,
.forum-board-page a {
    text-underline-offset: 3px;
}


/* Forum index header */

.forum-index-header {
    padding: 42px 0 28px;
    border-bottom: 1px solid rgba(255,255,255,.07);
    background:
        radial-gradient(circle at top left, rgba(116,64,129,.16), transparent 40%),
        linear-gradient(180deg, #170b1c 0%, #120914 100%);
}

.forum-index-header .academy-overline {
    margin-bottom: 7px;
}

.forum-index-header h1 {
    margin: 0 0 8px;
    color: var(--color-white);
    font-family: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
    font-size: clamp(34px, 4vw, 48px);
    line-height: 1.05;
}

.forum-index-intro {
    max-width: 720px;
    margin: 0;
    color: var(--color-text-muted);
    font-size: 15px;
    line-height: 1.65;
}


/* Forum index categories */

.forum-index-content {
    padding: 34px 0 70px;
}

.forum-index-categories {
    display: grid;
    gap: 24px;
}

.forum-index-category,
.forum-board-subforums,
.forum-thread-list-section {
    overflow: hidden;
    border: 1px solid rgba(116,64,129,.28);
    border-radius: 12px;
    background: linear-gradient(180deg, #160a1a 0%, #110714 100%);
    box-shadow: 0 14px 34px rgba(0,0,0,.18);
}

.forum-index-category-titlebar,
.forum-board-section-titlebar {
    min-height: 48px;
    padding: 11px 17px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border-bottom: 1px solid rgba(219,193,125,.16);
    background: linear-gradient(180deg, #2b1532 0%, #211027 100%);
}

.forum-index-category-titlebar h2,
.forum-board-section-titlebar h2 {
    margin: 0;
    color: var(--color-white);
    font-family: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
    font-size: 18px;
    line-height: 1.2;
    letter-spacing: .015em;
}

.forum-index-board + .forum-index-board {
    border-top: 1px solid rgba(255,255,255,.07);
}

.forum-index-board-main {
    display: grid;
    grid-template-columns: minmax(0,1fr) 90px 90px minmax(230px,.58fr);
    min-height: 118px;
}

.forum-index-board-copy {
    padding: 20px 22px;
}

.forum-index-board-copy h3 {
    margin: 0 0 6px;
    font-size: 18px;
    line-height: 1.25;
}

.forum-index-board-copy h3 a {
    color: var(--color-gold-light);
    text-decoration: none;
    transition: color var(--transition);
}

.forum-index-board-copy h3 a:hover,
.forum-index-board-copy h3 a:focus-visible {
    color: var(--color-white);
}

.forum-index-board-description {
    margin: 0 0 10px;
    color: var(--color-text-muted);
    font-size: 13px;
    line-height: 1.55;
}

.forum-index-subboards,
.forum-index-moderators {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 7px;
    color: var(--color-text-subtle);
    font-size: 12px;
    line-height: 1.5;
}

.forum-index-subboards-label,
.forum-index-moderators-label {
    color: var(--color-text-muted);
    font-weight: 700;
}

.forum-index-subboard-links {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 3px 9px;
}

.forum-index-subboard-links a,
.forum-index-moderators a {
    color: var(--color-gold-light);
    text-decoration: none;
}

.forum-index-subboard-links a:hover,
.forum-index-moderators a:hover {
    color: var(--color-white);
}

.forum-index-board-stat,
.forum-subboard-stat {
    padding: 18px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-left: 1px solid rgba(255,255,255,.07);
    color: var(--color-text-subtle);
    text-align: center;
}

.forum-index-board-stat strong,
.forum-subboard-stat strong {
    color: var(--color-text);
    font-size: 17px;
    line-height: 1.1;
}

.forum-index-board-stat span,
.forum-subboard-stat span {
    margin-top: 4px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.forum-index-last-post,
.forum-subboard-last-post,
.forum-thread-last-post {
    padding: 14px 17px;
    display: flex;
    align-items: center;
    border-left: 1px solid rgba(255,255,255,.07);
    background: rgba(255,255,255,.012);
}

.forum-index-last-post-inner,
.forum-last-post-card {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.forum-index-last-post-avatar,
.forum-last-post-avatar {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid rgba(219,193,125,.34);
    border-radius: 50%;
    background: linear-gradient(180deg, #341b3c 0%, #211027 100%);
    color: var(--color-gold-light);
    text-decoration: none;
    font-size: 12px;
    font-weight: 800;
}

.forum-index-last-post-avatar img,
.forum-last-post-avatar img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.forum-index-last-post-copy,
.forum-last-post-card > div {
    min-width: 0;
}

.forum-index-last-thread,
.forum-last-post-thread,
.forum-last-post-card > div > a:first-child {
    display: block;
    max-width: 190px;
    overflow: hidden;
    color: var(--color-text);
    text-decoration: none;
    font-size: 11px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.forum-index-last-thread:hover,
.forum-last-post-thread:hover,
.forum-last-post-card > div > a:first-child:hover {
    color: var(--color-gold-light);
}

.forum-index-last-post-copy p,
.forum-last-post-card p {
    margin: 3px 0 0;
    color: var(--color-text-subtle);
    font-size: 11px;
    line-height: 1.35;
}

.forum-index-last-post-copy time,
.forum-last-post-card time {
    display: block;
    margin-top: 3px;
    color: var(--color-text-subtle);
    font-size: 10px;
    line-height: 1.35;
}

.forum-index-last-user {
    color: var(--color-gold-light);
    text-decoration: none;
}

.forum-index-category-empty {
    padding: 24px 22px;
    color: var(--color-text-subtle);
    font-size: 13px;
}

.forum-index-empty,
.forum-thread-empty {
    padding: 36px 22px;
    color: var(--color-text-subtle);
    text-align: center;
}

.forum-index-empty {
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-background-soft);
}

.forum-index-empty h2 {
    margin: 0 0 8px;
    color: var(--color-white);
}

.forum-index-empty p {
    margin: 0;
}


/* Individual board header */

.forum-board-header {
    padding: 26px 0 28px;
    border-bottom: 1px solid rgba(255,255,255,.07);
    background: linear-gradient(180deg, #170b1c 0%, #120914 100%);
}

.forum-breadcrumbs {
    margin-bottom: 17px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    color: var(--color-text-subtle);
    font-size: 12px;
    line-height: 1.4;
}

.forum-breadcrumbs a {
    color: var(--color-gold-light);
    text-decoration: none;
}

.forum-breadcrumbs a:hover {
    color: var(--color-white);
}

.forum-board-heading-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
}

.forum-board-heading-row h1 {
    margin: 0 0 8px;
    color: var(--color-white);
    font-family: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
    font-size: clamp(31px, 4vw, 44px);
    line-height: 1.08;
}

.forum-board-description {
    max-width: 840px;
    margin: 0;
    color: var(--color-text-muted);
    font-size: 14px;
    line-height: 1.65;
}

.forum-board-locked-badge {
    flex-shrink: 0;
    padding: 7px 10px;
    border: 1px solid rgba(219,193,125,.24);
    border-radius: 999px;
    background: rgba(196,161,90,.08);
    color: var(--color-gold-light);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.forum-board-moderators {
    margin-top: 14px;
    color: var(--color-text-subtle);
    font-size: 12px;
}

.forum-board-moderators strong {
    color: var(--color-text-muted);
}

.forum-board-moderators a {
    color: var(--color-gold-light);
    text-decoration: none;
}

.forum-board-content {
    padding: 30px 0 72px;
}

.forum-board-subforums {
    margin-bottom: 24px;
}

.forum-board-section-titlebar > div {
    min-width: 0;
}

.forum-board-section-kicker {
    margin: 0 0 2px;
    color: var(--color-gold-light);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.forum-new-thread-placeholder {
    padding: 7px 11px;
    border: 1px solid rgba(219,193,125,.25);
    border-radius: 6px;
    background: rgba(219,193,125,.08);
    color: var(--color-gold-light);
    font-size: 11px;
    font-weight: 800;
}


/* Subboards */

.forum-subboard-row {
    display: grid;
    grid-template-columns: minmax(0,1fr) 88px 88px minmax(220px,.5fr);
    min-height: 100px;
}

.forum-subboard-row + .forum-subboard-row {
    border-top: 1px solid rgba(255,255,255,.07);
}

.forum-subboard-copy {
    padding: 18px 20px;
}

.forum-subboard-copy h3 {
    margin: 0 0 5px;
    font-size: 16px;
}

.forum-subboard-copy h3 a {
    color: var(--color-gold-light);
    text-decoration: none;
}

.forum-subboard-copy h3 a:hover {
    color: var(--color-white);
}

.forum-subboard-copy p {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 12px;
    line-height: 1.55;
}

.forum-no-last-post {
    color: var(--color-text-subtle);
    font-size: 11px;
}


/* Thread toolbar */

.forum-thread-toolbar {
    padding: 13px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border-bottom: 1px solid rgba(255,255,255,.07);
    background: rgba(255,255,255,.018);
}

.forum-thread-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
}

.forum-thread-pagination a,
.forum-thread-pagination span {
    min-width: 30px;
    min-height: 30px;
    padding: 5px 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 5px;
    background: rgba(255,255,255,.025);
    color: var(--color-text-muted);
    text-decoration: none;
    font-size: 11px;
    font-weight: 700;
}

.forum-thread-pagination a:hover {
    border-color: rgba(219,193,125,.28);
    color: var(--color-white);
}

.forum-thread-pagination .is-current {
    border-color: rgba(219,193,125,.38);
    background: rgba(196,161,90,.14);
    color: var(--color-gold-light);
}

.forum-thread-pagination .is-disabled {
    opacity: .45;
    cursor: default;
}

.forum-thread-search {
    display: flex;
    width: min(100%,330px);
}

.forum-thread-search input {
    min-width: 0;
    width: 100%;
    height: 34px;
    padding: 7px 10px;
    border: 1px solid rgba(255,255,255,.12);
    border-right: 0;
    border-radius: 6px 0 0 6px;
    outline: none;
    background: #100713;
    color: var(--color-text);
    font: inherit;
    font-size: 12px;
}

.forum-thread-search input:focus {
    border-color: rgba(219,193,125,.45);
}

.forum-thread-search button {
    height: 34px;
    padding: 0 13px;
    border: 1px solid rgba(219,193,125,.26);
    border-radius: 0 6px 6px 0;
    background: linear-gradient(180deg, #351b3d 0%, #28122f 100%);
    color: var(--color-gold-light);
    cursor: pointer;
    font-size: 11px;
    font-weight: 800;
}

.forum-thread-search button:hover {
    color: var(--color-white);
}

.forum-search-summary {
    padding: 10px 16px;
    border-bottom: 1px solid rgba(255,255,255,.06);
    color: var(--color-text-subtle);
    font-size: 11px;
}

.forum-search-summary strong {
    color: var(--color-text-muted);
}

.forum-search-summary a {
    margin-left: 8px;
    color: var(--color-gold-light);
    text-decoration: none;
}


/* Thread rows */

.forum-thread-row {
    display: grid;
    grid-template-columns: 62px minmax(0,1fr) 130px minmax(205px,.42fr);
    min-height: 86px;
    position: relative;
    background: rgba(255,255,255,.005);
}

.forum-thread-row + .forum-thread-row {
    border-top: 1px solid rgba(255,255,255,.07);
}

.forum-thread-row:hover {
    background: rgba(255,255,255,.018);
}

.forum-thread-row.is-announcement {
    background: linear-gradient(90deg, rgba(196,161,90,.07), rgba(196,161,90,.015) 55%, transparent);
}

.forum-thread-row.is-pinned:not(.is-announcement) {
    background: linear-gradient(90deg, rgba(116,64,129,.07), transparent 52%);
}

.forum-thread-status {
    padding: 16px 10px;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    gap: 5px;
    border-right: 1px solid rgba(255,255,255,.06);
}

.forum-thread-status-icon {
    width: 23px;
    height: 23px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(219,193,125,.21);
    border-radius: 5px;
    background: rgba(196,161,90,.07);
    color: var(--color-gold-light);
}

.forum-thread-status-icon svg {
    width: 13px;
    height: 13px;
    display: block;
}

.forum-thread-status-icon.is-regular {
    border-color: rgba(116,64,129,.27);
    background: rgba(116,64,129,.08);
    color: var(--color-plum-light);
}

.forum-thread-copy {
    min-width: 0;
    padding: 16px 18px;
}

.forum-thread-copy h3 {
    margin: 0 0 5px;
    font-size: 15px;
    line-height: 1.3;
}

.forum-thread-copy h3 a {
    color: var(--color-text);
    text-decoration: none;
}

.forum-thread-copy h3 a:hover {
    color: var(--color-gold-light);
}

.forum-thread-labels {
    margin-bottom: 6px;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.forum-thread-label {
    --thread-label-color: var(--color-plum-light);
    padding: 3px 7px;
    border: 1px solid var(--thread-label-color);
    border-radius: 999px;
    background: rgba(255,255,255,.025);
    color: var(--thread-label-color);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.forum-thread-byline {
    margin: 0;
    color: var(--color-text-subtle);
    font-size: 10px;
    line-height: 1.4;
}

.forum-thread-byline a {
    color: var(--color-gold-light);
    text-decoration: none;
    font-weight: 700;
}

.forum-thread-counts {
    padding: 13px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border-left: 1px solid rgba(255,255,255,.06);
    color: var(--color-text-subtle);
    text-align: center;
    font-size: 10px;
}

.forum-thread-counts span {
    display: block;
}

.forum-thread-counts strong {
    color: var(--color-text-muted);
    font-size: 12px;
}

.forum-thread-last-post .forum-last-post-avatar {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
}

.forum-thread-last-post .forum-last-post-card > div > a:first-child {
    max-width: 160px;
    color: var(--color-gold-light);
}

.forum-thread-pagination-bottom {
    padding: 14px 15px;
    border-top: 1px solid rgba(255,255,255,.07);
    background: rgba(255,255,255,.012);
}


/* Error / restricted */

.forum-board-error {
    padding: 70px 0;
}

.forum-board-error .section-inner {
    padding: 36px 28px;
    border: 1px solid rgba(116,64,129,.28);
    border-radius: 12px;
    background: linear-gradient(180deg, #160a1a 0%, #110714 100%);
    text-align: center;
}

.forum-board-error h1 {
    margin: 0 0 10px;
    color: var(--color-white);
}

.forum-board-error p {
    margin: 0 0 22px;
    color: var(--color-text-muted);
}


/* Responsive */

@media (max-width: 1040px) {
    .forum-index-board-main,
    .forum-subboard-row {
        grid-template-columns: minmax(0,1fr) 76px 76px minmax(190px,.47fr);
    }

    .forum-thread-row {
        grid-template-columns: 54px minmax(0,1fr) 105px minmax(185px,.4fr);
    }
}

@media (max-width: 860px) {
    .forum-index-board-main,
    .forum-subboard-row {
        grid-template-columns: minmax(0,1fr) 82px 82px;
    }

    .forum-index-last-post,
    .forum-subboard-last-post {
        grid-column: 1 / -1;
        border-top: 1px solid rgba(255,255,255,.06);
        border-left: 0;
    }

    .forum-thread-row {
        grid-template-columns: 52px minmax(0,1fr) 110px;
    }

    .forum-thread-last-post {
        grid-column: 1 / -1;
        border-top: 1px solid rgba(255,255,255,.06);
        border-left: 0;
    }

    .forum-thread-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .forum-thread-search {
        width: 100%;
    }
}

@media (max-width: 640px) {
    .forum-index-page .section-inner,
    .forum-board-page .section-inner {
        width: min(calc(100% - 24px), var(--content-width));
    }

    .forum-index-header {
        padding: 30px 0 22px;
    }

    .forum-index-content,
    .forum-board-content {
        padding-top: 22px;
    }

    .forum-index-category-titlebar,
    .forum-board-section-titlebar {
        min-height: 44px;
        padding: 10px 13px;
    }

    .forum-index-category-titlebar h2,
    .forum-board-section-titlebar h2 {
        font-size: 16px;
    }

    .forum-index-board-main,
    .forum-subboard-row {
        grid-template-columns: 1fr 1fr;
    }

    .forum-index-board-copy,
    .forum-subboard-copy {
        grid-column: 1 / -1;
        padding: 17px 16px;
    }

    .forum-index-board-stat,
    .forum-subboard-stat {
        min-height: 62px;
        border-top: 1px solid rgba(255,255,255,.06);
    }

    .forum-index-last-post,
    .forum-subboard-last-post {
        grid-column: 1 / -1;
        min-height: 68px;
        padding: 12px 15px;
    }

    .forum-board-heading-row {
        flex-direction: column;
        gap: 12px;
    }

    .forum-board-locked-badge {
        align-self: flex-start;
    }

    .forum-thread-row {
        grid-template-columns: 46px minmax(0,1fr);
    }

    .forum-thread-status {
        grid-row: 1 / 3;
        align-content: flex-start;
        padding-top: 17px;
    }

    .forum-thread-copy {
        padding: 15px 14px;
    }

    .forum-thread-counts {
        grid-column: 2;
        padding: 8px 14px 12px;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 14px;
        border-top: 1px solid rgba(255,255,255,.04);
        border-left: 0;
        text-align: left;
    }

    .forum-thread-last-post {
        grid-column: 1 / -1;
    }

    .forum-thread-toolbar {
        padding: 11px 12px;
    }
}

@media (max-width: 420px) {
    .forum-index-last-post-avatar,
    .forum-last-post-avatar {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
    }

    .forum-thread-pagination {
        gap: 4px;
    }

    .forum-thread-pagination a,
    .forum-thread-pagination span {
        min-width: 27px;
        font-size: 10px;
    }

    .forum-thread-search button {
        padding: 0 10px;
    }
}


/* ================================================================
   FORUM INDEX REFERENCE-LAYOUT CORRECTIONS
   Matches the supplied forum reference structure more closely:
   large board area, narrow stat wedges, last-post area, and a
   separate sub-board / moderator strip beneath each board row.
   ================================================================ */

.forum-index-content {
    padding-top: 26px;
}

.forum-index-categories {
    gap: 20px;
}

.forum-index-category {
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.forum-index-category-titlebar {
    min-height: 54px;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(116,64,129,.34);
    border-radius: 4px 4px 0 0;
    background: #211027;
}

.forum-index-category-titlebar h2 {
    min-height: 54px;
    margin: 0;
    padding: 0 20px;
    display: flex;
    align-items: center;
    color: #fff;
    font-size: 20px;
    letter-spacing: .01em;
}

.forum-index-board-list {
    display: grid;
    gap: 5px;
    padding-top: 5px;
}

.forum-index-board {
    border: 0 !important;
    background: transparent;
}

.forum-index-board-top {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        92px
        92px
        minmax(290px, .62fr);
    min-height: 105px;
    border: 1px solid rgba(116,64,129,.28);
    border-radius: 2px;
    background: rgba(14,7,17,.86);
}

.forum-index-board-copy {
    min-width: 0;
    padding: 20px 22px 18px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.forum-index-board-copy h3 {
    margin: 0 0 7px;
    font-size: 18px;
    line-height: 1.2;
}

.forum-index-board-copy h3 a {
    color: var(--color-gold-light);
    text-decoration: none;
}

.forum-index-board-description {
    max-width: 760px;
    margin: 0;
    color: var(--color-text-muted);
    font-size: 13px;
    line-height: 1.48;
}

/*
 * Narrow count cells. The pseudo-elements create the angled
 * separator look from the reference without changing markup.
 */
.forum-index-board-stat {
    position: relative;
    z-index: 1;
    padding: 12px 8px;
    border-left: 1px solid rgba(116,64,129,.22);
    background: rgba(255,255,255,.012);
}

.forum-index-board-stat::before {
    content: "";
    position: absolute;
    top: -1px;
    left: -15px;
    width: 28px;
    height: calc(100% + 2px);
    z-index: -1;
    border-left: 1px solid rgba(116,64,129,.22);
    background: rgba(14,7,17,.92);
    transform: skewX(-27deg);
    transform-origin: top left;
}

.forum-index-board-stat strong {
    color: #fff;
    font-size: 18px;
    line-height: 1;
}

.forum-index-board-stat span {
    margin-top: 5px;
    color: var(--color-text-subtle);
    font-size: 9px;
    letter-spacing: .055em;
}

.forum-index-last-post {
    position: relative;
    z-index: 0;
    padding: 15px 20px 15px 24px;
    border-left: 1px solid rgba(116,64,129,.22);
    background: rgba(255,255,255,.008);
}

.forum-index-last-post::before {
    content: "";
    position: absolute;
    top: -1px;
    left: -15px;
    width: 28px;
    height: calc(100% + 2px);
    z-index: -1;
    border-left: 1px solid rgba(116,64,129,.22);
    background: rgba(14,7,17,.9);
    transform: skewX(-27deg);
    transform-origin: top left;
}

.forum-index-last-post-inner {
    width: 100%;
}

.forum-index-last-post-avatar {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
}

.forum-index-last-thread {
    max-width: 245px;
    color: var(--color-gold-light);
    font-size: 12px;
}

.forum-index-last-post-copy p {
    margin-top: 4px;
}

.forum-index-last-post-copy time {
    margin-top: 4px;
}

.forum-index-no-posts {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 12px;
    line-height: 1.45;
}

/*
 * Separate strip underneath the row, matching the supplied reference.
 */
.forum-index-board-meta-strip {
    min-height: 38px;
    padding: 9px 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px 22px;
    border: 1px solid rgba(116,64,129,.28);
    border-top: 0;
    border-radius: 0 0 2px 2px;
    background: rgba(20,10,24,.9);
}

.forum-index-board-meta-strip .forum-index-subboards,
.forum-index-board-meta-strip .forum-index-moderators {
    margin: 0;
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 5px;
    font-size: 11px;
    line-height: 1.4;
}

.forum-index-board-meta-strip .forum-index-subboards-label,
.forum-index-board-meta-strip .forum-index-moderators-label {
    color: #fff;
    font-weight: 800;
}

.forum-index-board-meta-strip .forum-index-subboard-links,
.forum-index-board-meta-strip .forum-index-moderator-links {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 5px 9px;
}

.forum-index-board-meta-strip a {
    color: var(--color-gold-light);
    text-decoration: none;
}

.forum-index-board-meta-strip a:hover,
.forum-index-board-meta-strip a:focus-visible {
    color: #fff;
}

/* If a category is empty, keep a compact reference-style row. */
.forum-index-category-empty {
    margin-top: 5px;
    padding: 18px 20px;
    border: 1px solid rgba(116,64,129,.28);
    background: rgba(14,7,17,.86);
}

/*
|--------------------------------------------------------------------------
| Responsive forum index
|--------------------------------------------------------------------------
*/

@media (max-width: 1080px) {
    .forum-index-board-top {
        grid-template-columns:
            minmax(0,1fr)
            78px
            78px
            minmax(245px,.55fr);
    }

    .forum-index-last-thread {
        max-width: 205px;
    }
}

@media (max-width: 860px) {
    .forum-index-board-top {
        grid-template-columns:
            minmax(0,1fr)
            84px
            84px;
    }

    .forum-index-last-post {
        grid-column: 1 / -1;
        min-height: 72px;
        border-top: 1px solid rgba(116,64,129,.22);
        border-left: 0;
        padding-left: 20px;
    }

    .forum-index-last-post::before {
        display: none;
    }

    .forum-index-board-stat::before {
        display: none;
    }

    .forum-index-board-stat {
        border-left: 1px solid rgba(116,64,129,.22);
    }
}

@media (max-width: 640px) {
    .forum-index-category-titlebar,
    .forum-index-category-titlebar h2 {
        min-height: 46px;
    }

    .forum-index-category-titlebar h2 {
        padding: 0 14px;
        font-size: 17px;
    }

    .forum-index-board-top {
        grid-template-columns: 1fr 1fr;
        min-height: 0;
    }

    .forum-index-board-copy {
        grid-column: 1 / -1;
        padding: 17px 15px;
        border-bottom: 1px solid rgba(116,64,129,.22);
    }

    .forum-index-board-stat {
        min-height: 64px;
        border-left: 0;
    }

    .forum-index-board-stat + .forum-index-board-stat {
        border-left: 1px solid rgba(116,64,129,.22);
    }

    .forum-index-last-post {
        grid-column: 1 / -1;
    }

    .forum-index-board-meta-strip {
        padding: 9px 14px;
        gap: 6px 16px;
    }
}


/* ================================================================
   FORUM TYPOGRAPHY + SIDEBAR LINK CORRECTIONS
   ================================================================ */

/*
|--------------------------------------------------------------------------
| Sidebar Forum Links
|--------------------------------------------------------------------------
| Main boards in dynamic forum sidebar categories should use the same
| gold link treatment as the rest of the member sidebar.
*/

.sidebar-forum-main-link,
.sidebar-forum-main-link:visited {
    color: var(--color-gold-light);
    font-family: "Segoe UI", Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: 400;
}

.sidebar-forum-main-link:hover,
.sidebar-forum-main-link:focus-visible {
    color: #f0dda6;
}


/*
|--------------------------------------------------------------------------
| Forum Category Titlebar Typography
|--------------------------------------------------------------------------
| Do not inherit the site's Georgia heading font here. The forum reference
| uses a cleaner, tighter interface-style heading.
*/

.forum-index-category-titlebar h2 {
    font-family: "Segoe UI", Arial, Helvetica, sans-serif;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.2;
}


/*
|--------------------------------------------------------------------------
| Main Board Display Name
|--------------------------------------------------------------------------
*/

.forum-index-board-copy h3 {
    font-family: "Segoe UI", Arial, Helvetica, sans-serif;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.25;
}

.forum-index-board-copy h3 a,
.forum-index-board-copy h3 a:visited {
    color: var(--color-gold-light);
    font-family: inherit;
    font-weight: inherit;
    text-decoration: none;
}

.forum-index-board-copy h3 a:hover,
.forum-index-board-copy h3 a:focus-visible {
    color: #f0dda6;
}


/*
|--------------------------------------------------------------------------
| Board Description
|--------------------------------------------------------------------------
*/

.forum-index-board-description {
    color: #d4cbd5;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
}


/*
|--------------------------------------------------------------------------
| Sub-board / Moderator Strip Readability
|--------------------------------------------------------------------------
*/

.forum-index-board-meta-strip {
    min-height: 40px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.forum-index-board-meta-strip .forum-index-subboards,
.forum-index-board-meta-strip .forum-index-moderators {
    font-family: "Segoe UI", Arial, Helvetica, sans-serif;
    font-size: 12px;
    line-height: 1.5;
}

.forum-index-board-meta-strip .forum-index-subboards-label,
.forum-index-board-meta-strip .forum-index-moderators-label {
    color: #f1edf2;
    font-family: "Segoe UI", Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0;
}

.forum-index-board-meta-strip .forum-index-subboard-links a,
.forum-index-board-meta-strip .forum-index-moderator-links a {
    color: var(--color-gold-light);
    font-size: 12px;
    font-weight: 400;
}

.forum-index-board-meta-strip .forum-index-subboard-links a:hover,
.forum-index-board-meta-strip .forum-index-subboard-links a:focus-visible,
.forum-index-board-meta-strip .forum-index-moderator-links a:hover,
.forum-index-board-meta-strip .forum-index-moderator-links a:focus-visible {
    color: #f0dda6;
}


/*
|--------------------------------------------------------------------------
| Forum Stat Typography
|--------------------------------------------------------------------------
*/

.forum-index-board-stat strong {
    font-family: "Segoe UI", Arial, Helvetica, sans-serif;
    font-size: 17px;
    font-weight: 700;
}

.forum-index-board-stat span {
    color: #c8bec5;
    font-family: "Segoe UI", Arial, Helvetica, sans-serif;
    font-size: 9px;
    font-weight: 700;
}


/*
|--------------------------------------------------------------------------
| Last Post Typography
|--------------------------------------------------------------------------
*/

.forum-index-no-posts,
.forum-index-last-thread,
.forum-index-last-post-copy,
.forum-index-last-post-copy p,
.forum-index-last-post-copy time {
    font-family: "Segoe UI", Arial, Helvetica, sans-serif;
}

.forum-index-no-posts {
    color: #d4cbd5;
    font-size: 12px;
}


/*
|--------------------------------------------------------------------------
| Mobile Typography
|--------------------------------------------------------------------------
*/

@media (max-width: 640px) {
    .forum-index-category-titlebar h2 {
        font-size: 17px;
    }

    .forum-index-board-copy h3 {
        font-size: 16px;
    }

    .forum-index-board-meta-strip .forum-index-subboards,
    .forum-index-board-meta-strip .forum-index-moderators,
    .forum-index-board-meta-strip .forum-index-subboards-label,
    .forum-index-board-meta-strip .forum-index-moderators-label,
    .forum-index-board-meta-strip .forum-index-subboard-links a,
    .forum-index-board-meta-strip .forum-index-moderator-links a {
        font-size: 12px;
    }
}


/* ================================================================
   FORUM INDEX — FINAL REFERENCE LAYOUT PASS
   Board information | Posts | Last Post
   ================================================================ */

.forum-index-category-titlebar {
    min-height: 58px;
}

.forum-index-category-titlebar h2 {
    min-height: 58px;
    padding: 0 22px;
    font-family: "Arial Narrow", "Segoe UI", Arial, sans-serif;
    font-size: 19px;
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1.2;
}

.forum-index-board-top {
    grid-template-columns: minmax(0, 1fr) 150px minmax(320px, 0.46fr);
    min-height: 102px;
}

.forum-index-board-copy {
    padding: 22px 28px;
}

.forum-index-board-copy h3 {
    margin: 0 0 7px;
    font-family: "Arial Narrow", "Segoe UI", Arial, sans-serif;
    font-size: 17px;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.25;
}

.forum-index-board-copy h3 a,
.forum-index-board-copy h3 a:visited {
    color: var(--color-gold-light);
    font-family: inherit;
    font-weight: 500;
}

.forum-index-board-description {
    max-width: none;
    color: #d7cfd8;
    font-family: "Segoe UI", Arial, sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
}

.forum-index-post-stat {
    min-width: 150px;
    padding: 18px 16px;
    border-left: 0;
}

.forum-index-post-stat strong {
    font-family: "Segoe UI", Arial, sans-serif;
    font-size: 18px;
    font-weight: 600;
}

.forum-index-post-stat span {
    margin-top: 5px;
    color: #d1c8d2;
    font-family: "Segoe UI", Arial, sans-serif;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.045em;
}

.forum-index-last-post {
    min-width: 0;
    padding: 17px 26px 17px 34px;
    border-left: 0;
}

.forum-index-last-post-inner {
    gap: 13px;
}

.forum-index-last-post-avatar {
    width: 46px;
    height: 46px;
    flex-basis: 46px;
}

.forum-index-last-thread {
    max-width: 280px;
    font-family: "Segoe UI", Arial, sans-serif;
    font-size: 12px;
    font-weight: 500;
}

.forum-index-no-posts {
    color: #ddd5de;
    font-family: "Segoe UI", Arial, sans-serif;
    font-size: 12px;
    font-weight: 400;
}

.forum-index-board-meta-strip {
    min-height: 42px;
    padding: 10px 27px;
    background: rgba(20, 10, 24, 0.96);
}

.forum-index-board-meta-strip .forum-index-subboards,
.forum-index-board-meta-strip .forum-index-moderators {
    gap: 6px;
    font-family: "Segoe UI", Arial, sans-serif;
    font-size: 12px;
    line-height: 1.5;
}

.forum-index-board-meta-strip .forum-index-subboards-label,
.forum-index-board-meta-strip .forum-index-moderators-label {
    color: #f4eff5;
    font-family: "Segoe UI", Arial, sans-serif;
    font-size: 12px;
    font-weight: 600;
}

.forum-index-board-meta-strip .forum-index-subboard-links a,
.forum-index-board-meta-strip .forum-index-moderator-links a {
    color: var(--color-gold-light);
    font-size: 12px;
    font-weight: 400;
}

.forum-index-post-stat::before,
.forum-index-last-post::before {
    width: 34px;
    left: -18px;
    transform: skewX(-27deg);
}

@media (max-width: 1100px) {
    .forum-index-board-top {
        grid-template-columns: minmax(0, 1fr) 120px minmax(270px, 0.42fr);
    }

    .forum-index-post-stat {
        min-width: 120px;
    }
}

@media (max-width: 860px) {
    .forum-index-board-top {
        grid-template-columns: minmax(0, 1fr) 105px;
    }

    .forum-index-last-post {
        grid-column: 1 / -1;
        min-height: 74px;
        padding-left: 22px;
        border-top: 1px solid rgba(116, 64, 129, 0.22);
    }

    .forum-index-last-post::before {
        display: none;
    }
}

@media (max-width: 640px) {
    .forum-index-category-titlebar,
    .forum-index-category-titlebar h2 {
        min-height: 48px;
    }

    .forum-index-category-titlebar h2 {
        padding: 0 15px;
        font-size: 17px;
        font-weight: 500;
    }

    .forum-index-board-top {
        grid-template-columns: minmax(0, 1fr) 92px;
    }

    .forum-index-board-copy {
        grid-column: auto;
        padding: 17px 15px;
    }

    .forum-index-board-copy h3 {
        font-size: 16px;
        font-weight: 500;
    }

    .forum-index-post-stat {
        min-width: 92px;
        border-left: 1px solid rgba(116, 64, 129, 0.22);
    }

    .forum-index-post-stat::before {
        display: none;
    }

    .forum-index-last-post {
        grid-column: 1 / -1;
    }

    .forum-index-board-meta-strip {
        padding: 10px 15px;
    }
}


/* ================================================================
   FORUM INDEX + BOARD POLISH — THREAD COUNT / BOARD TOOLBAR
   ================================================================ */

/*
|--------------------------------------------------------------------------
| Forum Index: Board | Threads | Posts | Last Post
|--------------------------------------------------------------------------
*/

.forum-index-board-top {
    grid-template-columns:
        minmax(0, 1fr)
        112px
        112px
        minmax(315px, 0.54fr);

    min-height: 104px;
}

.forum-index-thread-stat,
.forum-index-post-stat {
    min-width: 112px;
    padding: 16px 10px;
    border-left: 0;
}

.forum-index-thread-stat::before,
.forum-index-post-stat::before,
.forum-index-last-post::before {
    content: "";
    position: absolute;
    top: -1px;
    left: -17px;
    width: 32px;
    height: calc(100% + 2px);
    z-index: -1;
    border-left: 1px solid rgba(116, 64, 129, 0.28);
    background: rgba(14, 7, 17, 0.96);
    transform: skewX(-25deg);
    transform-origin: top left;
}

.forum-index-thread-stat,
.forum-index-post-stat,
.forum-index-last-post {
    position: relative;
    z-index: 1;
}

.forum-index-thread-stat strong,
.forum-index-post-stat strong {
    font-family: "Segoe UI", Arial, sans-serif;
    font-size: 18px;
    font-weight: 600;
}

.forum-index-thread-stat span,
.forum-index-post-stat span {
    margin-top: 5px;
    color: #d1c8d2;
    font-family: "Segoe UI", Arial, sans-serif;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}


/*
|--------------------------------------------------------------------------
| Inside a Board: Section Titlebar
|--------------------------------------------------------------------------
| Match the forum category bars while keeping the eyebrow.
*/

.forum-board-section-titlebar {
    min-height: 50px;
    padding: 8px 16px;
    border-bottom: 1px solid rgba(116, 64, 129, 0.34);
    background: #211027;
}

.forum-board-section-titlebar > div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1px;
}

.forum-board-section-titlebar h2 {
    margin: 0;
    color: #fff;
    font-family: "Arial Narrow", "Segoe UI", Arial, sans-serif;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1.15;
}

.forum-board-section-kicker {
    margin: 0;
    color: var(--color-gold-light);
    font-family: "Segoe UI", Arial, sans-serif;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.12em;
    line-height: 1.15;
    text-transform: uppercase;
}


/*
|--------------------------------------------------------------------------
| New Thread Control
|--------------------------------------------------------------------------
*/

.forum-new-thread-placeholder {
    min-height: 32px;
    padding: 0 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(219, 193, 125, 0.32);
    border-radius: 3px;
    background: rgba(219, 193, 125, 0.07);
    color: var(--color-gold-light);
    font-family: "Segoe UI", Arial, sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1;
}


/*
|--------------------------------------------------------------------------
| Thread Toolbar
|--------------------------------------------------------------------------
*/

.forum-thread-toolbar {
    min-height: 58px;
    padding: 10px 14px;
    align-items: center;
    background: rgba(255, 255, 255, 0.012);
}

.forum-thread-pagination a,
.forum-thread-pagination span {
    min-width: 30px;
    min-height: 32px;
    padding: 0 9px;
    box-sizing: border-box;
    border-radius: 3px;
    font-family: "Segoe UI", Arial, sans-serif;
    font-size: 11px;
    font-weight: 500;
}

.forum-thread-search {
    width: min(100%, 330px);
    height: 36px;
    display: flex;
    align-items: stretch;
}

.forum-thread-search input,
.forum-thread-search button {
    box-sizing: border-box;
    height: 36px;
    margin: 0;
    font-family: "Segoe UI", Arial, sans-serif;
}

.forum-thread-search input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 11px;
    border: 1px solid rgba(116, 64, 129, 0.32);
    border-right: 0;
    border-radius: 4px 0 0 4px;
    background: #100713;
    color: var(--color-text);
    font-size: 12px;
    line-height: 34px;
}

.forum-thread-search button {
    flex: 0 0 auto;
    min-width: 64px;
    padding: 0 13px;
    border: 1px solid rgba(116, 64, 129, 0.42);
    border-radius: 0 4px 4px 0;
    background: #211027;
    color: var(--color-gold-light);
    font-size: 11px;
    font-weight: 600;
    line-height: 34px;
}

.forum-thread-search button:hover,
.forum-thread-search button:focus-visible {
    background: #2b1532;
    color: #fff;
}


/*
|--------------------------------------------------------------------------
| Thread List Container
|--------------------------------------------------------------------------
*/

.forum-thread-list-section,
.forum-board-subforums {
    border-radius: 8px;
}

.forum-thread-list-section .forum-board-section-titlebar,
.forum-board-subforums .forum-board-section-titlebar {
    border-radius: 7px 7px 0 0;
}


/*
|--------------------------------------------------------------------------
| Responsive
|--------------------------------------------------------------------------
*/

@media (max-width: 1100px) {
    .forum-index-board-top {
        grid-template-columns:
            minmax(0, 1fr)
            92px
            92px
            minmax(265px, 0.46fr);
    }

    .forum-index-thread-stat,
    .forum-index-post-stat {
        min-width: 92px;
    }
}

@media (max-width: 860px) {
    .forum-index-board-top {
        grid-template-columns:
            minmax(0, 1fr)
            82px
            82px;
    }

    .forum-index-last-post {
        grid-column: 1 / -1;
    }

    .forum-index-last-post::before {
        display: none;
    }

    .forum-thread-toolbar {
        align-items: stretch;
    }
}

@media (max-width: 640px) {
    .forum-index-board-top {
        grid-template-columns:
            minmax(0, 1fr)
            72px
            72px;
    }

    .forum-index-thread-stat,
    .forum-index-post-stat {
        min-width: 72px;
    }

    .forum-index-thread-stat::before,
    .forum-index-post-stat::before {
        display: none;
    }

    .forum-board-section-titlebar {
        min-height: 46px;
        padding: 7px 12px;
    }

    .forum-board-section-titlebar h2 {
        font-size: 17px;
    }

    .forum-thread-search {
        width: 100%;
    }
}


/* ================================================================
   FORUM VISUAL CORRECTIONS — SEARCH ALIGNMENT + FULL PARALLELOGRAMS
   ================================================================ */

/*
|--------------------------------------------------------------------------
| Board Search Bar — exact vertical alignment
|--------------------------------------------------------------------------
*/

.forum-thread-toolbar {
    display: flex;
    align-items: center;
}

.forum-thread-search {
    width: min(100%, 330px);
    height: 34px;

    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        auto;

    align-items: stretch;
}

.forum-thread-search input,
.forum-thread-search button {
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;

    margin: 0 !important;
    box-sizing: border-box;

    line-height: 1 !important;
    vertical-align: middle;
}

.forum-thread-search input {
    width: 100%;

    padding:
        0
        11px;

    display: block;

    border:
        1px
        solid
        rgba(116, 64, 129, 0.34);

    border-right: 0;

    border-radius:
        4px
        0
        0
        4px;

    background: #100713;

    appearance: none;
    -webkit-appearance: none;
}

.forum-thread-search button {
    min-width: 64px;

    padding:
        0
        13px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border:
        1px
        solid
        rgba(116, 64, 129, 0.44);

    border-radius:
        0
        4px
        4px
        0;

    background: #211027;
}

.forum-thread-search input:focus,
.forum-thread-search button:focus-visible {
    position: relative;
    z-index: 2;
}


/*
|--------------------------------------------------------------------------
| Forum Index Stat Cells — true full parallelograms
|--------------------------------------------------------------------------
| Instead of faking the left angle with a partial pseudo-element, the
| whole Threads and Posts boxes are skewed so the full background and
| full border form one complete parallelogram.
*/

.forum-index-board-top {
    overflow: hidden;
}

.forum-index-thread-stat,
.forum-index-post-stat {
    position: relative;
    z-index: 2;

    min-width: 112px;

    margin:
        -1px
        7px;

    padding:
        16px
        10px;

    border:
        1px
        solid
        rgba(116, 64, 129, 0.34);

    background:
        #140919;

    transform:
        skewX(-22deg);

    transform-origin:
        center;

    box-shadow:
        none;
}

/* Remove all old partial wedge effects. */
.forum-index-thread-stat::before,
.forum-index-post-stat::before {
    display: none !important;
    content: none !important;
}

/* Counter-skew the text so it stays straight and centered. */
.forum-index-thread-stat strong,
.forum-index-thread-stat span,
.forum-index-post-stat strong,
.forum-index-post-stat span {
    transform:
        skewX(22deg);

    transform-origin:
        center;
}

.forum-index-thread-stat,
.forum-index-post-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;
}

.forum-index-thread-stat strong,
.forum-index-post-stat strong {
    width: 100%;

    display: block;

    text-align: center;
}

.forum-index-thread-stat span,
.forum-index-post-stat span {
    width: 100%;

    display: block;

    text-align: center;
}

/*
 * Keep the last-post cell flat. Its border starts after the second
 * parallelogram so the visual grouping reads cleanly.
 */
.forum-index-last-post {
    border-left:
        1px
        solid
        rgba(116, 64, 129, 0.24);

    padding-left: 24px;
}

.forum-index-last-post::before {
    display: none !important;
    content: none !important;
}


/*
|--------------------------------------------------------------------------
| Desktop spacing around parallelograms
|--------------------------------------------------------------------------
*/

@media (min-width: 861px) {

    .forum-index-board-top {
        grid-template-columns:
            minmax(0, 1fr)
            126px
            126px
            minmax(315px, 0.54fr);
    }

    .forum-index-thread-stat,
    .forum-index-post-stat {
        min-width: 112px;
    }

}


/*
|--------------------------------------------------------------------------
| Tablet / Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 860px) {

    .forum-index-board-top {
        overflow: visible;
    }

    .forum-index-thread-stat,
    .forum-index-post-stat {
        margin:
            0
            4px;

        min-width: 0;
    }

}


@media (max-width: 640px) {

    .forum-index-thread-stat,
    .forum-index-post-stat {
        margin: 0;

        border-radius: 0;

        transform: none;
    }

    .forum-index-thread-stat strong,
    .forum-index-thread-stat span,
    .forum-index-post-stat strong,
    .forum-index-post-stat span {
        transform: none;
    }

    .forum-thread-search {
        height: 36px;
    }

    .forum-thread-search input,
    .forum-thread-search button {
        height: 36px !important;
        min-height: 36px !important;
        max-height: 36px !important;
    }

}


/* ================================================================
   FORUM INDEX — REFERENCE SPACING / STAT-CELL FINAL PASS
   ================================================================ */

/*
|--------------------------------------------------------------------------
| Give each board section the same breathing room as the reference
|--------------------------------------------------------------------------
*/

.forum-index-board-list {
    gap: 0;
    padding-top: 5px;
}

.forum-index-board {
    display: block;
}

.forum-index-board + .forum-index-board {
    margin-top: 20px;
}

.forum-index-board-top {
    min-height: 102px;
    overflow: visible;

    border:
        1px
        solid
        rgba(116, 64, 129, 0.28);

    background:
        rgba(14, 7, 17, 0.92);
}


/*
|--------------------------------------------------------------------------
| True separated parallelograms
|--------------------------------------------------------------------------
| Each stat cell now has its own full background, full border, and
| visible space around it instead of appearing fused into the row.
*/

.forum-index-thread-stat,
.forum-index-post-stat {
    position: relative;
    z-index: 2;

    align-self: stretch;

    min-width: 112px;

    margin:
        -1px
        8px;

    padding:
        0
        12px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    border:
        1px
        solid
        rgba(116, 64, 129, 0.38);

    background:
        #160b1b;

    transform:
        skewX(-24deg);

    box-sizing: border-box;

    text-align: center;
}

.forum-index-thread-stat::before,
.forum-index-post-stat::before {
    display: none !important;
    content: none !important;
}

.forum-index-thread-stat strong,
.forum-index-thread-stat span,
.forum-index-post-stat strong,
.forum-index-post-stat span {
    width: 100%;

    display: block;

    transform:
        skewX(24deg);

    text-align: center;
}

.forum-index-thread-stat strong,
.forum-index-post-stat strong {
    margin: 0;

    color: #ffffff;

    font-family:
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 18px;
    font-weight: 500;
    line-height: 1.05;
}

.forum-index-thread-stat span,
.forum-index-post-stat span {
    margin-top: 7px;

    color: #d8cfd9;

    font-family:
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.1;
    text-transform: none;
}


/*
|--------------------------------------------------------------------------
| Last post area
|--------------------------------------------------------------------------
*/

.forum-index-last-post {
    min-width: 0;

    margin-left: 4px;

    padding:
        18px
        24px;

    border-left: 0;

    background:
        rgba(14, 7, 17, 0.92);
}

.forum-index-last-post::before {
    display: none !important;
    content: none !important;
}


/*
|--------------------------------------------------------------------------
| Separate sub-board / moderator strip
|--------------------------------------------------------------------------
| The reference has a small visible gap between the board row and this
| strip, so they read as two separate outlined boxes.
*/

.forum-index-board-meta-strip {
    min-height: 40px;

    margin-top: 5px;

    padding:
        9px
        27px;

    border:
        1px
        solid
        rgba(116, 64, 129, 0.28);

    border-radius: 0;

    background:
        rgba(20, 10, 24, 0.92);
}


/*
|--------------------------------------------------------------------------
| Category-to-board spacing
|--------------------------------------------------------------------------
*/

.forum-index-category-titlebar {
    margin-bottom: 5px;
}

.forum-index-category + .forum-index-category {
    margin-top: 20px;
}


/*
|--------------------------------------------------------------------------
| Desktop proportions
|--------------------------------------------------------------------------
*/

@media (min-width: 861px) {

    .forum-index-board-top {
        grid-template-columns:
            minmax(0, 1fr)
            128px
            128px
            minmax(315px, 0.52fr);
    }

}


/*
|--------------------------------------------------------------------------
| Responsive
|--------------------------------------------------------------------------
*/

@media (max-width: 860px) {

    .forum-index-thread-stat,
    .forum-index-post-stat {
        margin:
            -1px
            5px;
    }

    .forum-index-last-post {
        margin-left: 0;
    }

}


@media (max-width: 640px) {

    .forum-index-board-top {
        overflow: hidden;
    }

    .forum-index-thread-stat,
    .forum-index-post-stat {
        margin: 0;

        transform: none;
    }

    .forum-index-thread-stat strong,
    .forum-index-thread-stat span,
    .forum-index-post-stat strong,
    .forum-index-post-stat span {
        transform: none;
    }

    .forum-index-board-meta-strip {
        margin-top: 5px;
    }

}


/* ================================================================
   FORUM INDEX — FINAL SMALL TWEAKS
   ================================================================ */

/*
|--------------------------------------------------------------------------
| Match backgrounds + restore visible gaps
|--------------------------------------------------------------------------
*/

.forum-index-board-copy,
.forum-index-thread-stat,
.forum-index-post-stat,
.forum-index-last-post {
    background: #160b1b;
}

.forum-index-board-copy {
    border:
        1px
        solid
        rgba(116, 64, 129, 0.38);

    margin-right: 8px;
}

.forum-index-thread-stat {
    margin-right: 8px;
}

.forum-index-post-stat {
    margin-right: 8px;
}

.forum-index-last-post {
    border:
        1px
        solid
        rgba(116, 64, 129, 0.38);

    margin-left: 0;
}


/*
|--------------------------------------------------------------------------
| Stat text — centered number + tiny caps label
|--------------------------------------------------------------------------
*/

.forum-index-thread-stat,
.forum-index-post-stat {
    justify-content: center;
    align-items: center;
    text-align: center;
}

.forum-index-thread-stat strong,
.forum-index-post-stat strong {
    width: 100%;
    margin: 0;
    display: block;
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
}

.forum-index-thread-stat span,
.forum-index-post-stat span {
    width: 100%;
    margin-top: 7px;
    display: block;
    text-align: center;

    color: #d8cfd9;

    font-family:
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
}


/*
|--------------------------------------------------------------------------
| Keep board row gaps clean
|--------------------------------------------------------------------------
*/

.forum-index-board-top {
    column-gap: 0;
    background: transparent;
    border: 0;
}

.forum-index-board-copy,
.forum-index-last-post,
.forum-index-thread-stat,
.forum-index-post-stat {
    box-sizing: border-box;
}


/*
|--------------------------------------------------------------------------
| Mobile reset
|--------------------------------------------------------------------------
*/

@media (max-width: 640px) {

    .forum-index-board-copy,
    .forum-index-thread-stat,
    .forum-index-post-stat,
    .forum-index-last-post {
        margin-right: 0;
    }

    .forum-index-board-copy {
        border-right:
            1px
            solid
            rgba(116, 64, 129, 0.38);
    }

}


/* ================================================================
   FORUM INDEX — MATCHED SLANTED EDGE + BOARD HOVER
   ================================================================ */

/*
|--------------------------------------------------------------------------
| Board row geometry
|--------------------------------------------------------------------------
| The board information gets a slanted right edge.
| The last-post area gets a slanted left edge.
| This makes the full row read as one consistent sequence of angled cells.
*/

.forum-index-board-copy {
    position: relative;
    z-index: 2;

    overflow: visible;

    border:
        1px
        solid
        rgba(116, 64, 129, 0.38);

    background: #160b1b;

    clip-path:
        polygon(
            0 0,
            calc(100% - 28px) 0,
            100% 50%,
            calc(100% - 28px) 100%,
            0 100%
        );

    transition:
        background-color 160ms ease,
        border-color 160ms ease;
}

.forum-index-board-copy:hover {
    background: #1d1022;

    border-color:
        rgba(116, 64, 129, 0.52);
}


/*
|--------------------------------------------------------------------------
| Last Post slanted left edge
|--------------------------------------------------------------------------
*/

.forum-index-last-post {
    position: relative;
    z-index: 2;

    overflow: visible;

    border:
        1px
        solid
        rgba(116, 64, 129, 0.38);

    background: #160b1b;

    clip-path:
        polygon(
            28px 0,
            100% 0,
            100% 100%,
            28px 100%,
            0 50%
        );

    padding-left: 38px;
}


/*
|--------------------------------------------------------------------------
| Consistent gaps between all four cells
|--------------------------------------------------------------------------
*/

.forum-index-board-copy {
    margin-right: 8px;
}

.forum-index-thread-stat {
    margin:
        -1px
        8px
        -1px
        0;
}

.forum-index-post-stat {
    margin:
        -1px
        8px
        -1px
        0;
}

.forum-index-last-post {
    margin-left: 0;
}


/*
|--------------------------------------------------------------------------
| Keep board-name content away from the slanted edge
|--------------------------------------------------------------------------
*/

.forum-index-board-copy h3,
.forum-index-board-description {
    max-width:
        calc(
            100% - 28px
        );
}


/*
|--------------------------------------------------------------------------
| Hover applies to board-name section only
|--------------------------------------------------------------------------
*/

.forum-index-board-copy:hover h3 a,
.forum-index-board-copy:hover h3 a:visited {
    color: #f0dda6;
}


/*
|--------------------------------------------------------------------------
| Mobile: remove complex clipping
|--------------------------------------------------------------------------
*/

@media (max-width: 640px) {

    .forum-index-board-copy,
    .forum-index-last-post {
        clip-path: none;
    }

    .forum-index-board-copy {
        margin-right: 0;
    }

    .forum-index-last-post {
        padding-left: 15px;
    }

}


/* ================================================================
   FORUM INDEX — REFERENCE GEOMETRY CORRECTION
   ================================================================ */

/*
|--------------------------------------------------------------------------
| Board information: simple trapezoid, not a chevron
|--------------------------------------------------------------------------
| Matches the reference: square left edge, straight top/bottom,
| one continuous slanted right edge.
*/

.forum-index-board-copy {
    clip-path:
        polygon(
            0 0,
            100% 0,
            calc(100% - 34px) 100%,
            0 100%
        );

    background: #160b1b;

    transition:
        background-color 140ms ease;
}

/* Slight hover only — intentionally subtle. */
.forum-index-board-copy:hover {
    background: #180d1d;
}

.forum-index-board-copy:hover h3 a,
.forum-index-board-copy:hover h3 a:visited {
    color: var(--color-gold-light);
}


/*
|--------------------------------------------------------------------------
| Threads + Posts: consistent parallelograms
|--------------------------------------------------------------------------
*/

.forum-index-thread-stat,
.forum-index-post-stat {
    clip-path: none;

    transform: none;

    margin:
        -1px
        8px
        -1px
        0;

    border:
        1px
        solid
        rgba(116, 64, 129, 0.38);

    background: #160b1b;

    /* Build the full parallelogram directly. */
    clip-path:
        polygon(
            34px 0,
            100% 0,
            calc(100% - 34px) 100%,
            0 100%
        );
}

/* Text should stay straight because the cell itself is not skew-transformed. */
.forum-index-thread-stat strong,
.forum-index-thread-stat span,
.forum-index-post-stat strong,
.forum-index-post-stat span {
    transform: none;
}


/*
|--------------------------------------------------------------------------
| Last Post: simple trapezoid with one slanted left edge
|--------------------------------------------------------------------------
| Matches the reference: one continuous diagonal on the left,
| straight top/right/bottom edges. No center point / chevron.
*/

.forum-index-last-post {
    clip-path:
        polygon(
            34px 0,
            100% 0,
            100% 100%,
            0 100%
        );

    background: #160b1b;

    padding-left: 42px;
}


/*
|--------------------------------------------------------------------------
| Preserve the visible gaps from the reference
|--------------------------------------------------------------------------
*/

.forum-index-board-copy {
    margin-right: 8px;
}

.forum-index-thread-stat {
    margin-right: 8px;
}

.forum-index-post-stat {
    margin-right: 8px;
}

.forum-index-last-post {
    margin-left: 0;
}


/*
|--------------------------------------------------------------------------
| Desktop row proportions
|--------------------------------------------------------------------------
*/

@media (min-width: 861px) {

    .forum-index-board-top {
        grid-template-columns:
            minmax(0, 1fr)
            128px
            128px
            minmax(315px, 0.52fr);
    }

}


/*
|--------------------------------------------------------------------------
| Mobile fallback
|--------------------------------------------------------------------------
*/

@media (max-width: 640px) {

    .forum-index-board-copy,
    .forum-index-thread-stat,
    .forum-index-post-stat,
    .forum-index-last-post {
        clip-path: none;
    }

    .forum-index-board-copy,
    .forum-index-thread-stat,
    .forum-index-post-stat {
        margin-right: 0;
    }

    .forum-index-last-post {
        padding-left: 15px;
    }

}


/* ================================================================
   FORUM INDEX — BORDER / SPACING / CENTERING CORRECTIONS
   ================================================================ */

/*
|--------------------------------------------------------------------------
| Tighten spacing between board-row cells
|--------------------------------------------------------------------------
*/

.forum-index-board-copy {
    margin-right: 4px;
}

.forum-index-thread-stat {
    margin:
        -1px
        4px
        -1px
        0;
}

.forum-index-post-stat {
    margin:
        -1px
        4px
        -1px
        0;
}

.forum-index-last-post {
    margin-left: 0;
}


/*
|--------------------------------------------------------------------------
| Board info — visible slanted right border
|--------------------------------------------------------------------------
*/

.forum-index-board-copy {
    position: relative;
    border: 0;
}

.forum-index-board-copy::after {
    content: "";
    position: absolute;
    top: -1px;
    right: 16px;
    width: 1px;
    height: calc(100% + 2px);
    background: rgba(116, 64, 129, 0.42);
    transform: skewX(-18deg);
    transform-origin: top;
    pointer-events: none;
}


/*
|--------------------------------------------------------------------------
| Threads / Posts — explicit left + right borders
|--------------------------------------------------------------------------
*/

.forum-index-thread-stat,
.forum-index-post-stat {
    position: relative;
    border: 0;
}

.forum-index-thread-stat::before,
.forum-index-post-stat::before,
.forum-index-thread-stat::after,
.forum-index-post-stat::after {
    content: "";
    position: absolute;
    top: -1px;
    width: 1px;
    height: calc(100% + 2px);
    background: rgba(116, 64, 129, 0.42);
    pointer-events: none;
}

.forum-index-thread-stat::before,
.forum-index-post-stat::before {
    left: 16px;
    transform: skewX(-18deg);
    transform-origin: top;
}

.forum-index-thread-stat::after,
.forum-index-post-stat::after {
    right: 16px;
    transform: skewX(-18deg);
    transform-origin: top;
}


/*
|--------------------------------------------------------------------------
| Last post — visible slanted left border
|--------------------------------------------------------------------------
*/

.forum-index-last-post {
    position: relative;
    border: 0;
}

.forum-index-last-post::before {
    display: block !important;
    content: "" !important;
    position: absolute;
    top: -1px;
    left: 16px;
    width: 1px;
    height: calc(100% + 2px);
    background: rgba(116, 64, 129, 0.42);
    transform: skewX(-18deg);
    transform-origin: top;
    pointer-events: none;
}


/*
|--------------------------------------------------------------------------
| Center stat text exactly
|--------------------------------------------------------------------------
*/

.forum-index-thread-stat,
.forum-index-post-stat {
    padding:
        0
        18px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.forum-index-thread-stat strong,
.forum-index-post-stat strong,
.forum-index-thread-stat span,
.forum-index-post-stat span {
    width: auto;
    min-width: 0;
    margin-left: 0;
    margin-right: 0;
    text-align: center;
}

.forum-index-thread-stat strong,
.forum-index-post-stat strong {
    line-height: 1;
}

.forum-index-thread-stat span,
.forum-index-post-stat span {
    margin-top: 6px;
}


/*
|--------------------------------------------------------------------------
| Mobile fallback
|--------------------------------------------------------------------------
*/

@media (max-width: 640px) {

    .forum-index-board-copy::after,
    .forum-index-thread-stat::before,
    .forum-index-thread-stat::after,
    .forum-index-post-stat::before,
    .forum-index-post-stat::after,
    .forum-index-last-post::before {
        display: none !important;
    }

    .forum-index-board-copy,
    .forum-index-thread-stat,
    .forum-index-post-stat {
        margin-right: 0;
    }

}


/* ================================================================
   FORUM INDEX — BORDER TONE CORRECTION
   Use the board background tone for angled separators instead of a highlight.
   ================================================================ */

.forum-index-board-copy::after,
.forum-index-thread-stat::before,
.forum-index-thread-stat::after,
.forum-index-post-stat::before,
.forum-index-post-stat::after,
.forum-index-last-post::before {
    background: #160b1b;
}


/* ================================================================
   FORUM INDEX — PRECISE REFERENCE FIX
   Real borders, very tight gaps, board-only hover highlight.
   ================================================================ */

:root {
    --forum-cell-bg: #160b1b;
    --forum-cell-hover-bg: #180d1d;
    --forum-cell-border: rgba(116, 64, 129, 0.42);
    --forum-cell-gap: 2px;
}


/*
|--------------------------------------------------------------------------
| Tight spacing between board row elements
|--------------------------------------------------------------------------
*/

.forum-index-board-copy {
    margin-right: var(--forum-cell-gap);
}

.forum-index-thread-stat {
    margin:
        -1px
        var(--forum-cell-gap)
        -1px
        0;
}

.forum-index-post-stat {
    margin:
        -1px
        var(--forum-cell-gap)
        -1px
        0;
}

.forum-index-last-post {
    margin-left: 0;
}


/*
|--------------------------------------------------------------------------
| Board-name cell
| Square left edge + slanted right edge, with real border.
|--------------------------------------------------------------------------
*/

.forum-index-board-copy {
    position: relative;
    z-index: 2;

    border-top:
        1px
        solid
        var(--forum-cell-border);

    border-bottom:
        1px
        solid
        var(--forum-cell-border);

    border-left:
        1px
        solid
        var(--forum-cell-border);

    border-right: 0;

    background: var(--forum-cell-bg);

    clip-path:
        polygon(
            0 0,
            100% 0,
            calc(100% - 34px) 100%,
            0 100%
        );

    transition:
        background-color 140ms ease;
}

/* Actual diagonal right border. */
.forum-index-board-copy::after {
    content: "";
    position: absolute;
    top: -1px;
    right: 17px;

    width: 1px;
    height: calc(100% + 2px);

    display: block;

    background: var(--forum-cell-border);

    transform:
        skewX(-18.5deg);

    transform-origin: top;

    pointer-events: none;
}

/* Slight background-only hover. Border does not change. */
.forum-index-board-copy:hover {
    background: var(--forum-cell-hover-bg);
}

.forum-index-board-copy:hover h3 a,
.forum-index-board-copy:hover h3 a:visited {
    color: var(--color-gold-light);
}


/*
|--------------------------------------------------------------------------
| Threads + Posts parallelograms
| Real top/bottom + diagonal left/right borders.
|--------------------------------------------------------------------------
*/

.forum-index-thread-stat,
.forum-index-post-stat {
    position: relative;
    z-index: 2;

    border-top:
        1px
        solid
        var(--forum-cell-border);

    border-bottom:
        1px
        solid
        var(--forum-cell-border);

    border-left: 0;
    border-right: 0;

    background: var(--forum-cell-bg);

    clip-path:
        polygon(
            34px 0,
            100% 0,
            calc(100% - 34px) 100%,
            0 100%
        );

    padding: 0;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;
}

.forum-index-thread-stat::before,
.forum-index-post-stat::before,
.forum-index-thread-stat::after,
.forum-index-post-stat::after {
    content: "";
    position: absolute;
    top: -1px;

    width: 1px;
    height: calc(100% + 2px);

    display: block;

    background: var(--forum-cell-border);

    pointer-events: none;
}

/* Left diagonal. */
.forum-index-thread-stat::before,
.forum-index-post-stat::before {
    left: 17px;

    transform:
        skewX(-18.5deg);

    transform-origin: top;
}

/* Right diagonal. */
.forum-index-thread-stat::after,
.forum-index-post-stat::after {
    right: 17px;

    transform:
        skewX(-18.5deg);

    transform-origin: top;
}


/*
|--------------------------------------------------------------------------
| Last-post cell
| Slanted left edge + square right edge, with real border.
|--------------------------------------------------------------------------
*/

.forum-index-last-post {
    position: relative;
    z-index: 2;

    border-top:
        1px
        solid
        var(--forum-cell-border);

    border-right:
        1px
        solid
        var(--forum-cell-border);

    border-bottom:
        1px
        solid
        var(--forum-cell-border);

    border-left: 0;

    background: var(--forum-cell-bg);

    clip-path:
        polygon(
            34px 0,
            100% 0,
            100% 100%,
            0 100%
        );

    padding-left: 40px;
}

/* Actual diagonal left border. */
.forum-index-last-post::before {
    content: "" !important;
    position: absolute;
    top: -1px;
    left: 17px;

    width: 1px;
    height: calc(100% + 2px);

    display: block !important;

    background: var(--forum-cell-border) !important;

    transform:
        skewX(-18.5deg);

    transform-origin: top;

    pointer-events: none;
}


/*
|--------------------------------------------------------------------------
| Exact stat centering + tiny caps
|--------------------------------------------------------------------------
*/

.forum-index-thread-stat strong,
.forum-index-post-stat strong,
.forum-index-thread-stat span,
.forum-index-post-stat span {
    position: relative;
    left: 0;

    width: auto;

    margin-left: 0;
    margin-right: 0;

    transform: none;

    text-align: center;
}

.forum-index-thread-stat strong,
.forum-index-post-stat strong {
    margin: 0;

    font-size: 18px;
    font-weight: 600;
    line-height: 1;
}

.forum-index-thread-stat span,
.forum-index-post-stat span {
    margin-top: 6px;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
}


/*
|--------------------------------------------------------------------------
| Mobile fallback
|--------------------------------------------------------------------------
*/

@media (max-width: 640px) {

    .forum-index-board-copy,
    .forum-index-thread-stat,
    .forum-index-post-stat,
    .forum-index-last-post {
        clip-path: none;
        margin-right: 0;
    }

    .forum-index-board-copy,
    .forum-index-thread-stat,
    .forum-index-post-stat,
    .forum-index-last-post {
        border:
            1px
            solid
            var(--forum-cell-border);
    }

    .forum-index-board-copy::after,
    .forum-index-thread-stat::before,
    .forum-index-thread-stat::after,
    .forum-index-post-stat::before,
    .forum-index-post-stat::after,
    .forum-index-last-post::before {
        display: none !important;
    }

    .forum-index-last-post {
        padding-left: 15px;
    }

}


/* ================================================================
   FORUM INDEX — CLEAN GEOMETRY REBUILD
   This overrides the previous experimental edge rules.
   ================================================================ */

:root {
    --forum-row-bg: #160b1b;
    --forum-row-hover-bg: #180d1d;
    --forum-row-border: rgba(116, 64, 129, 0.42);
    --forum-row-gap: 4px;
    --forum-row-slant: 44px;
}

/*
|--------------------------------------------------------------------------
| Row layout
|--------------------------------------------------------------------------
| Adjacent clipped cells overlap their rectangular boxes so the visible
| diagonal gap stays approximately 4px all the way from top to bottom.
*/

.forum-index-board-top {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        145px
        145px
        minmax(300px, 0.52fr);

    column-gap: 0;
    min-height: 102px;

    overflow: visible;

    border: 0;
    background: transparent;
}


/*
|--------------------------------------------------------------------------
| Shared cell reset
|--------------------------------------------------------------------------
*/

.forum-index-board-copy,
.forum-index-thread-stat,
.forum-index-post-stat,
.forum-index-last-post {
    position: relative;
    isolation: isolate;

    min-width: 0;
    min-height: 102px;

    margin-top: 0;
    margin-bottom: 0;

    border: 0 !important;

    background: var(--forum-row-border) !important;

    box-sizing: border-box;
}

/* Wipe all old experimental edge lines. */
.forum-index-board-copy::after,
.forum-index-thread-stat::after,
.forum-index-post-stat::after,
.forum-index-last-post::after {
    content: none !important;
    display: none !important;
}


/*
|--------------------------------------------------------------------------
| Board information cell
|--------------------------------------------------------------------------
| Square left edge, one diagonal right edge.
*/

.forum-index-board-copy {
    margin-right: 0;

    padding:
        22px
        54px
        22px
        28px;

    clip-path:
        polygon(
            0 0,
            100% 0,
            calc(100% - var(--forum-row-slant)) 100%,
            0 100%
        );
}

.forum-index-board-copy::before {
    content: "";
    position: absolute;
    z-index: -1;

    inset: 1px;

    display: block !important;

    background: var(--forum-row-bg) !important;

    clip-path:
        polygon(
            0 0,
            100% 0,
            calc(100% - 43px) 100%,
            0 100%
        );

    transition: background-color 140ms ease;
}

/* Only the fill changes on hover. The border stays exactly the same. */
.forum-index-board-copy:hover::before {
    background: var(--forum-row-hover-bg) !important;
}

.forum-index-board-copy:hover h3 a,
.forum-index-board-copy:hover h3 a:visited {
    color: var(--color-gold-light);
}


/*
|--------------------------------------------------------------------------
| Threads + Posts cells
|--------------------------------------------------------------------------
| Full parallelograms. Negative left margin makes the visible gap tiny
| instead of leaving a giant transparent wedge between cells.
*/

.forum-index-thread-stat,
.forum-index-post-stat {
    margin-left:
        calc(
            -1 * (
                var(--forum-row-slant)
                - var(--forum-row-gap)
            )
        );

    margin-right: 0;

    padding:
        0
        42px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    clip-path:
        polygon(
            var(--forum-row-slant) 0,
            100% 0,
            calc(100% - var(--forum-row-slant)) 100%,
            0 100%
        );

    text-align: center;
}

.forum-index-thread-stat::before,
.forum-index-post-stat::before {
    content: "";
    position: absolute;
    z-index: -1;

    inset: 1px;

    display: block !important;

    background: var(--forum-row-bg) !important;

    clip-path:
        polygon(
            43px 0,
            100% 0,
            calc(100% - 43px) 100%,
            0 100%
        );

    transform: none !important;
}

.forum-index-thread-stat strong,
.forum-index-post-stat strong,
.forum-index-thread-stat span,
.forum-index-post-stat span {
    position: relative;
    z-index: 2;

    width: auto;

    margin-left: 0;
    margin-right: 0;

    transform: none !important;

    text-align: center;
}

.forum-index-thread-stat strong,
.forum-index-post-stat strong {
    margin-top: 0;

    font-size: 18px;
    font-weight: 600;
    line-height: 1;
}

.forum-index-thread-stat span,
.forum-index-post-stat span {
    margin-top: 7px;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1;

    text-transform: uppercase;
}


/*
|--------------------------------------------------------------------------
| Last Post cell
|--------------------------------------------------------------------------
| One diagonal left edge, square right edge.
*/

.forum-index-last-post {
    margin-left:
        calc(
            -1 * (
                var(--forum-row-slant)
                - var(--forum-row-gap)
            )
        );

    padding:
        18px
        24px
        18px
        58px;

    clip-path:
        polygon(
            var(--forum-row-slant) 0,
            100% 0,
            100% 100%,
            0 100%
        );
}

.forum-index-last-post::before {
    content: "";
    position: absolute;
    z-index: -1;

    inset: 1px;

    display: block !important;

    background: var(--forum-row-bg) !important;

    clip-path:
        polygon(
            43px 0,
            100% 0,
            100% 100%,
            0 100%
        );

    transform: none !important;
}


/*
|--------------------------------------------------------------------------
| Sub-board strip
|--------------------------------------------------------------------------
*/

.forum-index-board-meta-strip {
    margin-top: 5px;
}


/*
|--------------------------------------------------------------------------
| Responsive
|--------------------------------------------------------------------------
*/

@media (max-width: 1100px) {

    .forum-index-board-top {
        grid-template-columns:
            minmax(0, 1fr)
            125px
            125px
            minmax(260px, 0.48fr);
    }

}


@media (max-width: 860px) {

    .forum-index-board-top {
        grid-template-columns:
            minmax(0, 1fr)
            105px
            105px;
    }

    .forum-index-last-post {
        grid-column: 1 / -1;

        margin-left: 0;

        clip-path: none;

        padding-left: 20px;
    }

    .forum-index-last-post::before {
        clip-path: none;
    }

}


@media (max-width: 640px) {

    .forum-index-board-top {
        grid-template-columns:
            minmax(0, 1fr)
            76px
            76px;
    }

    .forum-index-board-copy,
    .forum-index-thread-stat,
    .forum-index-post-stat,
    .forum-index-last-post {
        min-height: 86px;

        clip-path: none;
        margin-left: 0;
    }

    .forum-index-board-copy::before,
    .forum-index-thread-stat::before,
    .forum-index-post-stat::before,
    .forum-index-last-post::before {
        clip-path: none;
    }

    .forum-index-board-copy {
        padding:
            16px
            14px;
    }

    .forum-index-thread-stat,
    .forum-index-post-stat {
        padding:
            0
            8px;
    }

    .forum-index-last-post {
        padding:
            14px
            15px;
    }

}


/* ================================================================
   FORUM INDEX — TRUE BORDER + DARK FILL FIX
   Keep the working geometry. Purple is ONLY the border.
   ================================================================ */

:root {
    --forum-row-bg: #120814;
    --forum-row-hover-bg: #150a18;
    --forum-row-border: rgba(116, 64, 129, 0.50);
}

/*
|--------------------------------------------------------------------------
| Outer clipped shape = purple border.
| Inner pseudo-element = dark fill.
|--------------------------------------------------------------------------
*/

.forum-index-board-copy,
.forum-index-thread-stat,
.forum-index-post-stat,
.forum-index-last-post {
    background: var(--forum-row-border) !important;
    filter: none !important;
    border: 0 !important;
}

/* Critical fix: the dark fill sits ABOVE the purple outer shape. */
.forum-index-board-copy::before,
.forum-index-thread-stat::before,
.forum-index-post-stat::before,
.forum-index-last-post::before {
    z-index: 0 !important;
    display: block !important;
    content: "" !important;
    background: var(--forum-row-bg) !important;
}

/* Remove any extra experimental edge pseudo-elements. */
.forum-index-board-copy::after,
.forum-index-thread-stat::after,
.forum-index-post-stat::after,
.forum-index-last-post::after {
    content: none !important;
    display: none !important;
}

/* All real content stays above the dark inset fill. */
.forum-index-board-copy > *,
.forum-index-thread-stat > *,
.forum-index-post-stat > *,
.forum-index-last-post > * {
    position: relative;
    z-index: 1;
}

/*
|--------------------------------------------------------------------------
| Board hover only changes the inner dark fill slightly.
|--------------------------------------------------------------------------
*/

.forum-index-board-copy:hover::before {
    background: var(--forum-row-hover-bg) !important;
}

.forum-index-board-copy:hover h3 a,
.forum-index-board-copy:hover h3 a:visited {
    color: var(--color-gold-light);
}

/*
|--------------------------------------------------------------------------
| Preserve centered stat text.
|--------------------------------------------------------------------------
*/

.forum-index-thread-stat,
.forum-index-post-stat {
    display: flex !important;
    flex-direction: column;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

.forum-index-thread-stat strong,
.forum-index-thread-stat span,
.forum-index-post-stat strong,
.forum-index-post-stat span {
    transform: none !important;
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 640px) {
    .forum-index-board-copy,
    .forum-index-thread-stat,
    .forum-index-post-stat,
    .forum-index-last-post {
        background: var(--forum-row-bg) !important;
        border: 1px solid var(--forum-row-border) !important;
    }

    .forum-index-board-copy::before,
    .forum-index-thread-stat::before,
    .forum-index-post-stat::before,
    .forum-index-last-post::before {
        display: none !important;
    }
}


/* ================================================================
   SUB-BOARD ROWS — MATCH MAIN FORUM BOARD GEOMETRY
   ================================================================ */

/*
|--------------------------------------------------------------------------
| Sub-board section titlebar
|--------------------------------------------------------------------------
*/

.forum-board-subforums .forum-board-section-titlebar {
    min-height: 50px;
    padding: 8px 16px;
    background: #211027;
}

.forum-board-subforums .forum-board-section-titlebar h2 {
    margin: 0;
    color: #fff;
    font-family: "Arial Narrow", "Segoe UI", Arial, sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.15;
}

.forum-board-subforums .forum-board-section-kicker {
    margin: 0 0 2px;
    color: var(--color-gold-light);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}


/*
|--------------------------------------------------------------------------
| Sub-board row layout
|--------------------------------------------------------------------------
| Same structure as main forum rows:
| name/description | Threads | Posts | Last Post
*/

.forum-subboard-row {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        145px
        145px
        minmax(300px, 0.52fr);

    min-height: 102px;

    overflow: visible;

    border: 0;

    background: transparent;
}

.forum-subboard-row + .forum-subboard-row {
    margin-top: 5px;
    border-top: 0;
}


/*
|--------------------------------------------------------------------------
| Shared sub-board cell base
|--------------------------------------------------------------------------
*/

.forum-subboard-copy,
.forum-subboard-stat,
.forum-subboard-last-post {
    position: relative;
    isolation: isolate;

    min-width: 0;
    min-height: 102px;

    box-sizing: border-box;
}


/*
|--------------------------------------------------------------------------
| Sub-board name / description cell
|--------------------------------------------------------------------------
*/

.forum-subboard-copy {
    padding:
        22px
        54px
        22px
        28px;

    background: var(--forum-row-border) !important;

    clip-path:
        polygon(
            0 0,
            100% 0,
            calc(100% - 44px) 100%,
            0 100%
        );
}

.forum-subboard-copy::before {
    content: "";

    position: absolute;
    inset: 1px;
    z-index: 0;

    display: block;

    background: var(--forum-row-bg) !important;

    clip-path:
        polygon(
            0 0,
            100% 0,
            calc(100% - 43px) 100%,
            0 100%
        );
}

.forum-subboard-copy > * {
    position: relative;
    z-index: 1;
}

.forum-subboard-copy h3 {
    margin: 0 0 7px;

    font-family:
        "Arial Narrow",
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 17px;
    font-weight: 500;
    line-height: 1.25;
}

.forum-subboard-copy h3 a,
.forum-subboard-copy h3 a:visited {
    color: var(--color-gold-light);
    text-decoration: none;
}

.forum-subboard-copy p {
    margin: 0;

    color: #d7cfd8;

    font-family:
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 13px;
    line-height: 1.5;
}

/* Same subtle board-name hover behavior. */
.forum-subboard-copy:hover::before {
    background: var(--forum-row-hover-bg) !important;
}


/*
|--------------------------------------------------------------------------
| Threads / Posts cells
|--------------------------------------------------------------------------
*/

.forum-subboard-stat {
    margin-left: -40px;

    padding:
        0
        42px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    background: var(--forum-row-border) !important;

    clip-path:
        polygon(
            44px 0,
            100% 0,
            calc(100% - 44px) 100%,
            0 100%
        );

    text-align: center;
}

.forum-subboard-stat::before {
    content: "";

    position: absolute;
    inset: 1px;
    z-index: 0;

    display: block;

    background: var(--forum-row-bg) !important;

    clip-path:
        polygon(
            43px 0,
            100% 0,
            calc(100% - 43px) 100%,
            0 100%
        );
}

.forum-subboard-stat > * {
    position: relative;
    z-index: 1;
}

.forum-subboard-stat strong {
    margin: 0;

    color: #fff;

    font-family:
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 18px;
    font-weight: 600;
    line-height: 1;
}

.forum-subboard-stat span {
    margin-top: 7px;

    color: #d8cfd9;

    font-family:
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1;

    text-transform: uppercase;
}


/*
|--------------------------------------------------------------------------
| Last-post cell
|--------------------------------------------------------------------------
*/

.forum-subboard-last-post {
    margin-left: -40px;

    padding:
        18px
        24px
        18px
        58px;

    display: flex;
    align-items: center;

    background: var(--forum-row-border) !important;

    clip-path:
        polygon(
            44px 0,
            100% 0,
            100% 100%,
            0 100%
        );
}

.forum-subboard-last-post::before {
    content: "";

    position: absolute;
    inset: 1px;
    z-index: 0;

    display: block;

    background: var(--forum-row-bg) !important;

    clip-path:
        polygon(
            43px 0,
            100% 0,
            100% 100%,
            0 100%
        );
}

.forum-subboard-last-post > * {
    position: relative;
    z-index: 1;
}

.forum-subboard-last-post .forum-last-post-card {
    width: 100%;
}

.forum-subboard-last-post .forum-last-post-avatar {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
}


/*
|--------------------------------------------------------------------------
| Responsive
|--------------------------------------------------------------------------
*/

@media (max-width: 1100px) {

    .forum-subboard-row {
        grid-template-columns:
            minmax(0, 1fr)
            125px
            125px
            minmax(260px, 0.48fr);
    }

}


@media (max-width: 860px) {

    .forum-subboard-row {
        grid-template-columns:
            minmax(0, 1fr)
            105px
            105px;
    }

    .forum-subboard-last-post {
        grid-column:
            1
            / -1;

        margin-left: 0;

        clip-path: none;

        padding-left: 20px;
    }

    .forum-subboard-last-post::before {
        clip-path: none;
    }

}


@media (max-width: 640px) {

    .forum-subboard-row {
        grid-template-columns:
            minmax(0, 1fr)
            76px
            76px;
    }

    .forum-subboard-copy,
    .forum-subboard-stat,
    .forum-subboard-last-post {
        min-height: 86px;

        clip-path: none;

        margin-left: 0;

        background: var(--forum-row-bg) !important;

        border:
            1px
            solid
            var(--forum-row-border);
    }

    .forum-subboard-copy::before,
    .forum-subboard-stat::before,
    .forum-subboard-last-post::before {
        display: none;
    }

    .forum-subboard-copy {
        padding:
            16px
            14px;
    }

    .forum-subboard-stat {
        padding:
            0
            8px;
    }

    .forum-subboard-last-post {
        padding:
            14px
            15px;
    }

}


/* ================================================================
   SUB-BOARD ROW — EXACT VISUAL MATCH TO MAIN BOARD ROW
   ================================================================ */

/*
|--------------------------------------------------------------------------
| Match the same four-column proportions used by the main board row.
|--------------------------------------------------------------------------
*/

.forum-subboard-row {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        145px
        145px
        minmax(300px, 0.52fr);

    min-height: 102px;

    overflow: visible;

    border: 0;
    background: transparent;
}


/*
|--------------------------------------------------------------------------
| Match the main-board shape geometry.
|--------------------------------------------------------------------------
*/

.forum-subboard-copy {
    position: relative;
    min-width: 0;
    min-height: 102px;

    padding:
        22px
        54px
        22px
        28px;

    margin: 0;

    background: #120814 !important;

    border: 0 !important;

    clip-path:
        polygon(
            0 0,
            100% 0,
            calc(100% - 44px) 100%,
            0 100%
        );
}

/*
 * Do not use the dark inset overlay that made the sub-board look
 * different from the main board row.
 */
.forum-subboard-copy::before,
.forum-subboard-copy::after {
    content: none !important;
    display: none !important;
}


.forum-subboard-stat {
    position: relative;

    min-width: 0;
    min-height: 102px;

    margin-left: -40px;
    margin-right: 0;

    padding:
        0
        42px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    background:
        rgba(116, 64, 129, 0.50) !important;

    border: 0 !important;

    clip-path:
        polygon(
            44px 0,
            100% 0,
            calc(100% - 44px) 100%,
            0 100%
        );

    text-align: center;
}

.forum-subboard-stat::before,
.forum-subboard-stat::after {
    content: none !important;
    display: none !important;
}


.forum-subboard-last-post {
    position: relative;

    min-width: 0;
    min-height: 102px;

    margin-left: -40px;

    padding:
        18px
        24px
        18px
        58px;

    display: flex;
    align-items: center;

    background:
        rgba(116, 64, 129, 0.50) !important;

    border: 0 !important;

    clip-path:
        polygon(
            44px 0,
            100% 0,
            100% 100%,
            0 100%
        );
}

.forum-subboard-last-post::before,
.forum-subboard-last-post::after {
    content: none !important;
    display: none !important;
}


/*
|--------------------------------------------------------------------------
| Match the main board text treatment.
|--------------------------------------------------------------------------
*/

.forum-subboard-copy h3 {
    margin:
        0
        0
        7px;

    font-family:
        "Arial Narrow",
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 17px;
    font-weight: 500;
    line-height: 1.25;
}

.forum-subboard-copy h3 a,
.forum-subboard-copy h3 a:visited {
    color: var(--color-gold-light);
    text-decoration: none;
}

.forum-subboard-copy p {
    margin: 0;

    color: #d7cfd8;

    font-family:
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 13px;
    line-height: 1.5;
}


.forum-subboard-stat strong {
    margin: 0;

    color: #fff;

    font-family:
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 18px;
    font-weight: 600;
    line-height: 1;
}

.forum-subboard-stat span {
    margin-top: 7px;

    color: #fff;

    font-family:
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1;

    text-transform: uppercase;
}


/*
|--------------------------------------------------------------------------
| Sub-board hover should match the main board-name cell.
|--------------------------------------------------------------------------
*/

.forum-subboard-copy {
    transition:
        background-color 140ms ease;
}

.forum-subboard-copy:hover {
    background: #150a18 !important;
}


/*
|--------------------------------------------------------------------------
| Match the title bar to the main forum category bars.
|--------------------------------------------------------------------------
*/

.forum-board-subforums {
    border: 0;
    background: transparent;
    box-shadow: none;
}

.forum-board-subforums .forum-board-section-titlebar {
    min-height: 50px;

    padding:
        8px
        16px;

    border:
        1px
        solid
        rgba(116, 64, 129, 0.34);

    border-radius:
        4px
        4px
        0
        0;

    background: #211027;
}

.forum-board-subforums .forum-board-section-titlebar h2 {
    margin: 0;

    color: #fff;

    font-family:
        "Arial Narrow",
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 18px;
    font-weight: 500;
    line-height: 1.15;
}


/*
|--------------------------------------------------------------------------
| Responsive
|--------------------------------------------------------------------------
*/

@media (max-width: 1100px) {

    .forum-subboard-row {
        grid-template-columns:
            minmax(0, 1fr)
            125px
            125px
            minmax(260px, 0.48fr);
    }

}


@media (max-width: 860px) {

    .forum-subboard-row {
        grid-template-columns:
            minmax(0, 1fr)
            105px
            105px;
    }

    .forum-subboard-last-post {
        grid-column:
            1
            / -1;

        margin-left: 0;

        clip-path: none;

        padding-left: 20px;
    }

}


@media (max-width: 640px) {

    .forum-subboard-row {
        grid-template-columns:
            minmax(0, 1fr)
            76px
            76px;
    }

    .forum-subboard-copy,
    .forum-subboard-stat,
    .forum-subboard-last-post {
        min-height: 86px;

        clip-path: none;

        margin-left: 0;

        border:
            1px
            solid
            rgba(116, 64, 129, 0.34) !important;
    }

    .forum-subboard-copy {
        padding:
            16px
            14px;

        background: #120814 !important;
    }

    .forum-subboard-stat,
    .forum-subboard-last-post {
        background:
            rgba(116, 64, 129, 0.50) !important;
    }

    .forum-subboard-stat {
        padding:
            0
            8px;
    }

    .forum-subboard-last-post {
        padding:
            14px
            15px;
    }

}


/* ================================================================
   SUB-BOARDS — FORCE EXACT MATCH TO MAIN BOARD DISPLAY
   ================================================================ */

/*
|--------------------------------------------------------------------------
| Sub-board section wrapper/titlebar
|--------------------------------------------------------------------------
*/

.forum-board-subforums {
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.forum-board-subforums .forum-board-section-titlebar {
    min-height: 60px !important;
    margin: 0 0 10px !important;
    padding: 0 22px !important;

    display: flex !important;
    align-items: center !important;

    border: 1px solid rgba(116, 64, 129, 0.34) !important;
    border-radius: 0 !important;

    background: #211027 !important;
}

.forum-board-subforums .forum-board-section-titlebar h2 {
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;

    font-family: "Arial Narrow", "Segoe UI", Arial, sans-serif !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    letter-spacing: 0.01em !important;
    line-height: 1.2 !important;

    color: #fff !important;
}


/*
|--------------------------------------------------------------------------
| Exact same row proportions as the main board row
|--------------------------------------------------------------------------
*/

.forum-subboard-row {
    display: grid !important;

    grid-template-columns:
        minmax(0, 1fr)
        145px
        145px
        minmax(300px, 0.52fr) !important;

    column-gap: 0 !important;

    min-height: 102px !important;

    overflow: visible !important;

    border: 0 !important;
    border-radius: 0 !important;

    background: transparent !important;
}

.forum-subboard-row + .forum-subboard-row {
    margin-top: 5px !important;
    border-top: 0 !important;
}


/*
|--------------------------------------------------------------------------
| Sub-board name / description cell
| Same dark fill and right slant as main board name cell
|--------------------------------------------------------------------------
*/

.forum-subboard-copy {
    position: relative !important;
    isolation: isolate !important;

    min-width: 0 !important;
    min-height: 102px !important;

    margin: 0 !important;

    padding:
        22px
        54px
        22px
        28px !important;

    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;

    border: 0 !important;
    border-radius: 0 !important;

    background: #120814 !important;

    clip-path:
        polygon(
            0 0,
            100% 0,
            calc(100% - 44px) 100%,
            0 100%
        ) !important;
}

/* Kill old inset/outline experiments so the sub-board cell behaves exactly
   like the currently displayed main-board cell. */
.forum-subboard-copy::before,
.forum-subboard-copy::after {
    content: none !important;
    display: none !important;
}

.forum-subboard-copy h3 {
    margin: 0 0 7px !important;

    font-family: "Arial Narrow", "Segoe UI", Arial, sans-serif !important;
    font-size: 17px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    line-height: 1.25 !important;
}

.forum-subboard-copy h3 a,
.forum-subboard-copy h3 a:visited {
    color: var(--color-gold-light) !important;
    text-decoration: none !important;
}

.forum-subboard-copy p {
    margin: 0 !important;

    color: #d7cfd8 !important;

    font-family: "Segoe UI", Arial, sans-serif !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
}

.forum-subboard-copy:hover {
    background: #150a18 !important;
}


/*
|--------------------------------------------------------------------------
| Threads / Posts
| Same purple fill, geometry, size and spacing as main-board stat cells
|--------------------------------------------------------------------------
*/

.forum-subboard-stat {
    position: relative !important;
    isolation: isolate !important;

    min-width: 0 !important;
    min-height: 102px !important;

    margin:
        0
        0
        0
        -40px !important;

    padding:
        0
        42px !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    border: 0 !important;
    border-radius: 0 !important;

    background: rgba(116, 64, 129, 0.50) !important;

    clip-path:
        polygon(
            44px 0,
            100% 0,
            calc(100% - 44px) 100%,
            0 100%
        ) !important;

    text-align: center !important;
}

.forum-subboard-stat::before,
.forum-subboard-stat::after {
    content: none !important;
    display: none !important;
}

.forum-subboard-stat strong {
    width: auto !important;

    margin: 0 !important;

    color: #fff !important;

    font-family: "Segoe UI", Arial, sans-serif !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 1 !important;

    text-align: center !important;
    transform: none !important;
}

.forum-subboard-stat span {
    width: auto !important;

    margin: 7px 0 0 !important;

    color: #fff !important;

    font-family: "Segoe UI", Arial, sans-serif !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    line-height: 1 !important;

    text-align: center !important;
    text-transform: uppercase !important;
    transform: none !important;
}


/*
|--------------------------------------------------------------------------
| Last Post
| Same purple fill and left slant as main board Last Post cell
|--------------------------------------------------------------------------
*/

.forum-subboard-last-post {
    position: relative !important;
    isolation: isolate !important;

    min-width: 0 !important;
    min-height: 102px !important;

    margin-left: -40px !important;

    padding:
        18px
        24px
        18px
        58px !important;

    display: flex !important;
    align-items: center !important;

    border: 0 !important;
    border-radius: 0 !important;

    background: rgba(116, 64, 129, 0.50) !important;

    clip-path:
        polygon(
            44px 0,
            100% 0,
            100% 100%,
            0 100%
        ) !important;
}

.forum-subboard-last-post::before,
.forum-subboard-last-post::after {
    content: none !important;
    display: none !important;
}

.forum-subboard-last-post > * {
    position: relative !important;
    z-index: 1 !important;
}


/*
|--------------------------------------------------------------------------
| Responsive
|--------------------------------------------------------------------------
*/

@media (max-width: 1100px) {
    .forum-subboard-row {
        grid-template-columns:
            minmax(0, 1fr)
            125px
            125px
            minmax(260px, 0.48fr) !important;
    }
}

@media (max-width: 860px) {
    .forum-subboard-row {
        grid-template-columns:
            minmax(0, 1fr)
            105px
            105px !important;
    }

    .forum-subboard-last-post {
        grid-column: 1 / -1 !important;
        margin-left: 0 !important;
        clip-path: none !important;
        padding-left: 20px !important;
    }
}

@media (max-width: 640px) {
    .forum-subboard-row {
        grid-template-columns:
            minmax(0, 1fr)
            76px
            76px !important;
    }

    .forum-subboard-copy,
    .forum-subboard-stat,
    .forum-subboard-last-post {
        min-height: 86px !important;

        margin-left: 0 !important;

        clip-path: none !important;
    }

    .forum-subboard-copy {
        padding: 16px 14px !important;
    }

    .forum-subboard-stat {
        padding: 0 8px !important;
    }

    .forum-subboard-last-post {
        padding: 14px 15px !important;
    }
}


/* ================================================================
   SUB-BOARD NAME CELL — RESTORE VISIBLE BORDER
   ================================================================ */

.forum-subboard-copy {
    position: relative !important;
    isolation: isolate !important;

    /* Outer clipped shape is the border. */
    background: rgba(116, 64, 129, 0.42) !important;
}

/* Inner clipped shape is the dark board-name background. */
.forum-subboard-copy::before {
    content: "" !important;

    position: absolute !important;
    inset: 1px !important;
    z-index: 0 !important;

    display: block !important;

    background: #120814 !important;

    clip-path:
        polygon(
            0 0,
            100% 0,
            calc(100% - 43px) 100%,
            0 100%
        ) !important;

    pointer-events: none;
}

/* Keep all actual board text above the inset fill. */
.forum-subboard-copy > * {
    position: relative !important;
    z-index: 1 !important;
}

/* Keep the subtle board-name hover on the dark inner fill only. */
.forum-subboard-copy:hover::before {
    background: #150a18 !important;
}

@media (max-width: 640px) {
    .forum-subboard-copy {
        background: #120814 !important;

        border:
            1px
            solid
            rgba(116, 64, 129, 0.42) !important;
    }

    .forum-subboard-copy::before {
        display: none !important;
    }
}


/* ================================================================
   SUB-BOARD NAME HOVER — KEEP BORDER VISIBLE
   ================================================================ */

.forum-subboard-copy {
    /* Border color remains constant at all times. */
    background: rgba(116, 64, 129, 0.42) !important;
}

.forum-subboard-copy:hover {
    /* Do not replace the outer border layer on hover. */
    background: rgba(116, 64, 129, 0.42) !important;
}

/* Only the inner dark fill changes on hover. */
.forum-subboard-copy::before {
    background: #120814 !important;
}

.forum-subboard-copy:hover::before {
    background: #150a18 !important;
}


/* ================================================================
   SIDEBAR TITLEBAR TYPOGRAPHY — MATCH FORUM TITLEBARS
   ================================================================ */

/*
|--------------------------------------------------------------------------
| Sidebar title text
|--------------------------------------------------------------------------
| Use the same font family, weight, sizing, and spacing as the forum
| category/sub-board titlebars.
*/

.sidebar-titlebar h2,
.sidebar-titlebar h3,
.sidebar-panel > .sidebar-titlebar h2,
.sidebar-panel > .sidebar-titlebar h3 {
    margin: 0 !important;

    font-family:
        "Arial Narrow",
        "Segoe UI",
        Arial,
        sans-serif !important;

    font-size: 18px !important;
    font-weight: 500 !important;
    letter-spacing: 0.01em !important;
    line-height: 1.2 !important;

    color: #fff !important;
}


/*
|--------------------------------------------------------------------------
| Keep collapse/minimize controls aligned with the new title text
|--------------------------------------------------------------------------
*/

.sidebar-titlebar {
    align-items: center !important;
}

.sidebar-titlebar button,
.sidebar-titlebar .sidebar-toggle,
.sidebar-titlebar .sidebar-collapse-toggle {
    align-self: center !important;
}


/*
|--------------------------------------------------------------------------
| Responsive
|--------------------------------------------------------------------------
*/

@media (max-width: 640px) {
    .sidebar-titlebar h2,
    .sidebar-titlebar h3,
    .sidebar-panel > .sidebar-titlebar h2,
    .sidebar-panel > .sidebar-titlebar h3 {
        font-size: 17px !important;
    }
}


/* ================================================================
   FORUM THREAD PAGE — TRADITIONAL POST LAYOUT
   ================================================================ */

/*
|--------------------------------------------------------------------------
| Page + Header
|--------------------------------------------------------------------------
*/

.forum-thread-page {
    min-height: 100vh;
    background:
        radial-gradient(circle at 50% 0%, rgba(116, 64, 129, 0.08), transparent 34rem),
        var(--color-background, #0b070d);
}

.forum-thread-page .section-inner {
    width: min(100% - 40px, 1320px);
    margin-inline: auto;
}

.forum-thread-header {
    padding: 34px 0 12px;
}

.forum-thread-page .forum-breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    margin: 0 0 15px;
    color: #a99eaa;
    font-family: "Segoe UI", Arial, sans-serif;
    font-size: 12px;
    line-height: 1.45;
}

.forum-thread-page .forum-breadcrumbs a,
.forum-thread-page .forum-breadcrumbs a:visited {
    color: var(--color-gold-light);
    text-decoration: none;
}

.forum-thread-page .forum-breadcrumbs a:hover,
.forum-thread-page .forum-breadcrumbs a:focus-visible {
    color: #f0dda6;
    text-decoration: underline;
}

.forum-thread-titlebar {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 22px;
    min-height: 92px;
    overflow: hidden;
    border: 1px solid rgba(151, 95, 163, 0.34);
    background:
        linear-gradient(135deg, rgba(56, 26, 64, 0.96), rgba(29, 13, 35, 0.98));
    box-shadow:
        0 15px 34px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.forum-thread-title-copy {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    padding: 18px 24px;
}

.forum-thread-title-copy h1 {
    margin: 0;
    color: #fff;
    font-family: "Arial Narrow", "Segoe UI", Arial, sans-serif;
    font-size: clamp(24px, 2.3vw, 34px);
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1.12;
}

.forum-thread-page-labels {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 8px;
}

.forum-thread-page-label {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 3px 8px;
    border: 1px solid color-mix(in srgb, var(--thread-label-color, #9f74aa) 72%, white 8%);
    border-radius: 3px;
    background: color-mix(in srgb, var(--thread-label-color, #9f74aa) 26%, #120814 74%);
    color: #fff;
    font-family: "Segoe UI", Arial, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.055em;
    line-height: 1;
    text-transform: uppercase;
}

.forum-thread-flags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.forum-thread-flags span {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 3px 8px;
    border: 1px solid rgba(211, 178, 92, 0.32);
    border-radius: 3px;
    background: rgba(211, 178, 92, 0.08);
    color: #e5cf92;
    font-family: "Segoe UI", Arial, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.055em;
    line-height: 1;
    text-transform: uppercase;
}

/*
|--------------------------------------------------------------------------
| Moderator Controls
|--------------------------------------------------------------------------
*/

.forum-thread-moderator-controls {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    max-width: 470px;
    padding: 15px 18px 15px 28px;
    border-left: 1px solid rgba(151, 95, 163, 0.28);
    background: rgba(12, 6, 15, 0.34);
}

.forum-thread-moderator-label {
    width: 100%;
    margin-bottom: 2px;
    color: #c8bec5;
    font-family: "Segoe UI", Arial, sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-align: right;
    text-transform: uppercase;
}

.forum-thread-moderator-controls button,
.forum-post-action {
    min-height: 30px;
    padding: 5px 10px;
    border: 1px solid rgba(151, 95, 163, 0.34);
    border-radius: 3px;
    background: rgba(57, 27, 65, 0.66);
    color: #ded4df;
    font: 600 11px/1.1 "Segoe UI", Arial, sans-serif;
}

.forum-thread-moderator-controls button:disabled,
.forum-post-action:disabled {
    cursor: default;
    opacity: 0.62;
}

.forum-thread-moderator-controls button.is-danger,
.forum-post-action.is-danger {
    border-color: rgba(186, 76, 88, 0.38);
    background: rgba(116, 31, 43, 0.26);
    color: #e9b2b9;
}

/*
|--------------------------------------------------------------------------
| Thread Navigation
|--------------------------------------------------------------------------
*/

.forum-thread-nav-section {
    padding: 12px 0 14px;
}

.forum-thread-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.forum-thread-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
}

.forum-thread-pagination a,
.forum-thread-pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    min-height: 34px;
    padding: 6px 10px;
    border: 1px solid rgba(116, 64, 129, 0.34);
    border-radius: 3px;
    background: rgba(24, 12, 29, 0.94);
    color: #d6ccd7;
    font-family: "Segoe UI", Arial, sans-serif;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
}

.forum-thread-pagination a:hover,
.forum-thread-pagination a:focus-visible {
    border-color: rgba(202, 168, 91, 0.48);
    color: var(--color-gold-light);
}

.forum-thread-pagination .is-current {
    border-color: rgba(202, 168, 91, 0.55);
    background: rgba(202, 168, 91, 0.13);
    color: #f0dda6;
}

.forum-thread-pagination .is-disabled {
    opacity: 0.38;
}

.forum-thread-nav-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

/*
|--------------------------------------------------------------------------
| Post Rows
|--------------------------------------------------------------------------
*/

.forum-thread-posts {
    padding: 0 0 48px;
}

.forum-thread-posts > .section-inner {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.forum-post {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    min-height: 270px;
    overflow: hidden;
    border: 1px solid rgba(116, 64, 129, 0.35);
    background: #130a16;
    box-shadow:
        0 13px 28px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

.forum-post.is-starter-post {
    border-color: rgba(202, 168, 91, 0.36);
}

/*
|--------------------------------------------------------------------------
| Mini Profile
|--------------------------------------------------------------------------
*/

.forum-post-profile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    padding: 22px 18px 20px;
    border-right: 1px solid rgba(116, 64, 129, 0.30);
    background:
        linear-gradient(180deg, rgba(43, 20, 49, 0.97), rgba(24, 11, 29, 0.98));
    text-align: center;
}

.forum-post-profile::after {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(202, 168, 91, 0.7), transparent);
    opacity: 0.52;
}

.forum-post-avatar {
    display: grid;
    place-items: center;
    width: 94px;
    height: 94px;
    margin: 0 0 13px;
    overflow: hidden;
    border: 2px solid rgba(202, 168, 91, 0.48);
    border-radius: 4px;
    background: #0f0812;
    box-shadow: 0 7px 20px rgba(0, 0, 0, 0.28);
    color: #e4d4a0;
    font: 600 28px/1 "Arial Narrow", "Segoe UI", Arial, sans-serif;
    text-decoration: none;
}

.forum-post-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.forum-post-member-name,
.forum-post-member-name:visited {
    max-width: 100%;
    overflow-wrap: anywhere;
    color: var(--color-gold-light);
    font-family: "Arial Narrow", "Segoe UI", Arial, sans-serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.18;
    text-decoration: none;
}

.forum-post-member-name:hover,
.forum-post-member-name:focus-visible {
    filter: brightness(1.15);
    text-decoration: underline;
}

.forum-post-member-role,
.forum-post-member-house {
    margin: 5px 0 0;
    font-family: "Segoe UI", Arial, sans-serif;
    line-height: 1.25;
}

.forum-post-member-role {
    color: #d7cfd8;
    font-size: 12px;
    font-weight: 600;
}

.forum-post-member-house {
    color: #c7b98c;
    font-size: 11px;
    font-weight: 600;
}

.forum-post-member-stats {
    width: 100%;
    margin: 18px 0 0;
    padding: 12px 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.065);
}

.forum-post-member-stats > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 5px 0;
}

.forum-post-member-stats dt,
.forum-post-member-stats dd {
    margin: 0;
    font-family: "Segoe UI", Arial, sans-serif;
    font-size: 11px;
    line-height: 1.3;
}

.forum-post-member-stats dt {
    color: #a99eaa;
    text-align: left;
}

.forum-post-member-stats dd {
    color: #e1d8e2;
    font-weight: 600;
    text-align: right;
}

/*
|--------------------------------------------------------------------------
| Post Body
|--------------------------------------------------------------------------
*/

.forum-post-main {
    display: flex;
    min-width: 0;
    flex-direction: column;
    background: rgba(18, 9, 21, 0.98);
}

.forum-post-content {
    flex: 1 1 auto;
    min-height: 215px;
    padding: 25px 30px 28px;
}

.forum-post-body {
    color: #ddd6df;
    font-family: "Segoe UI", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.68;
    overflow-wrap: anywhere;
}

.forum-post-body > :first-child {
    margin-top: 0;
}

.forum-post-body > :last-child {
    margin-bottom: 0;
}

.forum-post-body a,
.forum-post-body a:visited {
    color: var(--color-gold-light);
}

.forum-post-body img {
    max-width: 100%;
    height: auto;
}

/*
|--------------------------------------------------------------------------
| Quotes
|--------------------------------------------------------------------------
*/

.forum-post-quotes {
    display: grid;
    gap: 10px;
    margin: 0 0 20px;
}

.forum-post-quote {
    margin: 0;
    overflow: hidden;
    border: 1px solid rgba(116, 64, 129, 0.34);
    border-left: 3px solid rgba(202, 168, 91, 0.65);
    border-radius: 3px;
    background: rgba(31, 15, 36, 0.74);
}

.forum-post-quote header {
    padding: 8px 12px;
    border-bottom: 1px solid rgba(116, 64, 129, 0.24);
    background: rgba(63, 31, 72, 0.34);
    color: #e5cf92;
    font-family: "Segoe UI", Arial, sans-serif;
    font-size: 11px;
    font-weight: 700;
}

.forum-post-quote > div {
    padding: 11px 13px 13px;
    color: #cfc5d0;
    font-family: "Segoe UI", Arial, sans-serif;
    font-size: 13px;
    line-height: 1.58;
}

.forum-post-edited {
    margin: 22px 0 0;
    color: #8f838f;
    font-family: "Segoe UI", Arial, sans-serif;
    font-size: 10px;
    font-style: italic;
    line-height: 1.35;
}

/*
|--------------------------------------------------------------------------
| Bottom Post Strip
|--------------------------------------------------------------------------
*/

.forum-post-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 48px;
    padding: 8px 14px 8px 18px;
    border-top: 1px solid rgba(116, 64, 129, 0.27);
    background: rgba(32, 15, 37, 0.96);
}

.forum-post-date {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    color: #a99eaa;
    font-family: "Segoe UI", Arial, sans-serif;
    font-size: 10px;
    line-height: 1.35;
}

.forum-post-date a,
.forum-post-date a:visited {
    color: var(--color-gold-light);
    font-weight: 700;
    text-decoration: none;
}

.forum-post-date a:hover,
.forum-post-date a:focus-visible {
    color: #f0dda6;
}

.forum-post-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 5px;
}

/*
|--------------------------------------------------------------------------
| Empty / Locked / Reply States
|--------------------------------------------------------------------------
*/

.forum-thread-empty,
.forum-thread-locked-notice,
.forum-thread-reply-placeholder,
.forum-thread-error .section-inner {
    border: 1px solid rgba(116, 64, 129, 0.32);
    background: rgba(23, 11, 27, 0.95);
    color: #cec5cf;
}

.forum-thread-empty,
.forum-thread-locked-notice {
    padding: 18px 20px;
    font-family: "Segoe UI", Arial, sans-serif;
    font-size: 13px;
    line-height: 1.55;
}

.forum-thread-locked-notice {
    border-color: rgba(202, 168, 91, 0.30);
    background: rgba(202, 168, 91, 0.055);
    color: #d8c994;
}

.forum-thread-pagination-bottom {
    align-self: flex-end;
    margin-top: 2px;
}

.forum-thread-reply {
    margin-top: 4px;
}

.forum-thread-reply > .forum-board-section-titlebar {
    min-height: 48px;
}

.forum-thread-reply > .forum-board-section-titlebar h2 {
    font-family: "Arial Narrow", "Segoe UI", Arial, sans-serif;
    font-size: 18px;
    font-weight: 500;
}

.forum-thread-reply-placeholder {
    min-height: 120px;
    padding: 22px 24px;
}

.forum-thread-reply-placeholder p {
    margin: 0;
    color: #bcb2bd;
    font-family: "Segoe UI", Arial, sans-serif;
    font-size: 13px;
    line-height: 1.55;
}

.forum-thread-error {
    padding: 48px 0;
}

.forum-thread-error .section-inner {
    padding: 30px;
}

.forum-thread-error h1 {
    margin-top: 0;
    color: #fff;
}

/*
|--------------------------------------------------------------------------
| Tablet
|--------------------------------------------------------------------------
*/

@media (max-width: 980px) {
    .forum-thread-titlebar {
        flex-direction: column;
        gap: 0;
    }

    .forum-thread-moderator-controls {
        max-width: none;
        padding: 12px 18px;
        border-top: 1px solid rgba(151, 95, 163, 0.24);
        border-left: 0;
        justify-content: flex-start;
    }

    .forum-thread-moderator-label {
        text-align: left;
    }

    .forum-post {
        grid-template-columns: 185px minmax(0, 1fr);
    }

    .forum-post-profile {
        padding-inline: 14px;
    }

    .forum-post-content {
        padding: 22px 24px 25px;
    }
}

/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 700px) {
    .forum-thread-page .section-inner {
        width: min(100% - 24px, 1320px);
    }

    .forum-thread-header {
        padding-top: 22px;
    }

    .forum-thread-title-copy {
        padding: 16px 17px;
    }

    .forum-thread-title-copy h1 {
        font-size: 24px;
    }

    .forum-thread-nav {
        align-items: stretch;
        flex-direction: column;
    }

    .forum-thread-nav-actions {
        justify-content: flex-start;
    }

    .forum-thread-posts > .section-inner {
        gap: 12px;
    }

    .forum-post {
        display: block;
        min-height: 0;
    }

    .forum-post-profile {
        display: grid;
        grid-template-columns: 68px minmax(0, 1fr);
        grid-template-areas:
            "avatar name"
            "avatar role"
            "avatar house"
            "stats stats";
        align-items: center;
        gap: 1px 13px;
        padding: 14px 15px 12px;
        border-right: 0;
        border-bottom: 1px solid rgba(116, 64, 129, 0.30);
        text-align: left;
    }

    .forum-post-avatar {
        grid-area: avatar;
        width: 68px;
        height: 68px;
        margin: 0;
        font-size: 21px;
    }

    .forum-post-member-name {
        grid-area: name;
        align-self: end;
        font-size: 17px;
    }

    .forum-post-member-role {
        grid-area: role;
        align-self: center;
        margin-top: 2px;
    }

    .forum-post-member-house {
        grid-area: house;
        align-self: start;
        margin-top: 2px;
    }

    .forum-post-member-stats {
        grid-area: stats;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0;
        margin-top: 11px;
        padding-top: 9px;
    }

    .forum-post-member-stats > div {
        display: block;
        min-width: 0;
        padding: 3px 8px;
        border-right: 1px solid rgba(255, 255, 255, 0.055);
        text-align: center;
    }

    .forum-post-member-stats > div:first-child {
        padding-left: 0;
    }

    .forum-post-member-stats > div:last-child {
        padding-right: 0;
        border-right: 0;
    }

    .forum-post-member-stats dt,
    .forum-post-member-stats dd {
        text-align: center;
    }

    .forum-post-member-stats dt {
        font-size: 9px;
    }

    .forum-post-member-stats dd {
        margin-top: 2px;
        font-size: 11px;
    }

    .forum-post-content {
        min-height: 170px;
        padding: 19px 17px 22px;
    }

    .forum-post-body {
        font-size: 13px;
        line-height: 1.62;
    }

    .forum-post-footer {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
        padding: 9px 12px 10px;
    }

    .forum-post-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .forum-thread-pagination-bottom {
        align-self: stretch;
    }
}

@media (max-width: 430px) {
    .forum-thread-page .section-inner {
        width: min(100% - 18px, 1320px);
    }

    .forum-thread-pagination a,
    .forum-thread-pagination span {
        min-width: 31px;
        min-height: 31px;
        padding: 5px 8px;
        font-size: 10px;
    }

    .forum-thread-nav-actions .button {
        flex: 1 1 auto;
        justify-content: center;
    }

    .forum-post-profile {
        grid-template-columns: 58px minmax(0, 1fr);
        gap: 1px 10px;
        padding-inline: 12px;
    }

    .forum-post-avatar {
        width: 58px;
        height: 58px;
        font-size: 18px;
    }

    .forum-post-member-name {
        font-size: 16px;
    }

    .forum-post-member-stats dt {
        min-height: 24px;
    }

    .forum-thread-moderator-controls button,
    .forum-post-action {
        min-height: 29px;
        padding-inline: 9px;
        font-size: 10px;
    }
}

/*
|--------------------------------------------------------------------------
| New Thread Composer
|--------------------------------------------------------------------------
*/

.forum-new-thread-page .forum-board-hero {
    padding: 26px 0 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    background: linear-gradient(180deg, #170b1c 0%, #120914 100%);
}

.forum-new-thread-page .forum-board-heading {
    max-width: 900px;
}

.forum-new-thread-page .forum-board-eyebrow {
    margin: 0 0 8px;
    color: var(--color-gold-light);
    font-family: "Arial Narrow", "Segoe UI", Arial, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    line-height: 1.2;
    text-transform: uppercase;
}

.forum-new-thread-page .forum-board-heading h1 {
    margin: 0 0 9px;
    color: var(--color-white);
    font-family: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
    font-size: clamp(31px, 4vw, 44px);
    line-height: 1.08;
}

.forum-new-thread-page .forum-board-heading > p:last-child {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 14px;
}

.forum-thread-composer-section {
    padding: 28px 0 72px;
}

.forum-thread-composer {
    overflow: hidden;
    border: 1px solid rgba(196, 161, 90, 0.20);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(36, 20, 44, 0.96), rgba(24, 13, 30, 0.98));
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.20);
}

.forum-thread-composer .form-group {
    margin: 0;
    padding: 22px 24px;
}

.forum-thread-composer .form-group + .form-group {
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.forum-thread-composer label,
.forum-thread-composer .forum-rich-editor-field > label {
    display: block;
    margin: 0 0 9px;
    color: var(--color-gold-light);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.045em;
    text-transform: uppercase;
}

.forum-thread-title-field .form-control {
    width: 100%;
    min-height: 48px;
    padding: 11px 14px;
    border: 1px solid rgba(196, 161, 90, 0.24);
    border-radius: 5px;
    outline: 0;
    background: rgba(10, 5, 13, 0.62);
    color: var(--color-text);
    font: inherit;
    font-size: 15px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
    transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}

.forum-thread-title-field .form-control:hover {
    border-color: rgba(219, 193, 125, 0.38);
}

.forum-thread-title-field .form-control:focus {
    border-color: var(--color-gold);
    background: rgba(12, 6, 15, 0.82);
    box-shadow: 0 0 0 3px rgba(196, 161, 90, 0.10);
}

.forum-thread-title-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 7px;
    color: var(--color-text-subtle);
    font-size: 11px;
    line-height: 1.4;
}

.forum-rich-editor {
    overflow: hidden;
    border: 1px solid rgba(116, 64, 129, 0.58);
    border-radius: 6px;
    background: #100914;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}

.forum-rich-editor:focus-within {
    border-color: rgba(219, 193, 125, 0.64);
    box-shadow: 0 0 0 3px rgba(196, 161, 90, 0.08);
}

.forum-rich-editor-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    padding: 9px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(180deg, #2a1732 0%, #211228 100%);
}

.forum-editor-tool-group {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 34px;
    padding-right: 7px;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.forum-editor-tool-group:last-child {
    padding-right: 0;
    border-right: 0;
}

.forum-editor-tool,
.forum-editor-select {
    min-height: 32px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.045);
    color: var(--color-text);
    font-family: "Segoe UI", Arial, sans-serif;
    font-size: 12px;
    line-height: 1;
    transition: background var(--transition), border-color var(--transition), color var(--transition);
}

.forum-editor-tool {
    min-width: 32px;
    padding: 6px 9px;
    cursor: pointer;
}

.forum-editor-tool:hover,
.forum-editor-tool:focus-visible,
.forum-editor-select:hover,
.forum-editor-select:focus {
    border-color: rgba(219, 193, 125, 0.46);
    background: rgba(196, 161, 90, 0.10);
    color: var(--color-gold-light);
    outline: 0;
}

.forum-editor-select {
    min-width: 98px;
    padding: 5px 28px 5px 9px;
    cursor: pointer;
}

.forum-editor-select option {
    background: #211228;
    color: var(--color-text);
}

.forum-editor-color-tools {
    gap: 7px;
}

.forum-editor-color-label {
    display: inline-flex !important;
    align-items: center;
    gap: 5px;
    min-height: 32px;
    margin: 0 !important;
    padding: 4px 7px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.045);
    color: var(--color-text) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    cursor: pointer;
}

.forum-editor-color-label:hover {
    border-color: rgba(219, 193, 125, 0.46);
    background: rgba(196, 161, 90, 0.10);
}

.forum-editor-color-label input[type="color"] {
    width: 24px;
    height: 20px;
    padding: 0;
    border: 0;
    border-radius: 2px;
    background: transparent;
    cursor: pointer;
}

.forum-rich-editor-surface {
    min-height: 320px;
    padding: 19px 21px;
    outline: 0;
    background: linear-gradient(180deg, rgba(16, 9, 20, 0.98), rgba(13, 7, 16, 1));
    color: var(--color-text);
    font-family: "Segoe UI", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.7;
    overflow-wrap: anywhere;
}

.forum-rich-editor-surface:empty::before {
    content: attr(data-placeholder);
    color: #746a78;
    pointer-events: none;
}

.forum-rich-editor-surface p:first-child,
.forum-rich-editor-surface h2:first-child,
.forum-rich-editor-surface h3:first-child,
.forum-rich-editor-surface h4:first-child,
.forum-rich-editor-surface blockquote:first-child {
    margin-top: 0;
}

.forum-rich-editor-surface p:last-child,
.forum-rich-editor-surface ul:last-child,
.forum-rich-editor-surface ol:last-child,
.forum-rich-editor-surface blockquote:last-child {
    margin-bottom: 0;
}

.forum-rich-editor-surface blockquote {
    margin: 16px 0;
    padding: 10px 14px;
    border-left: 3px solid var(--color-gold);
    background: rgba(196, 161, 90, 0.065);
    color: var(--color-text-muted);
}

.forum-rich-editor-input {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.forum-thread-composer .form-help {
    margin: 9px 0 0;
    color: var(--color-text-subtle);
    font-size: 11px;
    line-height: 1.55;
}

.forum-thread-composer-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 15px 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.075);
    background: rgba(8, 4, 10, 0.28);
}

.forum-thread-composer-actions .button {
    min-height: 40px;
    padding: 8px 16px;
    font-size: 12px;
}

.forum-thread-form-errors,
.forum-thread-private-notice {
    margin-bottom: 16px;
    padding: 13px 15px;
    border-radius: 5px;
    font-size: 12px;
    line-height: 1.55;
}

.forum-thread-form-errors {
    border: 1px solid rgba(214, 102, 112, 0.38);
    background: rgba(111, 28, 40, 0.20);
    color: #f4c8cd;
}

.forum-thread-form-errors strong {
    color: #ffdbe0;
}

.forum-thread-form-errors ul {
    margin: 7px 0 0;
    padding-left: 19px;
}

.forum-thread-private-notice {
    border: 1px solid rgba(196, 161, 90, 0.30);
    background: rgba(196, 161, 90, 0.07);
    color: var(--color-text-muted);
}

.forum-thread-private-notice strong {
    color: var(--color-gold-light);
}

@media (max-width: 820px) {
    .forum-rich-editor-toolbar {
        align-items: flex-start;
    }

    .forum-editor-tool-group {
        border-right: 0;
        padding-right: 0;
    }
}

@media (max-width: 700px) {
    .forum-thread-composer-section {
        padding-top: 20px;
    }

    .forum-thread-composer .form-group {
        padding: 17px 15px;
    }

    .forum-thread-composer-actions {
        padding: 13px 15px;
    }

    .forum-rich-editor-toolbar {
        gap: 6px;
        padding: 8px;
    }

    .forum-editor-tool-group {
        flex-wrap: wrap;
    }

    .forum-rich-editor-surface {
        min-height: 260px;
        padding: 16px;
    }

    .forum-thread-title-meta {
        align-items: flex-start;
        flex-direction: column;
        gap: 2px;
    }
}

@media (max-width: 480px) {
    .forum-editor-select {
        min-width: 112px;
    }

    .forum-thread-composer-actions {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .forum-thread-composer-actions .button {
        width: 100%;
        justify-content: center;
    }
}

/*
|--------------------------------------------------------------------------
| Forum Thread Controls — Link Reset + Image Tools
|--------------------------------------------------------------------------
*/

.forum-new-thread-placeholder,
.forum-new-thread-placeholder:link,
.forum-new-thread-placeholder:visited,
.forum-new-thread-placeholder:hover,
.forum-new-thread-placeholder:focus,
.forum-new-thread-placeholder:active {
    text-decoration: none;
}

.forum-new-thread-placeholder:hover,
.forum-new-thread-placeholder:focus-visible {
    border-color: rgba(219, 193, 125, 0.58);
    background: rgba(219, 193, 125, 0.13);
    color: var(--color-gold-light);
}

.forum-editor-image-tools {
    gap: 5px;
}

.forum-editor-image-upload-input {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.forum-editor-image-preview-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
    padding: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(7, 4, 9, 0.36);
}

.forum-editor-image-preview-list[hidden] {
    display: none;
}

.forum-editor-image-preview {
    position: relative;
    min-width: 0;
    padding: 7px;
    border: 1px solid rgba(196, 161, 90, 0.18);
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.035);
}

.forum-editor-image-preview img {
    display: block;
    width: 100%;
    height: 92px;
    object-fit: cover;
    border-radius: 3px;
    background: #09050b;
}

.forum-editor-image-preview-name {
    display: block;
    margin-top: 6px;
    overflow: hidden;
    color: var(--color-text-muted);
    font-size: 10px;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.forum-editor-image-preview-remove {
    position: absolute;
    top: 11px;
    right: 11px;
    width: 25px;
    height: 25px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 50%;
    background: rgba(10, 5, 13, 0.88);
    color: #fff;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}

.forum-editor-image-preview-remove:hover,
.forum-editor-image-preview-remove:focus-visible {
    border-color: rgba(219, 193, 125, 0.62);
    color: var(--color-gold-light);
    outline: 0;
}

.forum-rich-editor-surface img {
    max-width: 100%;
    height: auto;
    margin: 12px 0;
    border-radius: 4px;
}

@media (max-width: 700px) {
    .forum-editor-image-preview-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 420px) {
    .forum-editor-image-preview-list {
        grid-template-columns: 1fr;
    }
}

/* ================================================================
   BLACKTHORNE FORUM — THREAD VISUAL REFINEMENT
   Sept. 2026
   ================================================================ */

/* ----------------------------------------------------------------
   Site-wide heading font reset
   The previous serif / narrow heading treatments are intentionally
   retired. Headings now use the same clean UI family throughout.
   ---------------------------------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6,
.forum-index-header h1,
.forum-board-heading-row h1,
.forum-board-section-titlebar h2,
.forum-index-category-titlebar h2,
.forum-index-board-copy h3,
.forum-subboard-copy h3,
.forum-thread-copy h3,
.sidebar-titlebar h2,
.sidebar-titlebar h3,
.member-content-titlebar h2,
.forum-thread-title-copy h1,
.forum-thread-reply > .forum-board-section-titlebar h2,
.forum-new-thread-page .forum-board-heading h1,
.forum-new-thread-page .forum-board-eyebrow {
    font-family: "Segoe UI", Arial, Helvetica, sans-serif !important;
}

/* ----------------------------------------------------------------
   Muted Blackthorne plum palette for forum/thread UI
   Replaces the overly bright purple treatment with charcoal-plum.
   ---------------------------------------------------------------- */
.forum-thread-page {
    background:
        radial-gradient(circle at 50% 0%, rgba(74, 43, 78, 0.07), transparent 34rem),
        var(--color-background, #0b070d);
}

/* ----------------------------------------------------------------
   Thread title header — shorter and quieter
   ---------------------------------------------------------------- */
.forum-thread-header {
    padding-top: 26px;
    padding-bottom: 8px;
}

.forum-thread-titlebar {
    min-height: 58px;
    gap: 12px;
    border-color: rgba(94, 64, 99, 0.42);
    background:
        linear-gradient(135deg, rgba(45, 29, 48, 0.98), rgba(25, 15, 28, 0.99));
    box-shadow:
        0 10px 24px rgba(0, 0, 0, 0.20),
        inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

.forum-thread-title-copy {
    padding: 10px 16px;
}

.forum-thread-title-copy h1 {
    font-size: clamp(18px, 1.65vw, 24px);
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.2;
}

.forum-thread-page-labels {
    margin-bottom: 5px;
}

.forum-thread-flags {
    margin-top: 6px;
}

/* ----------------------------------------------------------------
   Moderate button area — button only, no oversized side panel
   ---------------------------------------------------------------- */
.forum-thread-moderator-controls {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    max-width: none;
    padding: 9px 12px;
    border-left: 1px solid rgba(94, 64, 99, 0.35);
    background: rgba(9, 5, 11, 0.18);
}

.forum-thread-moderator-label {
    display: none !important;
}

.forum-thread-moderator-controls .forum-thread-moderate-button {
    min-height: 34px;
    padding: 7px 14px;
    border: 1px solid rgba(197, 165, 92, 0.42);
    border-radius: 4px;
    background: linear-gradient(180deg, rgba(61, 42, 64, 0.95), rgba(39, 25, 42, 0.98));
    color: #ead9aa;
    font: 600 11px/1 "Segoe UI", Arial, sans-serif;
    letter-spacing: 0.025em;
    cursor: pointer;
    text-decoration: none;
    transition: border-color var(--transition), background var(--transition), color var(--transition);
}

.forum-thread-moderator-controls .forum-thread-moderate-button:hover,
.forum-thread-moderator-controls .forum-thread-moderate-button:focus-visible {
    border-color: rgba(219, 193, 125, 0.70);
    background: linear-gradient(180deg, rgba(72, 49, 75, 0.98), rgba(45, 29, 48, 1));
    color: #f2e3b9;
    outline: 0;
}

/* ----------------------------------------------------------------
   Thread list typography
   ---------------------------------------------------------------- */
.forum-thread-copy h3 {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0;
}

.forum-thread-copy h3 a {
    font-weight: 500;
}

.forum-thread-byline a {
    font-weight: 400;
}

/* ----------------------------------------------------------------
   Traditional post cards — muted plum borders/backgrounds
   ---------------------------------------------------------------- */
.forum-post {
    border-color: rgba(87, 59, 91, 0.42);
    background: #120c14;
}

.forum-post.is-starter-post {
    border-color: rgba(202, 168, 91, 0.32);
}

.forum-post-profile {
    border-right-color: rgba(87, 59, 91, 0.34);
    background:
        linear-gradient(180deg, rgba(37, 25, 40, 0.98), rgba(22, 14, 25, 0.99));
}

.forum-post-main {
    background: rgba(17, 11, 19, 0.99);
}

/* Usernames should not appear bold. */
.forum-post-member-name,
.forum-post-member-name:visited {
    font-family: "Segoe UI", Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: 400 !important;
    letter-spacing: 0;
}

.forum-post-member-role,
.forum-post-member-house {
    font-weight: 500;
}

/* ----------------------------------------------------------------
   Post action controls
   ---------------------------------------------------------------- */
.forum-post-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 30px;
    padding: 5px 9px;
    border: 1px solid rgba(91, 65, 95, 0.48);
    border-radius: 4px;
    background: rgba(45, 31, 48, 0.72);
    color: #d8cfd9;
    font: 500 11px/1 "Segoe UI", Arial, sans-serif;
    text-decoration: none;
    transition: border-color var(--transition), background var(--transition), color var(--transition);
}

.forum-post-action:not(:disabled):hover,
.forum-post-action:not(:disabled):focus-visible {
    border-color: rgba(202, 168, 91, 0.48);
    background: rgba(64, 44, 67, 0.86);
    color: #ecdba9;
    outline: 0;
}

.forum-post-action:disabled {
    opacity: 0.72;
}

.forum-post-like-action > span:first-child {
    color: #c9a765;
    font-size: 13px;
    line-height: 1;
}

.forum-post-action.is-danger {
    border-color: rgba(154, 77, 84, 0.42);
    background: rgba(91, 37, 44, 0.26);
    color: #ddb6bb;
}

/* Cog-only report control */
.forum-post-report-action {
    width: 31px;
    min-width: 31px;
    padding-inline: 0;
    border-radius: 50%;
}

.forum-post-report-cog {
    display: inline-block;
    color: #b7aabd;
    font-size: 15px;
    line-height: 1;
    transition: transform var(--transition), color var(--transition);
}

.forum-post-report-action:not(:disabled):hover .forum-post-report-cog,
.forum-post-report-action:not(:disabled):focus-visible .forum-post-report-cog {
    color: #e3cf98;
    transform: rotate(20deg);
}

/* ----------------------------------------------------------------
   Composer — remove bright purple from editor chrome too
   ---------------------------------------------------------------- */
.forum-thread-composer {
    border-color: rgba(196, 161, 90, 0.18);
    background: linear-gradient(180deg, rgba(35, 25, 38, 0.98), rgba(22, 15, 25, 0.99));
}

.forum-rich-editor {
    border-color: rgba(88, 61, 92, 0.58);
    background: #100b12;
}

.forum-rich-editor-toolbar {
    background: linear-gradient(180deg, #2c202f 0%, #211724 100%);
}

.forum-editor-select option {
    background: #211724;
}

.forum-rich-editor-surface {
    background: linear-gradient(180deg, rgba(16, 11, 18, 0.99), rgba(13, 9, 15, 1));
}

/* ----------------------------------------------------------------
   Responsive thread header
   ---------------------------------------------------------------- */
@media (max-width: 760px) {
    .forum-thread-titlebar {
        min-height: 0;
        flex-direction: column;
        gap: 0;
    }

    .forum-thread-title-copy {
        padding: 11px 13px;
    }

    .forum-thread-title-copy h1 {
        font-size: 18px;
    }

    .forum-thread-moderator-controls {
        justify-content: flex-end;
        padding: 7px 12px 10px;
        border-top: 1px solid rgba(94, 64, 99, 0.28);
        border-left: 0;
        background: transparent;
    }
}

/* =========================================================
   FORUM POST BLOCKQUOTES — MATCH RICH TEXT EDITOR
   ========================================================= */
.rich-text-content.forum-post-body blockquote,
.forum-post-content blockquote {
    margin: 16px 0;
    padding: 10px 14px;
    border-left: 3px solid var(--color-gold);
    background: rgba(196, 161, 90, 0.065);
    color: var(--color-text-muted);
}

.rich-text-content.forum-post-body blockquote:first-child,
.forum-post-content blockquote:first-child {
    margin-top: 0;
}

.rich-text-content.forum-post-body blockquote:last-child,
.forum-post-content blockquote:last-child {
    margin-bottom: 0;
}

.rich-text-content.forum-post-body blockquote p:first-child,
.forum-post-content blockquote p:first-child {
    margin-top: 0;
}

.rich-text-content.forum-post-body blockquote p:last-child,
.forum-post-content blockquote p:last-child {
    margin-bottom: 0;
}

/* =========================================================
   FORUM POST BLOCKQUOTES — FORCE EDITOR MATCH
   ========================================================= */
.forum-post-content .forum-post-body blockquote,
.forum-post-content .rich-text-content blockquote {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 16px 0 !important;
    padding: 10px 14px !important;
    border: 0 !important;
    border-left: 3px solid var(--color-gold) !important;
    background: rgba(196, 161, 90, 0.065) !important;
    color: var(--color-text-muted) !important;
    text-align: left !important;
}

.forum-post-content .forum-post-body blockquote:first-child,
.forum-post-content .rich-text-content blockquote:first-child {
    margin-top: 0 !important;
}

.forum-post-content .forum-post-body blockquote:last-child,
.forum-post-content .rich-text-content blockquote:last-child {
    margin-bottom: 0 !important;
}

.forum-post-content .forum-post-body blockquote > :first-child,
.forum-post-content .rich-text-content blockquote > :first-child {
    margin-top: 0 !important;
}

.forum-post-content .forum-post-body blockquote > :last-child,
.forum-post-content .rich-text-content blockquote > :last-child {
    margin-bottom: 0 !important;
}

/* =========================================================
   SITE-WIDE LINK HOVERS — NEVER UNDERLINE
   ========================================================= */
a,
a:visited,
a:hover,
a:focus,
a:active {
    text-decoration: none !important;
}

/* =========================================================
   INLINE FORUM POST EDITOR
   Keep the edit composer visually consistent with reply/new thread.
   ========================================================= */
.forum-inline-edit-form {
    margin: 0;
    width: 100%;
}

.forum-inline-edit-form .forum-rich-editor {
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    border: 1px solid rgba(196, 161, 90, 0.5);
    border-radius: 7px;
    background: #100b12;
    box-shadow: 0 0 0 2px rgba(196, 161, 90, 0.04);
}

.forum-inline-edit-form .forum-rich-editor-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    width: 100%;
    padding: 10px 11px;
    box-sizing: border-box;
    border-bottom: 1px solid rgba(196, 161, 90, 0.42);
    background: linear-gradient(180deg, #2a202c 0%, #211922 100%);
}

.forum-inline-edit-form .forum-editor-tool-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    padding-right: 7px;
    margin-right: 1px;
    border-right: 1px solid rgba(196, 161, 90, 0.14);
}

.forum-inline-edit-form .forum-editor-tool-group:last-child {
    padding-right: 0;
    border-right: 0;
}

.forum-inline-edit-form .forum-editor-tool,
.forum-inline-edit-form .forum-editor-select {
    min-height: 34px;
}

.forum-inline-edit-form .forum-inline-edit-surface {
    display: block;
    width: 100%;
    min-height: 150px;
    padding: 14px 16px;
    box-sizing: border-box;
    border: 0 !important;
    outline: 0;
    background: linear-gradient(180deg, #100b12 0%, #0d0910 100%) !important;
    color: var(--color-text, #efe8ed);
    font: inherit;
    line-height: 1.65;
    overflow-wrap: anywhere;
}

.forum-inline-edit-form .forum-inline-edit-surface:focus {
    box-shadow: inset 0 0 0 1px rgba(196, 161, 90, 0.24);
}

.forum-inline-edit-form .forum-inline-edit-surface blockquote {
    margin: 16px 0;
    padding: 10px 14px;
    border-left: 3px solid var(--color-gold);
    background: rgba(196, 161, 90, 0.065);
    color: var(--color-text-muted);
}

.forum-inline-edit-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.forum-inline-edit-actions .button,
.forum-inline-edit-actions .btn,
.forum-inline-edit-actions button,
.forum-inline-edit-actions a {
    min-height: 42px;
}

/* =========================================================
   SITE-WIDE BACK TO TOP BUTTON
   Markup/JS will be added once in the shared footer.
   Supports either #back-to-top or .back-to-top.
   ========================================================= */
#back-to-top,
.back-to-top {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 1200;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 1px solid rgba(196, 161, 90, 0.55);
    border-radius: 50%;
    background: linear-gradient(180deg, #2b202d 0%, #1b141e 100%);
    color: var(--color-gold, #c4a15a);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.32);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

#back-to-top:hover,
#back-to-top:focus-visible,
.back-to-top:hover,
.back-to-top:focus-visible {
    border-color: rgba(196, 161, 90, 0.9);
    background: linear-gradient(180deg, #352638 0%, #231925 100%);
    color: #e2c77e;
    outline: none;
    text-decoration: none !important;
}

#back-to-top.is-visible,
#back-to-top.show,
#back-to-top.visible,
#back-to-top[data-visible="true"],
.back-to-top.is-visible,
.back-to-top.show,
.back-to-top.visible,
.back-to-top[data-visible="true"] {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

@media (max-width: 760px) {
    .forum-inline-edit-form .forum-rich-editor-toolbar {
        gap: 6px;
        padding: 8px;
    }

    .forum-inline-edit-form .forum-editor-tool-group {
        padding-right: 5px;
    }

    #back-to-top,
    .back-to-top {
        right: 14px;
        bottom: 14px;
        width: 42px;
        height: 42px;
        font-size: 20px;
    }
}

/* =========================================================
   BLACKTHORNE — BACK TO TOP BUTTON REDESIGN
   ========================================================= */
#back-to-top,
.back-to-top {
    right: 24px;
    bottom: 24px;
    width: 56px;
    height: 60px;
    padding: 0;
    border: 1px solid rgba(210, 174, 96, 0.72);
    border-radius: 14px;
    background:
        linear-gradient(180deg, #352438 0%, #201722 52%, #171119 100%);
    color: #d8b86c;
    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.46),
        inset 0 1px 0 rgba(255, 255, 255, 0.055),
        inset 0 0 16px rgba(95, 54, 102, 0.16);
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px) scale(0.96);
    cursor: pointer;
    overflow: hidden;
    transition:
        opacity 0.2s ease,
        visibility 0.2s ease,
        transform 0.2s ease,
        border-color 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;
}

#back-to-top::before,
.back-to-top::before {
    content: '';
    position: absolute;
    inset: 5px;
    border: 1px solid rgba(210, 174, 96, 0.18);
    border-radius: 10px;
    pointer-events: none;
}

#back-to-top::after,
.back-to-top::after {
    content: 'TOP';
    position: absolute;
    left: 50%;
    bottom: 8px;
    transform: translateX(-50%);
    color: rgba(222, 194, 128, 0.84);
    font-family: "Segoe UI", Arial, sans-serif;
    font-size: 8px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.18em;
    pointer-events: none;
}

/* Hide the plain text arrow and draw a cleaner arrow with CSS. */
#back-to-top > span,
.back-to-top > span {
    position: absolute;
    top: 14px;
    left: 50%;
    width: 16px;
    height: 18px;
    transform: translateX(-50%);
    font-size: 0;
    line-height: 0;
}

#back-to-top > span::before,
.back-to-top > span::before {
    content: '';
    position: absolute;
    top: 1px;
    left: 50%;
    width: 9px;
    height: 9px;
    border-top: 2px solid #dfbf72;
    border-left: 2px solid #dfbf72;
    transform: translateX(-50%) rotate(45deg);
}

#back-to-top > span::after,
.back-to-top > span::after {
    content: '';
    position: absolute;
    top: 5px;
    left: 50%;
    width: 2px;
    height: 13px;
    border-radius: 2px;
    background: #dfbf72;
    transform: translateX(-50%);
}

#back-to-top:hover,
#back-to-top:focus-visible,
.back-to-top:hover,
.back-to-top:focus-visible {
    border-color: #dfbf72;
    background:
        linear-gradient(180deg, #432b47 0%, #291d2c 52%, #1a131c 100%);
    box-shadow:
        0 14px 34px rgba(0, 0, 0, 0.52),
        0 0 18px rgba(210, 174, 96, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.075),
        inset 0 0 18px rgba(112, 62, 121, 0.2);
    transform: translateY(-2px) scale(1.02);
}

#back-to-top:hover::after,
#back-to-top:focus-visible::after,
.back-to-top:hover::after,
.back-to-top:focus-visible::after {
    color: #f0d693;
}

#back-to-top:hover > span::before,
#back-to-top:focus-visible > span::before,
#back-to-top:hover > span::after,
#back-to-top:focus-visible > span::after,
.back-to-top:hover > span::before,
.back-to-top:focus-visible > span::before,
.back-to-top:hover > span::after,
.back-to-top:focus-visible > span::after {
    border-color: #f0d693;
    background: #f0d693;
}

/* Prevent the background rule above from filling the chevron pseudo-element. */
#back-to-top:hover > span::before,
#back-to-top:focus-visible > span::before,
.back-to-top:hover > span::before,
.back-to-top:focus-visible > span::before {
    background: transparent;
}

#back-to-top:active,
.back-to-top:active {
    transform: translateY(0) scale(0.98);
}

#back-to-top.is-visible,
#back-to-top.show,
#back-to-top.visible,
#back-to-top[data-visible="true"],
.back-to-top.is-visible,
.back-to-top.show,
.back-to-top.visible,
.back-to-top[data-visible="true"] {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

@media (max-width: 767px) {
    #back-to-top,
    .back-to-top {
        right: 14px;
        bottom: 14px;
        width: 52px;
        height: 56px;
        border-radius: 13px;
    }

    #back-to-top::before,
    .back-to-top::before {
        inset: 4px;
        border-radius: 9px;
    }

    #back-to-top::after,
    .back-to-top::after {
        bottom: 7px;
        font-size: 7px;
    }

    #back-to-top > span,
    .back-to-top > span {
        top: 12px;
    }
}

/* =========================================================
   BLACKTHORNE — BACK TO TOP SVG BUTTON FINAL OVERRIDE
   ========================================================= */
#back-to-top,
.back-to-top {
    right: 22px;
    bottom: 22px;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 1px solid rgba(196, 161, 90, 0.55);
    border-radius: 12px;
    background: #211823;
    color: #d6b56a;
    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.035);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    overflow: visible;
    transition:
        opacity 0.18s ease,
        visibility 0.18s ease,
        transform 0.18s ease,
        border-color 0.18s ease,
        background-color 0.18s ease,
        color 0.18s ease,
        box-shadow 0.18s ease;
}

/* Remove older decorative layers/labels. */
#back-to-top::before,
#back-to-top::after,
.back-to-top::before,
.back-to-top::after {
    content: none !important;
    display: none !important;
}

/* Remove styling intended for the old span-based arrow. */
#back-to-top > span,
.back-to-top > span,
#back-to-top > span::before,
#back-to-top > span::after,
.back-to-top > span::before,
.back-to-top > span::after {
    display: none !important;
    content: none !important;
}

#back-to-top .back-to-top-icon,
.back-to-top .back-to-top-icon {
    display: block;
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    pointer-events: none;
    transition: transform 0.18s ease;
}

#back-to-top:hover,
#back-to-top:focus-visible,
.back-to-top:hover,
.back-to-top:focus-visible {
    border-color: rgba(220, 187, 111, 0.9);
    background: #2a1d2d;
    color: #ebcf8a;
    box-shadow:
        0 10px 24px rgba(0, 0, 0, 0.4),
        0 0 0 2px rgba(196, 161, 90, 0.07),
        inset 0 1px 0 rgba(255, 255, 255, 0.045);
    transform: translateY(-2px);
    outline: none;
}

#back-to-top:hover .back-to-top-icon,
#back-to-top:focus-visible .back-to-top-icon,
.back-to-top:hover .back-to-top-icon,
.back-to-top:focus-visible .back-to-top-icon {
    transform: translateY(-2px);
}

#back-to-top:active,
.back-to-top:active {
    transform: translateY(0);
}

#back-to-top.is-visible,
#back-to-top.show,
#back-to-top.visible,
#back-to-top[data-visible="true"],
.back-to-top.is-visible,
.back-to-top.show,
.back-to-top.visible,
.back-to-top[data-visible="true"] {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

@media (max-width: 767px) {
    #back-to-top,
    .back-to-top {
        right: 14px;
        bottom: 14px;
        width: 44px;
        height: 44px;
        border-radius: 11px;
    }

    #back-to-top .back-to-top-icon,
    .back-to-top .back-to-top-icon {
        width: 22px;
        height: 22px;
    }
}


/* =========================================================
   BLACKTHORNE — FINAL TYPOGRAPHY WEIGHT OVERRIDES
   Titlebars, forum/board/sub-board names, and thread titles
   should never render bold.
   ========================================================= */

/* All titlebar heading text site-wide */
[class*="titlebar"] h1,
[class*="titlebar"] h2,
[class*="titlebar"] h3,
[class*="titlebar"] h4,
[class*="titlebar"] h5,
[class*="titlebar"] h6,
[class*="titlebar"] a,
.sidebar-titlebar h1,
.sidebar-titlebar h2,
.sidebar-titlebar h3,
.member-content-titlebar h1,
.member-content-titlebar h2,
.member-content-titlebar h3,
.forum-admin-titlebar h1,
.forum-admin-titlebar h2,
.forum-admin-titlebar h3,
.forum-index-category-titlebar h2,
.forum-board-section-titlebar h2,
.forum-thread-title-copy h1,
.forum-thread-reply > .forum-board-section-titlebar h2 {
    font-weight: 400 !important;
}

/* Main forum/category/board/sub-board names */
.forum-index-category-titlebar h2,
.forum-index-category-titlebar h2 a,
.forum-index-board-copy h3,
.forum-index-board-copy h3 a,
.forum-index-board-copy h3 a:visited,
.forum-subboard-copy h3,
.forum-subboard-copy h3 a,
.forum-subboard-copy h3 a:visited,
.forum-board-heading-row h1,
.forum-board-heading-row h1 a,
.forum-board-heading h1,
.forum-board-heading h1 a {
    font-weight: 400 !important;
}

/* Thread titles in board listings and on thread pages */
.forum-thread-copy h3,
.forum-thread-copy h3 a,
.forum-thread-copy h3 a:visited,
.forum-thread-title-copy h1,
.forum-thread-title-copy h1 a {
    font-weight: 400 !important;
}

/* Forum/sidebar forum-name links should inherit the same normal weight */
.forum-index-subboard-links a,
.forum-index-board-meta-strip .forum-index-subboard-links a,
.sidebar-forum-link,
.sidebar-forum-link a,
.sidebar-subforum-link,
.sidebar-subforum-link a {
    font-weight: 400 !important;
}


/* =========================================================
   FORUM THREAD STATUS GROUP SPACING
   Adds a subtle break between Announcement, Sticky,
   and normal/locked thread groups.
   ========================================================= */

/* Announcement -> Sticky */
.forum-thread-row.is-announcement
+ .forum-thread-row.is-pinned:not(.is-announcement),

/* Announcement -> Normal/Locked when there are no sticky threads */
.forum-thread-row.is-announcement
+ .forum-thread-row:not(.is-announcement):not(.is-pinned),

/* Sticky -> Normal/Locked */
.forum-thread-row.is-pinned:not(.is-announcement)
+ .forum-thread-row:not(.is-announcement):not(.is-pinned) {
    margin-top: 10px;
    border-top: 1px solid rgba(196, 161, 90, 0.20);
}

/*
 * Remove the normal adjacent-row border where the intentional
 * group spacer is being used.
 */
.forum-thread-row.is-announcement
+ .forum-thread-row.is-pinned:not(.is-announcement),

.forum-thread-row.is-announcement
+ .forum-thread-row:not(.is-announcement):not(.is-pinned),

.forum-thread-row.is-pinned:not(.is-announcement)
+ .forum-thread-row:not(.is-announcement):not(.is-pinned) {
    box-shadow: 0 -10px 0 rgba(8, 6, 10, 0.72);
}

@media (max-width: 767px) {
    .forum-thread-row.is-announcement
    + .forum-thread-row.is-pinned:not(.is-announcement),

    .forum-thread-row.is-announcement
    + .forum-thread-row:not(.is-announcement):not(.is-pinned),

    .forum-thread-row.is-pinned:not(.is-announcement)
    + .forum-thread-row:not(.is-announcement):not(.is-pinned) {
        margin-top: 7px;
        box-shadow: 0 -7px 0 rgba(8, 6, 10, 0.72);
    }
}


/* =========================================================
   THREAD MODERATION MODAL — REFINED BLACKTHORNE STYLING
   Compact desktop layout, smaller controls, no unnecessary
   internal scrollbar, and styling consistent with the forum UI.
   ========================================================= */

.forum-thread-moderation-modal {
    width: min(760px, calc(100vw - 40px));
    max-height: none;
    overflow: visible;
    border: 1px solid rgba(126, 86, 120, 0.46);
    border-radius: 10px;
    background: #0f0811;
    box-shadow:
        0 26px 70px rgba(0, 0, 0, 0.58),
        0 0 0 1px rgba(196, 161, 90, 0.03);
}

.forum-thread-moderation-modal .forum-admin-modal-titlebar {
    position: relative;
    top: auto;
    min-height: 66px;
    padding: 13px 18px;
    border-bottom: 1px solid rgba(126, 86, 120, 0.34);
    background:
        linear-gradient(
            180deg,
            rgba(38, 19, 43, 0.98) 0%,
            rgba(29, 14, 34, 0.98) 100%
        );
}

.forum-thread-moderation-modal .forum-admin-modal-titlebar > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.forum-thread-moderation-modal .forum-admin-step {
    margin: 0;
    color: var(--color-gold, #c4a15a);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.14em;
    line-height: 1.1;
    text-transform: uppercase;
}

.forum-thread-moderation-modal .forum-admin-modal-titlebar h2 {
    margin: 0;
    color: var(--color-text, #f1eaf0);
    font-size: 21px;
    font-weight: 400 !important;
    letter-spacing: 0.01em;
    line-height: 1.2;
}

.forum-thread-moderation-modal .forum-admin-modal-close {
    width: 32px;
    height: 32px;
    border-color: rgba(196, 161, 90, 0.28);
    background: rgba(255, 255, 255, 0.018);
}

.forum-thread-moderation-modal .forum-admin-modal-close svg {
    width: 15px;
    height: 15px;
}

.forum-thread-moderation-modal .forum-thread-moderation-form {
    padding: 16px 18px 18px;
}

.forum-thread-moderation-modal .forum-report-intro {
    margin: 0 0 14px;
    color: var(--color-text-muted, #bcaebb);
    font-size: 13px;
    line-height: 1.45;
}

.forum-thread-moderation-modal .forum-report-intro strong {
    color: var(--color-text, #f1eaf0);
    font-weight: 400;
}

/*
 * Compact two-column desktop layout keeps the entire moderation
 * panel visible without an internal scrollbar in normal use.
 */
.forum-thread-moderation-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    align-items: start;
}

.forum-thread-moderation-section {
    margin: 0;
    padding: 13px 14px;
    border: 1px solid rgba(126, 86, 120, 0.28);
    border-radius: 7px;
    background:
        linear-gradient(
            180deg,
            rgba(35, 17, 39, 0.52) 0%,
            rgba(19, 10, 22, 0.72) 100%
        );
}

.forum-thread-moderation-section h3 {
    margin: 0 0 10px;
    color: var(--color-gold-light, #d8bb77);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.04em;
    line-height: 1.2;
}

.forum-thread-moderation-section p {
    margin: 0 0 10px;
    color: var(--color-text-muted, #bcaebb);
    font-size: 12px;
    line-height: 1.45;
}

.forum-thread-moderation-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    align-items: center;
}

.forum-thread-moderation-actions form {
    margin: 0;
}

/*
 * Moderation buttons should feel like compact forum controls,
 * not large form submission buttons.
 */
.forum-thread-moderation-modal .button,
.forum-thread-moderation-modal button.button {
    min-width: 0;
    min-height: 32px;
    padding: 7px 11px;
    border-radius: 5px;
    border: 1px solid rgba(196, 161, 90, 0.28);
    background: rgba(45, 27, 48, 0.74);
    color: var(--color-text, #f1eaf0);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.1;
    box-shadow: none;
}

.forum-thread-moderation-modal .button:hover,
.forum-thread-moderation-modal .button:focus-visible,
.forum-thread-moderation-modal button.button:hover,
.forum-thread-moderation-modal button.button:focus-visible {
    border-color: rgba(216, 187, 119, 0.62);
    background: rgba(62, 38, 66, 0.86);
    color: #fff5dc;
    transform: none;
}

/* Labels */
.forum-thread-moderation-label-form {
    display: grid;
    gap: 10px;
}

.forum-thread-label-choice-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
}

.forum-thread-label-choice {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    color: var(--color-text-muted, #bcaebb);
    font-size: 12px;
    line-height: 1.2;
    cursor: pointer;
}

.forum-thread-label-choice input {
    width: 13px;
    height: 13px;
    margin: 0;
    accent-color: var(--color-gold, #c4a15a);
}

.forum-thread-label-dot {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-radius: 50%;
    background: var(--thread-label-color, #c4a15a);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.10);
}

/* Move Thread */
.forum-thread-moderation-move-form {
    display: grid;
    gap: 8px;
}

.forum-thread-moderation-move-form label {
    margin: 0;
    color: var(--color-text-muted, #bcaebb);
    font-size: 11px;
    font-weight: 500;
}

.forum-thread-moderation-move-form .form-control,
.forum-thread-moderation-move-form select {
    width: 100%;
    min-height: 34px;
    padding: 6px 30px 6px 9px;
    border: 1px solid rgba(126, 86, 120, 0.42);
    border-radius: 5px;
    background: #120a15;
    color: var(--color-text, #f1eaf0);
    font-size: 12px;
}

/* Danger zone remains distinct without becoming visually loud. */
.forum-thread-moderation-danger {
    border-color: rgba(151, 69, 79, 0.30);
    background:
        linear-gradient(
            180deg,
            rgba(65, 24, 31, 0.16) 0%,
            rgba(24, 11, 15, 0.34) 100%
        );
}

.forum-thread-moderation-danger h3 {
    color: #d7a8ad;
}

.forum-thread-moderation-modal .forum-thread-danger-button {
    border-color: rgba(170, 79, 89, 0.44);
    background: rgba(86, 34, 42, 0.42);
    color: #ead5d8;
}

.forum-thread-moderation-modal .forum-thread-danger-button:hover,
.forum-thread-moderation-modal .forum-thread-danger-button:focus-visible {
    border-color: rgba(202, 99, 111, 0.66);
    background: rgba(103, 42, 51, 0.62);
    color: #fff0f2;
}

/*
 * When only one section exists in the final row, let it use the
 * available width instead of looking stranded.
 */
.forum-thread-moderation-section:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

/*
 * Small screens may legitimately need page-height scrolling;
 * keep that behavior only where viewport space is limited.
 */
@media (max-width: 700px), (max-height: 620px) {
    .forum-thread-moderation-modal {
        width: min(94vw, 760px);
        max-height: calc(100vh - 24px);
        overflow-y: auto;
    }

    .forum-thread-moderation-grid {
        grid-template-columns: 1fr;
    }

    .forum-thread-moderation-section:last-child:nth-child(odd) {
        grid-column: auto;
    }
}

@media (max-width: 520px) {
    .forum-thread-moderation-modal .forum-admin-modal-titlebar {
        min-height: 60px;
        padding: 11px 13px;
    }

    .forum-thread-moderation-modal .forum-admin-modal-titlebar h2 {
        font-size: 18px;
    }

    .forum-thread-moderation-modal .forum-thread-moderation-form {
        padding: 13px;
    }

    .forum-thread-moderation-section {
        padding: 11px;
    }
}


/* =========================================================
   NAVIGATION NOTIFICATION BELL + POPOVER
   ========================================================= */

.nav-action:has(
    [data-notification-popover="notifications"]
) {
    z-index: 1250;
}

.nav-action:has(
    [data-notification-popover="notifications"]
) .nav-account-icon {
    border-radius: 8px;
}

.nav-action:has(
    [data-notification-popover="notifications"]
) .nav-account-icon:hover,
.nav-action:has(
    [data-notification-popover="notifications"]
) .nav-account-icon:focus-visible {
    background: rgba(58, 34, 63, 0.58);
    color: var(--color-gold-light, #d8bb77);
}

/* Bell badge */
.nav-notification-badge[
    data-notification-badge="notifications"
] {
    top: -3px;
    right: -5px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border: 2px solid #120918;
    border-radius: 999px;
    background: var(--color-gold-light, #d8bb77);
    color: #170c1a;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1;
    box-shadow: 0 2px 7px rgba(0, 0, 0, 0.42);
}

/* Rich notification dropdown */
.nav-notification-popover-rich {
    top: calc(100% + 12px);
    right: -8px;
    width: min(390px, calc(100vw - 28px));
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(126, 86, 120, 0.46);
    border-radius: 9px;
    background: #0f0811;
    box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.56),
        0 0 0 1px rgba(196, 161, 90, 0.025);
}

/* Small pointer toward the bell */
.nav-notification-popover-rich::before {
    content: '';
    position: absolute;
    top: -7px;
    right: 19px;
    width: 12px;
    height: 12px;
    border-top: 1px solid rgba(126, 86, 120, 0.46);
    border-left: 1px solid rgba(126, 86, 120, 0.46);
    background: #211025;
    transform: rotate(45deg);
}

/* Dropdown header */
.nav-notification-popover-heading {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 46px;
    padding: 11px 14px;
    border-bottom: 1px solid rgba(126, 86, 120, 0.30);
    background:
        linear-gradient(
            180deg,
            rgba(38, 19, 43, 0.98) 0%,
            rgba(29, 14, 34, 0.98) 100%
        );
    color: var(--color-text, #f1eaf0);
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.01em;
}

.nav-notification-popover-count {
    color: var(--color-gold-light, #d8bb77);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

/* List */
.nav-notification-list {
    max-height: 410px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color:
        rgba(126, 86, 120, 0.60)
        rgba(15, 8, 17, 0.92);
}

.nav-notification-list::-webkit-scrollbar {
    width: 8px;
}

.nav-notification-list::-webkit-scrollbar-track {
    background: rgba(15, 8, 17, 0.92);
}

.nav-notification-list::-webkit-scrollbar-thumb {
    border: 2px solid rgba(15, 8, 17, 0.92);
    border-radius: 999px;
    background: rgba(126, 86, 120, 0.58);
}

/* Individual notification */
.nav-notification-item {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(126, 86, 120, 0.20);
    background: rgba(20, 10, 23, 0.82);
    color: var(--color-text, #f1eaf0);
    text-decoration: none !important;
    transition:
        background 0.16s ease,
        border-color 0.16s ease;
}

.nav-notification-item:last-child {
    border-bottom: 0;
}

.nav-notification-item:hover,
.nav-notification-item:focus-visible {
    background: rgba(48, 26, 53, 0.82);
    color: var(--color-text, #f1eaf0);
    text-decoration: none !important;
    outline: none;
}

/* Moderation/report notification gets a subtle left accent */
.nav-notification-item.is-moderation-report {
    padding-left: 17px;
}

.nav-notification-item.is-moderation-report::before {
    content: '';
    position: absolute;
    top: 10px;
    bottom: 10px;
    left: 0;
    width: 3px;
    border-radius: 0 2px 2px 0;
    background: var(--color-gold, #c4a15a);
    opacity: 0.88;
}

.nav-notification-item-type {
    color: var(--color-gold-light, #d8bb77);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.14em;
    line-height: 1.1;
    text-transform: uppercase;
}

.nav-notification-item-title {
    color: var(--color-text, #f1eaf0);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.3;
}

.nav-notification-item-meta,
.nav-notification-item-message {
    color: var(--color-text-muted, #bcaebb);
    font-size: 11px;
    font-weight: 400;
    line-height: 1.4;
}

.nav-notification-item-meta strong {
    color: #d5c7d2;
    font-weight: 500;
}

.nav-notification-item-link-hint {
    margin-top: 2px;
    color: var(--color-gold-light, #d8bb77);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.02em;
}

.nav-notification-item:hover
.nav-notification-item-link-hint,
.nav-notification-item:focus-visible
.nav-notification-item-link-hint {
    color: #ecd38f;
}

/* Empty state */
.nav-notification-empty {
    margin: 0;
    padding: 18px 15px;
    color: var(--color-text-muted, #bcaebb);
    font-size: 12px;
    line-height: 1.45;
    text-align: center;
}

/* Keep notification links un-underlined site-wide. */
.nav-notification-popover a,
.nav-notification-popover a:hover,
.nav-notification-popover a:focus-visible {
    text-decoration: none !important;
}

/* Mobile */
@media (max-width: 640px) {
    .nav-notification-popover-rich {
        position: fixed;
        top: var(--header-height, 72px);
        right: 10px;
        left: 10px;
        width: auto;
        max-width: none;
    }

    .nav-notification-popover-rich::before {
        display: none;
    }

    .nav-notification-list {
        max-height: min(420px, calc(100vh - 150px));
    }
}

/* ==========================================================================
   Blackthorne Academy
   Profile Editor
   ========================================================================== */

.profile-edit-page {
    min-height: 100vh;
    background:
        radial-gradient(
            circle at 18% 10%,
            rgba(90, 54, 103, 0.10),
            transparent 32rem
        ),
        linear-gradient(
            180deg,
            #100713 0%,
            #130918 55%,
            #0d060f 100%
        );
    color: #c8bec5;
}


/* --------------------------------------------------------------------------
   Page Heading
   -------------------------------------------------------------------------- */

.profile-edit-heading {
    position: relative;
    overflow: hidden;
    padding: 74px 0 58px;
    border-bottom: 1px solid rgba(196, 161, 90, 0.26);
    background:
        linear-gradient(
            180deg,
            rgba(27, 12, 34, 0.96),
            rgba(16, 7, 19, 0.96)
        );
}

.profile-edit-heading::before {
    content: "";
    position: absolute;
    inset: 12px;
    pointer-events: none;
    border: 1px solid rgba(196, 161, 90, 0.16);
}

.profile-edit-heading .section-inner {
    position: relative;
    z-index: 1;
}

.profile-edit-heading .academy-overline {
    margin-bottom: 11px;
}

.profile-edit-heading h1 {
    margin: 0;
    color: #dbc17d;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(38px, 5vw, 60px);
    font-weight: 400;
    line-height: 1.08;
    letter-spacing: -0.02em;
}

.profile-edit-heading p:last-child {
    max-width: 720px;
    margin: 18px 0 0;
    color: #b9acb7;
    font-size: 16px;
    line-height: 1.75;
}


/* --------------------------------------------------------------------------
   Main Content
   -------------------------------------------------------------------------- */

.profile-edit-content {
    padding: 58px 0 90px;
}

.profile-edit-form {
    display: grid;
    gap: 26px;
}

.profile-edit-panel {
    position: relative;
    padding: 34px;
    border: 1px solid rgba(111, 91, 51, 0.72);
    border-radius: 4px;
    background:
        linear-gradient(
            180deg,
            rgba(31, 15, 39, 0.96),
            rgba(23, 11, 29, 0.96)
        );
    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.015);
}

.profile-edit-panel::before {
    content: "";
    position: absolute;
    inset: 7px;
    pointer-events: none;
    border: 1px solid rgba(196, 161, 90, 0.07);
    border-radius: 2px;
}

.profile-edit-panel > * {
    position: relative;
    z-index: 1;
}

.profile-edit-panel-heading {
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(196, 161, 90, 0.16);
}

.profile-edit-panel-heading .academy-overline {
    margin-bottom: 8px;
}

.profile-edit-panel-heading h2 {
    margin: 0;
    color: #e3cf97;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(27px, 3vw, 36px);
    font-weight: 400;
    line-height: 1.2;
}

.profile-edit-panel-heading > p:last-child {
    max-width: 760px;
    margin: 12px 0 0;
    color: #a99ca7;
    font-size: 14px;
    line-height: 1.7;
}


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

.profile-edit-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 24px;
}

.profile-edit-page .form-group {
    min-width: 0;
}

.profile-edit-page .form-group-full {
    grid-column: 1 / -1;
}

.profile-edit-page .form-group label,
.profile-privacy-options legend {
    display: block;
    margin-bottom: 8px;
    color: #d9c98f;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.035em;
}

.profile-edit-page .form-control {
    width: 100%;
    min-height: 46px;
    padding: 11px 13px;
    border: 1px solid #493451;
    border-radius: 3px;
    outline: 0;
    background: #100713;
    color: #e9e0e8;
    font: inherit;
    line-height: 1.45;
    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        background 0.18s ease;
}

.profile-edit-page textarea.form-control {
    min-height: 150px;
    resize: vertical;
}

.profile-edit-page select.form-control {
    cursor: pointer;
}

.profile-edit-page .form-control::placeholder {
    color: #756875;
}

.profile-edit-page .form-control:focus {
    border-color: #a6874e;
    background: #130917;
    box-shadow:
        0 0 0 3px rgba(196, 161, 90, 0.10);
}

.profile-edit-page .form-control[readonly] {
    cursor: not-allowed;
    border-color: #35263b;
    background: #160c19;
    color: #897d88;
}

.profile-edit-page input[type="file"].form-control {
    padding: 8px 10px;
}

.profile-edit-page input[type="file"]::file-selector-button {
    margin-right: 12px;
    padding: 8px 12px;
    border: 1px solid #725f37;
    border-radius: 2px;
    background: #24172b;
    color: #d9c98f;
    cursor: pointer;
    font: inherit;
    transition:
        background 0.18s ease,
        border-color 0.18s ease;
}

.profile-edit-page input[type="file"]::file-selector-button:hover {
    border-color: #a6874e;
    background: #302039;
}

.profile-edit-page .form-help {
    margin: 8px 0 0;
    color: #887b87;
    font-size: 12px;
    line-height: 1.55;
}


/* --------------------------------------------------------------------------
   Notices
   -------------------------------------------------------------------------- */

.profile-edit-page .form-notice {
    margin-bottom: 26px;
    padding: 16px 18px;
    border-radius: 3px;
    font-size: 14px;
    line-height: 1.65;
}

.profile-edit-page .form-notice p {
    margin-top: 0;
}

.profile-edit-page .form-notice p:last-child,
.profile-edit-page .form-notice ul:last-child {
    margin-bottom: 0;
}

.profile-edit-page .form-notice-success {
    border: 1px solid rgba(122, 157, 114, 0.48);
    background: rgba(67, 101, 63, 0.18);
    color: #c9ddc4;
}

.profile-edit-page .form-notice-error {
    border: 1px solid rgba(164, 83, 91, 0.52);
    background: rgba(105, 47, 55, 0.18);
    color: #e1bec2;
}

.profile-edit-page .form-notice-error ul {
    margin-top: 8px;
    padding-left: 22px;
}


/* --------------------------------------------------------------------------
   Avatar Editor
   -------------------------------------------------------------------------- */

.profile-image-editor {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 32px;
    align-items: start;
}

.profile-image-preview {
    display: grid;
    place-items: center;
}

.profile-avatar-preview {
    width: 160px;
    height: 160px;
    overflow: hidden;
    border: 3px solid #c4a15a;
    border-radius: 50%;
    background:
        radial-gradient(
            circle at 35% 30%,
            #432d4b,
            #1a0d20 72%
        );
    box-shadow:
        0 0 0 6px #160b1b,
        0 0 0 7px rgba(196, 161, 90, 0.26),
        0 18px 35px rgba(0, 0, 0, 0.28);
}

.profile-avatar-preview img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-avatar-fallback {
    display: grid;
    width: 100%;
    height: 100%;
    place-items: center;
    color: #dbc17d;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 62px;
    line-height: 1;
}

.profile-image-controls {
    display: grid;
    gap: 18px;
}

.profile-image-or {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 12px;
    align-items: center;
    color: #756875;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.profile-image-or::before,
.profile-image-or::after {
    content: "";
    height: 1px;
    background: rgba(196, 161, 90, 0.14);
}


/* --------------------------------------------------------------------------
   Cover Editor
   -------------------------------------------------------------------------- */

.profile-cover-preview {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 1;
    min-height: 180px;
    max-height: 310px;
    overflow: hidden;
    margin-bottom: 28px;
    border: 1px solid #6f5b33;
    border-radius: 3px;
    background: #100713;
    box-shadow:
        inset 0 0 0 6px rgba(16, 7, 19, 0.46),
        0 12px 32px rgba(0, 0, 0, 0.20);
}

.profile-cover-preview::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(
            180deg,
            rgba(16, 7, 19, 0.05),
            rgba(16, 7, 19, 0.32)
        );
}

.profile-cover-preview img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.profile-cover-fallback {
    display: grid;
    width: 100%;
    height: 100%;
    min-height: 180px;
    place-items: center;
    background:
        radial-gradient(
            circle at 70% 30%,
            rgba(102, 63, 111, 0.28),
            transparent 34%
        ),
        radial-gradient(
            circle at 26% 70%,
            rgba(111, 91, 51, 0.16),
            transparent 31%
        ),
        linear-gradient(
            135deg,
            #24132d,
            #110814 58%,
            #1a0d20
        );
}

.profile-cover-fallback span {
    position: relative;
    z-index: 1;
    color: rgba(219, 193, 125, 0.72);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(20px, 3vw, 34px);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.profile-cover-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

.profile-cover-controls .profile-image-or {
    display: block;
    padding-top: 37px;
}

.profile-cover-controls .profile-image-or::before,
.profile-cover-controls .profile-image-or::after {
    display: none;
}


/* --------------------------------------------------------------------------
   Checkboxes / Privacy
   -------------------------------------------------------------------------- */

.profile-checkbox {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    cursor: pointer;
    color: #c8bec5;
    font-size: 14px;
    line-height: 1.5;
}

.profile-checkbox input[type="checkbox"] {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
    margin: 2px 0 0;
    accent-color: #c4a15a;
    cursor: pointer;
}

.profile-remove-image {
    width: fit-content;
    color: #bbaeb9;
}

.profile-privacy-options {
    margin: 28px 0 0;
    padding: 24px;
    border: 1px solid rgba(73, 52, 81, 0.88);
    border-radius: 3px;
    background: rgba(16, 7, 19, 0.56);
}

.profile-privacy-options legend {
    padding: 0 8px;
}

.profile-privacy-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 26px;
}

.profile-privacy-grid .profile-checkbox {
    padding: 11px 12px;
    border: 1px solid rgba(73, 52, 81, 0.42);
    border-radius: 3px;
    background: rgba(34, 18, 41, 0.48);
    transition:
        border-color 0.18s ease,
        background 0.18s ease;
}

.profile-privacy-grid .profile-checkbox:hover {
    border-color: rgba(196, 161, 90, 0.34);
    background: rgba(42, 23, 50, 0.68);
}

.profile-privacy-note {
    margin-top: 22px;
    padding: 17px 18px;
    border-left: 3px solid #8f7441;
    background: rgba(111, 91, 51, 0.09);
}

.profile-privacy-note strong {
    display: block;
    margin-bottom: 5px;
    color: #d8c68e;
    font-size: 13px;
}

.profile-privacy-note p {
    margin: 0;
    color: #948793;
    font-size: 13px;
    line-height: 1.65;
}


/* --------------------------------------------------------------------------
   Actions
   -------------------------------------------------------------------------- */

.profile-edit-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: flex-end;
    padding-top: 6px;
}

.profile-edit-actions .button {
    min-width: 150px;
    text-align: center;
}


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

@media (max-width: 820px) {

    .profile-edit-heading {
        padding: 62px 0 46px;
    }

    .profile-edit-content {
        padding: 44px 0 72px;
    }

    .profile-edit-panel {
        padding: 28px 24px;
    }

    .profile-edit-fields,
    .profile-privacy-grid {
        grid-template-columns: 1fr;
    }

    .profile-image-editor {
        grid-template-columns: 1fr;
    }

    .profile-avatar-preview {
        margin-inline: auto;
    }

    .profile-cover-controls {
        grid-template-columns: 1fr;
    }

    .profile-cover-controls .profile-image-or {
        display: grid;
        padding-top: 0;
    }

    .profile-cover-controls .profile-image-or::before,
    .profile-cover-controls .profile-image-or::after {
        display: block;
    }

}


@media (max-width: 560px) {

    .profile-edit-heading {
        padding: 52px 0 40px;
    }

    .profile-edit-heading::before {
        inset: 8px;
    }

    .profile-edit-heading h1 {
        font-size: clamp(34px, 11vw, 46px);
    }

    .profile-edit-content {
        padding: 34px 0 60px;
    }

    .profile-edit-panel {
        padding: 24px 18px;
    }

    .profile-edit-panel::before {
        inset: 5px;
    }

    .profile-edit-panel-heading {
        margin-bottom: 23px;
    }

    .profile-edit-panel-heading h2 {
        font-size: 28px;
    }

    .profile-avatar-preview {
        width: 138px;
        height: 138px;
    }

    .profile-avatar-fallback {
        font-size: 52px;
    }

    .profile-cover-preview {
        aspect-ratio: 16 / 7;
        min-height: 150px;
    }

    .profile-cover-fallback {
        min-height: 150px;
    }

    .profile-privacy-options {
        padding: 18px 14px;
    }

    .profile-edit-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .profile-edit-actions .button {
        width: 100%;
    }

}

/* ==========================================================================
   Blackthorne Academy
   Member Profile Page
   ========================================================================== */

.member-profile-page {
    min-height: 100vh;
    background:
        radial-gradient(
            circle at 15% 5%,
            rgba(78, 43, 91, 0.12),
            transparent 34rem
        ),
        linear-gradient(
            180deg,
            #100713 0%,
            #120817 46%,
            #0d060f 100%
        );
    color: var(--color-text);
}


/* --------------------------------------------------------------------------
   Profile Error / Restricted State
   -------------------------------------------------------------------------- */

.member-profile-error {
    padding: 90px 0 110px;
}

.member-profile-error .section-inner {
    max-width: 760px;
}

.member-profile-error h1 {
    margin: 0 0 18px;
    color: var(--color-gold-light);
    font-size: clamp(38px, 5vw, 58px);
    line-height: 1.08;
}

.member-profile-error p {
    max-width: 640px;
    margin: 0 0 24px;
    color: var(--color-text-muted);
}


/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.member-profile-hero {
    position: relative;
    min-height: 410px;
    overflow: visible;
    border-bottom:
        1px solid
        rgba(196, 161, 90, 0.28);
    background:
        radial-gradient(
            circle at 18% 24%,
            rgba(112, 66, 125, 0.28),
            transparent 28rem
        ),
        linear-gradient(
            135deg,
            #2a1532 0%,
            #190c20 48%,
            #0f0712 100%
        );
}

.member-profile-hero.has-cover-image {
    background: #100713;
}

.member-profile-cover {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.member-profile-cover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.member-profile-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(
            90deg,
            rgba(10, 5, 12, 0.88) 0%,
            rgba(12, 6, 15, 0.68) 42%,
            rgba(12, 6, 15, 0.36) 74%,
            rgba(12, 6, 15, 0.52) 100%
        ),
        linear-gradient(
            180deg,
            rgba(8, 4, 10, 0.14) 0%,
            rgba(8, 4, 10, 0.34) 58%,
            rgba(8, 4, 10, 0.82) 100%
        );
}

.member-profile-hero-inner {
    position: relative;
    z-index: 2;
    min-height: 410px;
    display: flex;
    align-items: flex-end;
}

.member-profile-identity {
    width: 100%;
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr) auto;
    gap: 28px;
    align-items: end;
    padding: 76px 0 34px;
}


/* --------------------------------------------------------------------------
   Profile Avatar
   -------------------------------------------------------------------------- */

.member-profile-avatar {
    position: relative;
    width: 180px;
    height: 180px;
    flex: 0 0 auto;
    overflow: visible;
    border-radius: 50%;
    background:
        radial-gradient(
            circle at 35% 30%,
            #432d4b,
            #1a0d20 72%
        );
    box-shadow:
        0 0 0 5px #120817,
        0 0 0 7px rgba(196, 161, 90, 0.82),
        0 20px 46px rgba(0, 0, 0, 0.44);
}

.member-profile-avatar picture,
.member-profile-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.member-profile-avatar img {
    object-fit: cover;
    object-position: center;
}

.member-profile-avatar-fallback {
    display: grid;
    width: 100%;
    height: 100%;
    place-items: center;
    border-radius: 50%;
    color: var(--color-gold-light);
    font-family:
        Georgia,
        "Times New Roman",
        serif;
    font-size: 70px;
    line-height: 1;
}

.member-profile-online-dot {
    position: absolute;
    right: 8px;
    bottom: 16px;
    width: 24px;
    height: 24px;
    border:
        4px solid
        #120817;
    border-radius: 50%;
    background: #79bf79;
    box-shadow:
        0 0 0 2px
        rgba(121, 191, 121, 0.16);
}


/* --------------------------------------------------------------------------
   Hero Identity Copy
   -------------------------------------------------------------------------- */

.member-profile-hero-copy {
    min-width: 0;
    padding-bottom: 4px;
}

.member-profile-hero-copy .academy-overline {
    margin-bottom: 8px;
}

.member-profile-hero-copy h1 {
    margin: 0;
    color: #f6edf4;
    font-family:
        Georgia,
        "Times New Roman",
        serif;
    font-size: clamp(40px, 5vw, 64px);
    font-weight: 400;
    line-height: 1.02;
    letter-spacing: -0.025em;
    text-shadow:
        0 3px 16px
        rgba(0, 0, 0, 0.52);
}

.member-profile-username {
    margin: 10px 0 0;
    color: #d1c3cf;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.025em;
}

.member-profile-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
}

.member-profile-role-badge,
.member-profile-meta-item {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.035em;
}

.member-profile-role-badge {
    --profile-role-color: var(--color-gold);
    border:
        1px solid
        color-mix(
            in srgb,
            var(--profile-role-color) 62%,
            transparent
        );
    background:
        color-mix(
            in srgb,
            var(--profile-role-color) 18%,
            rgba(17, 8, 21, 0.92)
        );
    color:
        color-mix(
            in srgb,
            var(--profile-role-color) 78%,
            white
        );
}

@supports not (color: color-mix(in srgb, white, black)) {
    .member-profile-role-badge {
        border-color: rgba(196, 161, 90, 0.52);
        background: rgba(196, 161, 90, 0.14);
        color: var(--color-gold-light);
    }
}

.member-profile-meta-item {
    border:
        1px solid
        rgba(219, 193, 125, 0.24);
    background:
        rgba(16, 7, 19, 0.52);
    color: #d9c98f;
}

.member-profile-hero-actions {
    align-self: end;
    padding-bottom: 4px;
}

.member-profile-hero-actions .button {
    min-width: 138px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}


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

.member-profile-content {
    padding: 46px 0 90px;
}

.member-profile-grid {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 26px;
    align-items: start;
}

.member-profile-sidebar,
.member-profile-main {
    display: grid;
    gap: 22px;
}


/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */

.member-profile-card {
    position: relative;
    overflow: hidden;
    padding: 26px;
    border:
        1px solid
        rgba(111, 91, 51, 0.72);
    border-radius: 5px;
    background:
        linear-gradient(
            180deg,
            rgba(32, 15, 40, 0.96),
            rgba(22, 10, 28, 0.97)
        );
    box-shadow:
        0 18px 45px
        rgba(0, 0, 0, 0.18);
}

.member-profile-card::before {
    content: "";
    position: absolute;
    inset: 6px;
    pointer-events: none;
    border:
        1px solid
        rgba(196, 161, 90, 0.055);
    border-radius: 3px;
}

.member-profile-card > * {
    position: relative;
    z-index: 1;
}

.member-profile-card-large {
    padding: 30px 32px;
}

.member-profile-card-heading {
    margin-bottom: 22px;
    padding-bottom: 17px;
    border-bottom:
        1px solid
        rgba(196, 161, 90, 0.15);
}

.member-profile-card-heading .academy-overline {
    margin-bottom: 6px;
}

.member-profile-card-heading h2 {
    margin: 0;
    color: var(--color-gold-light);
    font-family:
        Georgia,
        "Times New Roman",
        serif;
    font-size: 25px;
    font-weight: 400;
    line-height: 1.18;
}

.member-profile-card-large
.member-profile-card-heading h2 {
    font-size: clamp(27px, 3vw, 34px);
}


/* --------------------------------------------------------------------------
   Member Detail List
   -------------------------------------------------------------------------- */

.member-profile-detail-list,
.member-profile-custom-fields {
    margin: 0;
}

.member-profile-detail-row,
.member-profile-custom-field {
    display: grid;
    gap: 5px;
    margin: 0;
    padding: 14px 0;
    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.055);
}

.member-profile-detail-row:first-child,
.member-profile-custom-field:first-child {
    padding-top: 0;
}

.member-profile-detail-row:last-child,
.member-profile-custom-field:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.member-profile-detail-row dt,
.member-profile-custom-field dt,
.member-profile-small-label {
    color: #8f7f8d;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
}

.member-profile-detail-row dd,
.member-profile-custom-field dd {
    margin: 0;
    color: #ddd2dc;
    font-size: 14px;
    line-height: 1.6;
}

.member-profile-custom-field dd a {
    color: var(--color-gold-light);
    text-decoration: none;
    overflow-wrap: anywhere;
}

.member-profile-custom-field dd a:hover,
.member-profile-custom-field dd a:focus-visible {
    color: #ecd993;
    text-decoration: none;
}


/* --------------------------------------------------------------------------
   Presence
   -------------------------------------------------------------------------- */

.member-profile-presence {
    display: grid;
    gap: 16px;
}

.member-profile-presence-row {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #d8ccd6;
    font-size: 14px;
    font-weight: 700;
}

.member-profile-presence-status {
    width: 10px;
    height: 10px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #766c75;
    box-shadow:
        0 0 0 3px
        rgba(118, 108, 117, 0.11);
}

.member-profile-presence-status.is-online {
    background: #79bf79;
    box-shadow:
        0 0 0 3px
        rgba(121, 191, 121, 0.13);
}

.member-profile-presence-copy {
    display: grid;
    gap: 4px;
}

.member-profile-presence-copy strong {
    color: #ddd1db;
    font-size: 14px;
    font-weight: 600;
}


/* --------------------------------------------------------------------------
   Activity Stats
   -------------------------------------------------------------------------- */

.member-profile-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.member-profile-stat {
    padding: 16px 10px;
    border:
        1px solid
        rgba(73, 52, 81, 0.72);
    border-radius: 4px;
    background:
        rgba(15, 7, 18, 0.48);
    text-align: center;
}

.member-profile-stat strong {
    display: block;
    color: var(--color-gold-light);
    font-family:
        Georgia,
        "Times New Roman",
        serif;
    font-size: 26px;
    font-weight: 400;
    line-height: 1;
}

.member-profile-stat span {
    display: block;
    margin-top: 7px;
    color: #998c98;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}


/* --------------------------------------------------------------------------
   Bio
   -------------------------------------------------------------------------- */

.member-profile-bio {
    color: #d7ccd5;
    font-size: 15px;
    line-height: 1.82;
}

.member-profile-empty {
    margin: 0;
    color: #928590;
    font-size: 14px;
    line-height: 1.7;
}


/* --------------------------------------------------------------------------
   Custom Profile Fields
   -------------------------------------------------------------------------- */

.member-profile-custom-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 30px;
}

.member-profile-custom-field {
    align-content: start;
}


/* --------------------------------------------------------------------------
   Achievements
   -------------------------------------------------------------------------- */

.member-profile-achievements {
    display: grid;
    grid-template-columns: repeat(
        2,
        minmax(0, 1fr)
    );
    gap: 14px;
}

.member-profile-achievement {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 13px;
    align-items: start;
    padding: 16px;
    border:
        1px solid
        rgba(73, 52, 81, 0.72);
    border-radius: 4px;
    background:
        rgba(16, 7, 19, 0.44);
}

.member-profile-achievement-mark {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border:
        1px solid
        rgba(196, 161, 90, 0.38);
    border-radius: 50%;
    background:
        rgba(196, 161, 90, 0.08);
    color: var(--color-gold-light);
    font-size: 18px;
}

.member-profile-achievement h3 {
    margin: 0;
    color: #ded1dc;
    font-family:
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
}

.member-profile-achievement p {
    margin: 6px 0 0;
    color: #91858f;
    font-size: 12px;
    line-height: 1.55;
}


/* --------------------------------------------------------------------------
   Tablet
   -------------------------------------------------------------------------- */

@media (max-width: 980px) {

    .member-profile-identity {
        grid-template-columns:
            160px
            minmax(0, 1fr);
    }

    .member-profile-avatar {
        width: 150px;
        height: 150px;
    }

    .member-profile-avatar-fallback {
        font-size: 58px;
    }

    .member-profile-hero-actions {
        grid-column: 2;
        align-self: start;
        padding-bottom: 0;
    }

    .member-profile-grid {
        grid-template-columns: 280px minmax(0, 1fr);
    }

    .member-profile-custom-fields,
    .member-profile-achievements {
        grid-template-columns: 1fr;
    }

}


/* --------------------------------------------------------------------------
   Mobile
   -------------------------------------------------------------------------- */

@media (max-width: 760px) {

    .member-profile-hero {
        min-height: 470px;
    }

    .member-profile-hero-inner {
        min-height: 470px;
    }

    .member-profile-hero-overlay {
        background:
            linear-gradient(
                180deg,
                rgba(8, 4, 10, 0.18) 0%,
                rgba(8, 4, 10, 0.56) 48%,
                rgba(8, 4, 10, 0.92) 100%
            );
    }

    .member-profile-identity {
        grid-template-columns: 1fr;
        gap: 16px;
        align-items: end;
        padding: 120px 0 28px;
    }

    .member-profile-avatar {
        width: 132px;
        height: 132px;
    }

    .member-profile-avatar-fallback {
        font-size: 50px;
    }

    .member-profile-hero-copy h1 {
        font-size: clamp(36px, 10vw, 48px);
    }

    .member-profile-hero-actions {
        grid-column: auto;
    }

    .member-profile-grid {
        grid-template-columns: 1fr;
    }

    .member-profile-sidebar {
        order: 2;
    }

    .member-profile-main {
        order: 1;
    }

    .member-profile-content {
        padding: 30px 0 68px;
    }

}


/* --------------------------------------------------------------------------
   Small Mobile
   -------------------------------------------------------------------------- */

@media (max-width: 520px) {

    .member-profile-hero {
        min-height: 440px;
    }

    .member-profile-hero-inner {
        min-height: 440px;
    }

    .member-profile-identity {
        padding-top: 104px;
    }

    .member-profile-avatar {
        width: 112px;
        height: 112px;
    }

    .member-profile-avatar-fallback {
        font-size: 42px;
    }

    .member-profile-online-dot {
        right: 2px;
        bottom: 7px;
        width: 20px;
        height: 20px;
    }

    .member-profile-hero-copy h1 {
        font-size: 36px;
    }

    .member-profile-card,
    .member-profile-card-large {
        padding: 22px 18px;
    }

    .member-profile-card::before {
        inset: 5px;
    }

    .member-profile-stats {
        gap: 9px;
    }

    .member-profile-achievement {
        grid-template-columns: 36px minmax(0, 1fr);
        padding: 14px;
    }

    .member-profile-achievement-mark {
        width: 34px;
        height: 34px;
    }

}

/* ================================================================
   BLACKTHORNE FINAL SITE RESTORATION OVERRIDES
================================================================ */

html,
body {
    min-height: 100%;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

body > main {
    flex: 1 0 auto;
    width: 100%;
}

.site-footer {
    margin-top: auto;
}

.sidebar-titlebar,
.member-content-titlebar,
.forum-admin-titlebar,
.forum-index-category-titlebar,
.forum-board-section-titlebar {
    background: #211027 !important;
    border-color: rgba(101, 68, 96, 0.28) !important;
    border-bottom-color: rgba(126, 86, 120, 0.34) !important;
}

.sidebar-link-list,
.sidebar-link-list ul,
.sidebar-link-list li,
.sidebar-forum-links,
.sidebar-forum-links ul,
.sidebar-forum-links li {
    list-style: none !important;
}

.sidebar-link-list a::before,
.sidebar-link-list li::before,
.sidebar-forum-main-link::before,
.sidebar-subforum-link::before,
.sidebar-forum-links li::before {
    content: none !important;
    display: none !important;
}

.sidebar-link-list a,
.sidebar-forum-main-link,
.sidebar-subforum-link,
.sidebar-forum-links a {
    color: var(--color-gold-light) !important;
    text-decoration: none !important;
}

.sidebar-link-list a:hover,
.sidebar-link-list a:focus-visible,
.sidebar-forum-main-link:hover,
.sidebar-forum-main-link:focus-visible,
.sidebar-subforum-link:hover,
.sidebar-subforum-link:focus-visible,
.sidebar-forum-links a:hover,
.sidebar-forum-links a:focus-visible {
    color: #f0dda6 !important;
    text-decoration: none !important;
}

.forum-index-page a:hover,
.forum-index-page a:focus-visible,
.forum-board-page a:hover,
.forum-board-page a:focus-visible,
.forum-thread-page a:hover,
.forum-thread-page a:focus-visible,
.member-home-page a:hover,
.member-home-page a:focus-visible,
.sidebar-panel a:hover,
.sidebar-panel a:focus-visible,
.announcement-entry a:hover,
.announcement-entry a:focus-visible {
    text-decoration: none !important;
}

/* ==========================================================================
   Blackthorne Academy
   Profile Hero — Match Homepage Hero Framing
   ========================================================================== */

.member-profile-hero {
    overflow: hidden;

    border-bottom:
        1px solid
        rgba(219, 193, 125, 0.18);

    background:
        #0d0710;
}

/*
 * Match the homepage hero's inset gold frame.
 */
.member-profile-hero::before {
    content: "";

    position: absolute;

    inset: 20px;

    z-index: 4;

    pointer-events: none;

    border:
        1px solid
        rgba(
            219,
            193,
            125,
            0.09
        );
}

/*
 * Subtle oversized academy watermark, matching the decorative treatment used
 * on the homepage without interfering with profile content.
 */
.member-profile-hero::after {
    content: "B";

    position: absolute;

    right: -55px;
    bottom: -165px;

    z-index: 1;

    pointer-events: none;

    color:
        rgba(
            219,
            193,
            125,
            0.025
        );

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 430px;
    font-weight: 700;

    line-height: 1;
}

.member-profile-cover {
    inset: 0;
}

/*
 * Give user cover images the same dark, cinematic Blackthorne treatment as
 * the homepage hero while leaving the member identity placement unchanged.
 */
.member-profile-hero-overlay {
    z-index: 2;

    background:
        linear-gradient(
            90deg,
            rgba(14, 7, 18, 0.91) 0%,
            rgba(20, 9, 25, 0.74) 31%,
            rgba(18, 8, 23, 0.50) 58%,
            rgba(12, 6, 16, 0.78) 100%
        ),
        linear-gradient(
            180deg,
            rgba(18, 9, 23, 0.20) 0%,
            rgba(10, 5, 14, 0.35) 54%,
            rgba(10, 5, 14, 0.70) 100%
        );
}

/*
 * Soft edge vignette gives the cover the same framed depth as the homepage.
 */
.member-profile-cover::after {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        radial-gradient(
            ellipse at center,
            rgba(9, 4, 12, 0.00) 34%,
            rgba(9, 4, 12, 0.18) 66%,
            rgba(9, 4, 12, 0.52) 100%
        );
}

.member-profile-hero-inner {
    z-index: 3;
}

@media (max-width: 760px) {

    .member-profile-hero::before {
        inset: 12px;
    }

    .member-profile-hero::after {
        right: -70px;
        bottom: -105px;

        font-size: 300px;
    }

    .member-profile-hero-overlay {
        background:
            linear-gradient(
                180deg,
                rgba(14, 7, 18, 0.34) 0%,
                rgba(14, 7, 18, 0.58) 46%,
                rgba(10, 5, 14, 0.88) 100%
            ),
            linear-gradient(
                90deg,
                rgba(14, 7, 18, 0.68) 0%,
                rgba(18, 8, 23, 0.34) 50%,
                rgba(12, 6, 16, 0.64) 100%
            );
    }

}

/* ==========================================================================
   Blackthorne Academy
   Profile Hero — Identity Vertical Spacing Refinement
   ========================================================================== */

@media (min-width: 761px) {

    .member-profile-identity {
        padding-top: 58px;
        padding-bottom: 68px;
    }

    .member-profile-hero-copy {
        padding-bottom: 7px;
    }

    .member-profile-hero-actions {
        padding-bottom: 10px;
    }

}

@media (min-width: 981px) {

    .member-profile-identity {
        gap: 30px;
    }

}

/* ==========================================================================
   Blackthorne Academy
   Profile Social Links + Academy Point Strip
   ========================================================================== */

.profile-social-edit-grid {
    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );
}

.member-profile-social-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.member-profile-social-link {
    display: inline-grid;
    width: 42px;
    height: 42px;
    place-items: center;

    border:
        1px solid
        rgba(196, 161, 90, 0.28);

    border-radius: 50%;

    background:
        rgba(15, 7, 18, 0.58);

    color:
        var(--color-gold-light);

    text-decoration: none;

    transition:
        transform var(--transition),
        border-color var(--transition),
        background-color var(--transition),
        color var(--transition);
}

.member-profile-social-link svg {
    display: block;
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.member-profile-social-link:hover,
.member-profile-social-link:focus-visible {
    transform: translateY(-2px);

    border-color:
        rgba(219, 193, 125, 0.62);

    background:
        rgba(196, 161, 90, 0.10);

    color:
        #f0dda6;

    text-decoration: none;
}

.member-profile-academy-points {
    display: grid;
    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 14px;
}

.member-profile-academy-point {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;

    min-height: 72px;

    padding:
        16px
        20px;

    border:
        1px solid
        rgba(111, 91, 51, 0.72);

    border-radius: 5px;

    background:
        linear-gradient(
            180deg,
            rgba(32, 15, 40, 0.96),
            rgba(22, 10, 28, 0.97)
        );

    box-shadow:
        0 14px 34px
        rgba(0, 0, 0, 0.15);
}

.member-profile-academy-point span {
    color: #9d8d9a;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 0.10em;
    text-transform: uppercase;
}

.member-profile-academy-point strong {
    color:
        var(--color-gold-light);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 27px;
    font-weight: 400;

    line-height: 1;
}

@media (max-width: 760px) {

    .profile-social-edit-grid {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 520px) {

    .member-profile-academy-points {
        grid-template-columns: 1fr;
    }

}

/* ==========================================================================
   Blackthorne Academy
   Member Custom Content Layouts
   ========================================================================== */

.user-custom-box,
.user-custom-banner,
.user-custom-panel,
.user-custom-columns,
.user-custom-column {
    box-sizing: border-box;
    max-width: 100%;
}

.user-custom-box,
.user-custom-panel {
    margin:
        14px
        0;
}

.user-custom-banner {
    margin:
        14px
        0;

    width: 100%;
}

.user-custom-columns {
    display: grid;
    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 16px;

    margin:
        16px
        0;

    width: 100%;
}

.user-custom-columns:has(
    > .user-custom-column:nth-child(3)
) {
    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );
}

.user-custom-column {
    min-width: 0;

    padding:
        14px;

    border:
        1px solid
        rgba(
            196,
            161,
            90,
            0.18
        );

    border-radius:
        8px;

    background:
        rgba(
            15,
            7,
            18,
            0.28
        );
}

.user-custom-column > :first-child,
.user-custom-box > :first-child,
.user-custom-banner > :first-child,
.user-custom-panel > :first-child {
    margin-top: 0;
}

.user-custom-column > :last-child,
.user-custom-box > :last-child,
.user-custom-banner > :last-child,
.user-custom-panel > :last-child {
    margin-bottom: 0;
}

/*
 * Editor-specific outlines so members can see the structure while editing.
 */
.forum-rich-editor-content .user-custom-columns {
    padding:
        8px;

    border:
        1px dashed
        rgba(
            196,
            161,
            90,
            0.30
        );

    border-radius:
        8px;
}

.forum-rich-editor-content .user-custom-column {
    min-height:
        72px;
}

/*
 * Custom widths should never force the surrounding profile or post to
 * overflow. Narrow layouts remain centered when users selected a smaller
 * width in the Custom Block builder.
 */
.member-profile-bio .user-custom-box,
.member-profile-bio .user-custom-banner,
.member-profile-bio .user-custom-panel,
.forum-rich-text .user-custom-box,
.forum-rich-text .user-custom-banner,
.forum-rich-text .user-custom-panel {
    overflow-wrap: anywhere;
}

/*
 * Collapse member-built columns gracefully on smaller screens.
 */
@media (max-width: 760px) {

    .user-custom-columns,
    .user-custom-columns:has(
        > .user-custom-column:nth-child(3)
    ) {
        grid-template-columns:
            1fr;
    }

    .user-custom-column {
        width: 100%;
    }

}

/* ==========================================================================
   Blackthorne Academy
   Custom Block Dialog / Form Styling
   ========================================================================== */

.profile-custom-block-dialog {
    width:
        min(
            760px,
            calc(100vw - 32px)
        );

    max-height:
        calc(100vh - 48px);

    padding:
        0;

    border:
        1px solid
        rgba(196, 161, 90, 0.38);

    border-radius:
        10px;

    background:
        linear-gradient(
            180deg,
            rgba(23, 10, 29, 0.99),
            rgba(13, 6, 17, 0.995)
        );

    color:
        #eee7ed;

    box-shadow:
        0 28px 80px
        rgba(0, 0, 0, 0.62);

    overflow:
        auto;
}

.profile-custom-block-dialog::backdrop {
    background:
        rgba(5, 2, 7, 0.78);

    backdrop-filter:
        blur(3px);
}

.profile-custom-block-form {
    padding:
        28px;
}

.profile-custom-block-heading {
    margin-bottom:
        24px;

    padding-bottom:
        20px;

    border-bottom:
        1px solid
        rgba(196, 161, 90, 0.18);
}

.profile-custom-block-heading h3 {
    margin:
        4px
        0
        8px;

    color:
        #f3edf2;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        26px;

    font-weight:
        400;
}

.profile-custom-block-heading p:last-child {
    margin:
        0;

    color:
        #b8abb5;

    line-height:
        1.65;
}

.profile-custom-block-grid {
    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap:
        18px;
}

.profile-custom-block-dialog .form-group {
    margin:
        0;
}

.profile-custom-block-dialog label {
    display:
        block;

    margin-bottom:
        8px;

    color:
        #d9ba6a;

    font-size:
        12px;

    font-weight:
        700;

    letter-spacing:
        0.05em;
}

.profile-custom-block-dialog .form-control,
.profile-custom-block-dialog select,
.profile-custom-block-dialog input[type="text"],
.profile-custom-block-dialog input[type="url"] {
    width:
        100%;

    min-height:
        44px;

    padding:
        10px
        12px;

    border:
        1px solid
        rgba(196, 161, 90, 0.28);

    border-radius:
        6px;

    background:
        #120918;

    color:
        #f1eaf0;

    font:
        inherit;

    outline:
        none;

    box-shadow:
        none;

    transition:
        border-color var(--transition),
        background-color var(--transition),
        box-shadow var(--transition);
}

.profile-custom-block-dialog .form-control:hover,
.profile-custom-block-dialog select:hover,
.profile-custom-block-dialog input[type="text"]:hover,
.profile-custom-block-dialog input[type="url"]:hover {
    border-color:
        rgba(219, 193, 125, 0.48);
}

.profile-custom-block-dialog .form-control:focus,
.profile-custom-block-dialog select:focus,
.profile-custom-block-dialog input[type="text"]:focus,
.profile-custom-block-dialog input[type="url"]:focus {
    border-color:
        rgba(219, 193, 125, 0.78);

    background:
        #170b1d;

    box-shadow:
        0 0 0 3px
        rgba(196, 161, 90, 0.10);
}

.profile-custom-block-dialog select {
    appearance:
        auto;

    cursor:
        pointer;
}

.profile-custom-block-dialog input[type="color"] {
    width:
        100%;

    height:
        44px;

    padding:
        5px;

    border:
        1px solid
        rgba(196, 161, 90, 0.28);

    border-radius:
        6px;

    background:
        #120918;

    cursor:
        pointer;
}

.profile-custom-block-dialog input[type="color"]::-webkit-color-swatch-wrapper {
    padding:
        0;
}

.profile-custom-block-dialog input[type="color"]::-webkit-color-swatch {
    border:
        0;

    border-radius:
        3px;
}

.profile-custom-block-preview-wrap {
    margin-top:
        24px;

    padding-top:
        20px;

    border-top:
        1px solid
        rgba(196, 161, 90, 0.18);
}

.profile-custom-block-preview-label {
    display:
        block;

    margin-bottom:
        10px;

    color:
        #d9ba6a;

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        0.12em;

    text-transform:
        uppercase;
}

.profile-custom-block-preview {
    min-height:
        72px;

    box-sizing:
        border-box;
}

.profile-custom-block-actions {
    display:
        flex;

    justify-content:
        flex-end;

    gap:
        10px;

    margin-top:
        24px;

    padding-top:
        20px;

    border-top:
        1px solid
        rgba(196, 161, 90, 0.18);
}

.profile-custom-block-actions .button {
    min-height:
        42px;

    padding:
        9px
        18px;

    border-radius:
        5px;

    font-weight:
        700;
}

.profile-custom-block-actions .button-secondary {
    border:
        1px solid
        rgba(196, 161, 90, 0.28);

    background:
        rgba(255, 255, 255, 0.025);

    color:
        #d8ccd5;
}

.profile-custom-block-actions .button-secondary:hover,
.profile-custom-block-actions .button-secondary:focus-visible {
    border-color:
        rgba(219, 193, 125, 0.55);

    background:
        rgba(196, 161, 90, 0.08);

    color:
        #f1eaf0;
}

.profile-custom-block-actions .button-primary {
    border:
        1px solid
        rgba(219, 193, 125, 0.54);

    background:
        linear-gradient(
            180deg,
            rgba(124, 91, 31, 0.96),
            rgba(88, 59, 18, 0.96)
        );

    color:
        #fff8df;
}

.profile-custom-block-actions .button-primary:hover,
.profile-custom-block-actions .button-primary:focus-visible {
    border-color:
        rgba(240, 221, 166, 0.78);

    background:
        linear-gradient(
            180deg,
            rgba(145, 106, 37, 0.98),
            rgba(103, 69, 20, 0.98)
        );
}

@media (max-width: 700px) {

    .profile-custom-block-form {
        padding:
            20px;
    }

    .profile-custom-block-grid {
        grid-template-columns:
            1fr;
    }

    .profile-custom-block-heading h3 {
        font-size:
            22px;
    }

}