/*
|--------------------------------------------------------------------------
| 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;
    background: var(--color-background);
}

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;

    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;

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

    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 {
    box-sizing: border-box;
    position: relative;

    overflow: hidden;

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

    display: flex;
    align-items: center;

    padding: clamp(44px, 5vw, 72px) 0 clamp(48px, 5.5vw, 78px);

    background-image:
        linear-gradient(
            90deg,
            rgba(14, 7, 18, 0.9) 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));

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

    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.1);
}

/*
|--------------------------------------------------------------------------
| 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.2);
}

.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 {
    box-sizing: border-box;
    position: relative;

    overflow: hidden;

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

    display: flex;
    align-items: center;

    padding: clamp(48px, 5.5vw, 78px) 0 clamp(52px, 6vw, 84px);

    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.1) 0%, rgba(10, 5, 14, 0.32) 67%, rgba(10, 5, 14, 0.8) 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.1);
}

.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.1);
}

.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.3);

    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.8), 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.1);
}

.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.7) 100%),
            linear-gradient(180deg, rgba(18, 9, 23, 0.2), 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 {
    box-sizing: border-box;
    position: relative;

    overflow: hidden;

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

    display: flex;
    align-items: center;

    padding: 34px 0 42px;

    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.1);
}

.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.3);

    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.4), 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.1);
}

.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.2);

    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.1);
}

.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.1);
}

.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.1);
}

.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.3), 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.3), 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.3), 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 {
    box-sizing: border-box;
    position: relative;

    overflow: hidden;

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

    display: flex;
    align-items: center;

    padding: clamp(48px, 5.5vw, 78px) 0 clamp(52px, 6vw, 84px);

    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.8) 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.1);
}

.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.1);
}

.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.3);

    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.1);
}

.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.9));

    box-shadow:
        inset 0 0 0 5px rgba(255, 255, 255, 0.01),
        0 24px 70px rgba(0, 0, 0, 0.2);
}

.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.1);
}

.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;

    width: 1px !important;
    height: 1px !important;

    overflow: hidden;

    opacity: 0 !important;

    pointer-events: none;
}

/*
|--------------------------------------------------------------------------
| 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.3);

    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.1);
}

.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.8));
}

.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: auto;

    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: 540px;

    justify-self: end;

    padding: 28px 30px;

    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: 10px;
}

.login-page-crest img {
    display: block;

    width: 88px;
    height: 88px;

    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.1);
}

/*
|--------------------------------------------------------------------------
| 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.7);

    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.7) 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: 72px;
        height: 72px;
    }

    .login-page-notice {
        grid-template-columns: 1fr;
    }

    .login-page-options {
        gap: 8px;
    }
}

/*
|--------------------------------------------------------------------------
| Forgot / Reset Password Pages
|--------------------------------------------------------------------------
*/

.login-page-section {
    position: relative;

    min-height: auto;

    display: flex;
    align-items: center;

    padding: clamp(70px, 8vw, 110px) 0;

    overflow: hidden;

    background-image:
        linear-gradient(90deg, rgba(8, 4, 11, 0.95) 0%, rgba(12, 5, 16, 0.86) 48%, rgba(10, 5, 14, 0.76) 100%),
        linear-gradient(180deg, rgba(15, 7, 20, 0.12), 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-size: cover, cover, cover;

    background-position: center, center, center;

    background-repeat: no-repeat;
}

.login-page-section::before {
    content: '';

    position: absolute;

    inset: 18px;

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

    pointer-events: none;
}

.login-page-section::after {
    content: '';

    position: absolute;

    inset: 0;

    background: radial-gradient(circle at 50% 36%, rgba(91, 42, 101, 0.1), transparent 42%);

    pointer-events: none;
}

.login-page-section > .container {
    position: relative;

    z-index: 1;

    width: 100%;
}

.login-page-card {
    position: relative;

    width: min(100%, 560px);

    margin: 0 auto;

    padding: clamp(34px, 5vw, 52px);

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

    background: linear-gradient(145deg, rgba(44, 18, 53, 0.94), rgba(13, 5, 17, 0.96));

    box-shadow:
        inset 0 0 0 5px rgba(255, 255, 255, 0.01),
        0 28px 90px rgba(0, 0, 0, 0.4);
}

.login-page-card::before,
.login-page-card::after {
    content: '✦';

    position: absolute;

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

    font-size: 12px;
}

.login-page-card::before {
    top: 13px;
    left: 15px;
}

.login-page-card::after {
    right: 15px;
    bottom: 13px;
}

.login-page-heading {
    max-width: 470px;

    margin: 0 auto 30px;

    text-align: center;
}

.login-page-heading .eyebrow {
    margin: 0 0 9px;

    color: var(--color-gold);

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

    letter-spacing: 0.18em;

    text-transform: uppercase;
}

.login-page-heading h1 {
    margin: 0 0 12px;

    color: var(--color-text);

    font-size: clamp(34px, 5vw, 46px);

    font-weight: 500;

    line-height: 1.08;

    letter-spacing: -0.025em;
}

.login-page-heading > p:not(.eyebrow) {
    margin: 0;

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

    font-size: 14px;

    line-height: 1.7;
}

.login-page-card .login-page-notice {
    grid-template-columns: minmax(0, 1fr);

    margin-bottom: 24px;

    padding: 15px 17px;
}

.login-page-card .login-page-notice p + p {
    margin-top: 7px;
}

.login-page-card .form-help {
    display: block;

    margin-top: 8px;

    color: rgba(201, 191, 202, 0.72);

    font-size: 11px;

    line-height: 1.5;
}

.login-page-card .login-page-enrollment {
    margin-top: 26px;
}

.login-page-card .login-page-enrollment a,
.login-page-card .login-help-link {
    text-decoration: none;
}

.login-page-card .login-page-enrollment a:hover,
.login-page-card .login-page-enrollment a:focus-visible,
.login-page-card .login-help-link:hover,
.login-page-card .login-help-link:focus-visible {
    color: var(--color-gold);

    text-decoration: none;
}

.login-page-card .login-security-note {
    margin-top: 24px;
}

@media (max-width: 640px) {
    .login-page-section {
        min-height: auto;

        padding: 58px 0 68px;

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

    .login-page-section::before {
        inset: 12px;
    }

    .login-page-card {
        width: calc(100% - 16px);

        padding: 34px 24px;
    }

    .login-page-heading {
        margin-bottom: 26px;
    }

    .login-page-heading h1 {
        font-size: clamp(32px, 10vw, 42px);
    }
}

@media (max-width: 420px) {
    .login-page-card {
        width: calc(100% - 8px);

        padding: 30px 20px;
    }

    .login-page-heading h1 {
        font-size: clamp(30px, 10vw, 38px);
    }
}

/*
|--------------------------------------------------------------------------
| 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.9));

    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.1);
}

.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;
}

/*
|--------------------------------------------------------------------------
| 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.1);
}

.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;

    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
|--------------------------------------------------------------------------
*/

    .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
|--------------------------------------------------------------------------
*/

    .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;
        animation-duration: 0.01ms;
        animation-iteration-count: 1;
    }
}

@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));
        box-sizing: border-box;

        padding: 28px 0 34px;
    }

    .login-page-panel {
        max-width: 540px;

        padding: 18px 34px;
    }

    .login-page-crest {
        margin-bottom: 6px;
    }

    .login-page-crest img {
        width: 88px;
        height: 88px;
    }

    .login-page-panel-heading h2 {
        margin-bottom: 5px;
    }

    .login-page-panel .ornamental-rule {
        margin: 18px 0;
    }

    .login-page-form .form-group {
        margin-bottom: 10px;
    }

    .login-security-note {
        margin-top: 14px;
    }

    .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-crest {
        margin-bottom: 10px;
    }

    .login-page-panel-heading h2 {
        font-size: clamp(32px, 3.3vw, 42px);
    }

    .login-page-panel .ornamental-rule {
        margin: 10px auto 12px;
    }

    .login-page-form .form-group {
        margin-bottom: 13px;
    }

    .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: 10px;

        padding-top: 9px;
    }

    .login-security-note {
        margin-top: 9px;

        padding-top: 8px;
    }
}
/*
|--------------------------------------------------------------------------
| 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);
}

/* Staff Dashboard hero image */
.staff-dashboard-hero {
    background-image:
        linear-gradient(90deg, rgba(9, 4, 11, 0.8) 0%, rgba(13, 7, 16, 0.66) 48%, rgba(13, 7, 16, 0.42) 100%),
        var(--staff-dashboard-hero-image, url('../images/staff_dashboard_hero_bg.png'));
    background-position:
        center,
        center 42%;
    background-size: auto, cover;
    background-repeat: no-repeat;
}

.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(220px, 255px)
        minmax(0, 1fr);

    gap: clamp(24px, 3vw, 40px);

    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.2);

    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: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.2);
}

/*
|--------------------------------------------------------------------------
| 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.4);

    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);
}

.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.2);

    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.1);
}

.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.5);

    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);

    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, 0.07);
    background:
        radial-gradient(circle at top left, rgba(116, 64, 129, 0.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, 0.28);
    border-radius: 12px;
    background: linear-gradient(180deg, #160a1a 0%, #110714 100%);
    box-shadow: 0 14px 34px rgba(0, 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, 0.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: 0.015em;
}

.forum-index-board + .forum-index-board {
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.forum-index-board-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 90px 90px minmax(230px, 0.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, 0.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: 0.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, 0.07);
    background: rgba(255, 255, 255, 0.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, 0.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, 0.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, 0.24);
    border-radius: 999px;
    background: rgba(196, 161, 90, 0.08);
    color: var(--color-gold-light);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.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: 0.13em;
    text-transform: uppercase;
}

.forum-new-thread-placeholder {
    padding: 7px 11px;
    border: 1px solid rgba(219, 193, 125, 0.25);
    border-radius: 6px;
    background: rgba(219, 193, 125, 0.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, 0.5fr);
    min-height: 100px;
}

.forum-subboard-row + .forum-subboard-row {
    border-top: 1px solid rgba(255, 255, 255, 0.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, 0.07);
    background: rgba(255, 255, 255, 0.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, 0.09);
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.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, 0.28);
    color: var(--color-white);
}

.forum-thread-pagination .is-current {
    border-color: rgba(219, 193, 125, 0.38);
    background: rgba(196, 161, 90, 0.14);
    color: var(--color-gold-light);
}

.forum-thread-pagination .is-disabled {
    opacity: 0.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, 0.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, 0.45);
}

.forum-thread-search button {
    height: 34px;
    padding: 0 13px;
    border: 1px solid rgba(219, 193, 125, 0.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, 0.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, 0.42fr);
    min-height: 86px;
    position: relative;
    background: rgba(255, 255, 255, 0.005);
}

.forum-thread-row + .forum-thread-row {
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.forum-thread-row:hover {
    background: rgba(255, 255, 255, 0.018);
}

.forum-thread-row.is-announcement {
    background: linear-gradient(90deg, rgba(196, 161, 90, 0.07), rgba(196, 161, 90, 0.015) 55%, transparent);
}

.forum-thread-row.is-pinned:not(.is-announcement) {
    background: linear-gradient(90deg, rgba(116, 64, 129, 0.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, 0.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, 0.21);
    border-radius: 5px;
    background: rgba(196, 161, 90, 0.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, 0.27);
    background: rgba(116, 64, 129, 0.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, 0.025);
    color: var(--thread-label-color);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.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, 0.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, 0.07);
    background: rgba(255, 255, 255, 0.012);
}

/* Error / restricted */

.forum-board-error {
    padding: 70px 0;
}

.forum-board-error .section-inner {
    padding: 36px 28px;
    border: 1px solid rgba(116, 64, 129, 0.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, 0.47fr);
    }

    .forum-thread-row {
        grid-template-columns: 54px minmax(0, 1fr) 105px minmax(185px, 0.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, 0.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, 0.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, 0.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, 0.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, 0.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: 0.01em;
}

.forum-index-board-list {
    display: grid;
    gap: 5px;
    padding-top: 5px;
}

.forum-index-board {
    border: 0;
    background: transparent;
}

.forum-index-board-top {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        92px
        92px
        minmax(290px, 0.62fr);
    min-height: 105px;
    border: 1px solid rgba(116, 64, 129, 0.28);
    border-radius: 2px;
    background: rgba(14, 7, 17, 0.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, 0.22);
    background: rgba(255, 255, 255, 0.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, 0.22);
    background: rgba(14, 7, 17, 0.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: 0.055em;
}

.forum-index-last-post {
    position: relative;
    z-index: 0;
    padding: 15px 20px 15px 24px;
    border-left: 1px solid rgba(116, 64, 129, 0.22);
    background: rgba(255, 255, 255, 0.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, 0.22);
    background: rgba(14, 7, 17, 0.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, 0.28);
    border-top: 0;
    border-radius: 0 0 2px 2px;
    background: rgba(20, 10, 24, 0.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, 0.28);
    background: rgba(14, 7, 17, 0.86);
}

/*
|--------------------------------------------------------------------------
| Responsive forum index
|--------------------------------------------------------------------------
*/

@media (max-width: 1080px) {
    .forum-index-board-top {
        grid-template-columns:
            minmax(0, 1fr)
            78px
            78px
            minmax(245px, 0.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, 0.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, 0.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, 0.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, 0.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-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 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);
}

/*
|--------------------------------------------------------------------------
| 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 {
    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
|--------------------------------------------------------------------------
*/

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

/*
|--------------------------------------------------------------------------
| 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;
    content: '';
    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;
    }

    .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;
}

/*
|--------------------------------------------------------------------------
| 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);
}

/*
|--------------------------------------------------------------------------
| 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;

    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;

    background: var(--forum-row-border);

    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;
    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;
}

/*
|--------------------------------------------------------------------------
| 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.5);
}

/*
|--------------------------------------------------------------------------
| 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;
    border: 0;
}

/* 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. */

/* 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.
|--------------------------------------------------------------------------
*/

/*
|--------------------------------------------------------------------------
| Preserve centered stat text.
|--------------------------------------------------------------------------
*/

.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-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.
|--------------------------------------------------------------------------
*/

/*
|--------------------------------------------------------------------------
| 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;

    border: 0;

    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.5);

    border: 0;

    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.5);

    border: 0;

    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-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;
}

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

    .forum-subboard-stat,
    .forum-subboard-last-post {
        background: rgba(116, 64, 129, 0.5) !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;
    border: 0;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none;
}

.forum-board-subforums .forum-board-section-titlebar {
    min-height: 60px !important;
    margin: 0 0 10px;
    padding: 0 22px !important;

    display: flex !important;
    align-items: center;

    border: 1px solid rgba(116, 64, 129, 0.34);
    border-radius: 0 !important;

    background: #211027 !important;
}

.forum-board-subforums .forum-board-section-titlebar h2 {
    min-height: 0 !important;
    margin: 0;
    padding: 0;

    font-family: 'Arial Narrow', 'Segoe UI', Arial, sans-serif !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    letter-spacing: 0.01em;
    line-height: 1.2 !important;

    color: #fff !important;
}

/*
|--------------------------------------------------------------------------
| Exact same row proportions as the main board row
|--------------------------------------------------------------------------
*/

.forum-subboard-row {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        145px
        145px
        minmax(300px, 0.52fr) !important;

    column-gap: 0;

    min-height: 102px !important;

    overflow: visible !important;

    border: 0 !important;
    border-radius: 0;

    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;
    isolation: isolate;

    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 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;
}

/*
|--------------------------------------------------------------------------
| 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;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    border: 0 !important;
    border-radius: 0 !important;

    background: rgba(116, 64, 129, 0.5) !important;

    clip-path: polygon(44px 0, 100% 0, calc(100% - 44px) 100%, 0 100%) !important;

    text-align: center;
}

.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;
    align-items: center;

    border: 0 !important;
    border-radius: 0 !important;

    background: rgba(116, 64, 129, 0.5) !important;

    clip-path: polygon(44px 0, 100% 0, 100% 100%, 0 100%) !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);
}

/* 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;

    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;
}

/* ================================================================
   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 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.3);
    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.3);
    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.3);
        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.2);
    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.2);
}

.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, 0.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.1);
}

.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, 0.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.1);
    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;
    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;
    text-transform: none;
    cursor: pointer;
}

.forum-editor-color-label:hover {
    border-color: rgba(219, 193, 125, 0.46);
    background: rgba(196, 161, 90, 0.1);
}

.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-editor-counts {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;

    min-height: 34px;
    padding: 8px 14px 9px;

    border-top: 1px solid rgba(255, 255, 255, 0.055);

    background: rgba(8, 4, 10, 0.46);

    color: var(--color-text-subtle, #8f8492);

    font-family: 'Segoe UI', Arial, sans-serif;

    font-size: 11px;
    line-height: 1.35;
}

.forum-editor-counts span[aria-hidden='true'] {
    color: rgba(196, 161, 90, 0.62);
}

.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.2);
    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.3);
    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;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.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.2),
        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.7);
    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-form .forum-editor-counts {
    min-height: 32px;
    padding: 7px 12px 8px;

    border-top: 1px solid rgba(196, 161, 90, 0.14);

    background: rgba(8, 5, 10, 0.42);
}

.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;
}

#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;
    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;
}

#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);
}

@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.2);
}

/*
 * 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.1);
}

/* 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.3);
    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.3);
    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.6) 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.2);
    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;
}

/*
|--------------------------------------------------------------------------
| Navigation Dropdown Links
|--------------------------------------------------------------------------
*/

/* Notification links use the same muted gold family as sidebar links. */
[data-notification-popover='notifications'] .nav-notification-item-title,
[data-notification-popover='notifications'] .nav-notification-inline-link,
[data-notification-popover='notifications'] .nav-notification-compact-link,
[data-notification-popover='notifications'] .nav-notification-compact-link strong {
    color: var(--color-gold-light, #d8bb77);
}

[data-notification-popover='notifications'] .nav-notification-inline-link:hover,
[data-notification-popover='notifications'] .nav-notification-inline-link:focus-visible,
[data-notification-popover='notifications'] .nav-notification-compact-link:hover,
[data-notification-popover='notifications'] .nav-notification-compact-link:focus-visible {
    color: #ecd38f;
}

/* Footer actions are centered and visually match dropdown link sizing. */
.nav-notification-popover-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;

    padding: 11px 14px;

    border-top: 1px solid rgba(126, 86, 120, 0.3);

    background: rgba(17, 8, 20, 0.96);

    text-align: center;
}

.nav-notification-popover-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 0;
    padding: 2px 4px;

    border: 0;
    background: transparent;

    color: var(--color-text, #f1eaf0);

    font: inherit;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.35;

    text-align: center;
    text-decoration: none !important;

    cursor: pointer;

    transition: color var(--transition);
}

.nav-notification-popover-action:hover,
.nav-notification-popover-action:focus-visible {
    color: var(--color-gold-light, #d8bb77);
    text-decoration: none !important;
    outline: none;
}

.nav-notification-clear-form {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
}

/* 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.1), 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.1);
}

.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.2);
}

.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;
}

/* --------------------------------------------------------------------------
   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.1em;
    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.5) 58%,
            rgba(12, 6, 16, 0.78) 100%
        ),
        linear-gradient(180deg, rgba(18, 9, 23, 0.2) 0%, rgba(10, 5, 14, 0.35) 54%, rgba(10, 5, 14, 0.7) 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) 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.1);

    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.1em;
    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));

    /*
     * Let each column end at the height of its own content instead of
     * stretching every column to match the tallest sibling in the row.
     */
    align-items: start;

    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));
}

/*
|--------------------------------------------------------------------------
| Member Column Ratio Presets
|--------------------------------------------------------------------------
|
| These classes are intentionally controlled presets rather than arbitrary
| user-entered widths. The editor adds one of these allowlisted classes to
| the .user-custom-columns wrapper.
|
| The base equal-width grid above remains the fallback for older saved bios.
|
*/

/* Two-column layouts */

.user-custom-columns.user-columns-50-50 {
    grid-template-columns:
        minmax(0, 50fr)
        minmax(0, 50fr);
}

.user-custom-columns.user-columns-60-40 {
    grid-template-columns:
        minmax(0, 60fr)
        minmax(0, 40fr);
}

.user-custom-columns.user-columns-40-60 {
    grid-template-columns:
        minmax(0, 40fr)
        minmax(0, 60fr);
}

.user-custom-columns.user-columns-70-30 {
    grid-template-columns:
        minmax(0, 70fr)
        minmax(0, 30fr);
}

.user-custom-columns.user-columns-30-70 {
    grid-template-columns:
        minmax(0, 30fr)
        minmax(0, 70fr);
}

.user-custom-columns.user-columns-75-25 {
    grid-template-columns:
        minmax(0, 75fr)
        minmax(0, 25fr);
}

.user-custom-columns.user-columns-25-75 {
    grid-template-columns:
        minmax(0, 25fr)
        minmax(0, 75fr);
}

.user-custom-columns.user-columns-80-20 {
    grid-template-columns:
        minmax(0, 80fr)
        minmax(0, 20fr);
}

.user-custom-columns.user-columns-20-80 {
    grid-template-columns:
        minmax(0, 20fr)
        minmax(0, 80fr);
}

/* Three-column layouts */

.user-custom-columns.user-columns-33-33-33 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.user-custom-columns.user-columns-25-50-25 {
    grid-template-columns:
        minmax(0, 25fr)
        minmax(0, 50fr)
        minmax(0, 25fr);
}

.user-custom-columns.user-columns-20-60-20 {
    grid-template-columns:
        minmax(0, 20fr)
        minmax(0, 60fr)
        minmax(0, 20fr);
}

.user-custom-columns.user-columns-40-30-30 {
    grid-template-columns:
        minmax(0, 40fr)
        minmax(0, 30fr)
        minmax(0, 30fr);
}

.user-custom-columns.user-columns-30-40-30 {
    grid-template-columns:
        minmax(0, 30fr)
        minmax(0, 40fr)
        minmax(0, 30fr);
}

.user-custom-columns.user-columns-30-30-40 {
    grid-template-columns:
        minmax(0, 30fr)
        minmax(0, 30fr)
        minmax(0, 40fr);
}

.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;
}

/*
 * Images inside member-built profile content must preserve their original
 * aspect ratio and remain contained by the block/column they were placed in.
 */
.user-custom-column img,
.user-custom-box img,
.user-custom-banner img,
.user-custom-panel img {
    display: block;

    width: auto;
    max-width: 100%;
    height: auto !important;

    margin-left: auto;
    margin-right: auto;

    object-fit: contain;
}

/*
 * 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.3);

    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)),
    .user-custom-columns.user-columns-50-50,
    .user-custom-columns.user-columns-60-40,
    .user-custom-columns.user-columns-40-60,
    .user-custom-columns.user-columns-70-30,
    .user-custom-columns.user-columns-30-70,
    .user-custom-columns.user-columns-75-25,
    .user-custom-columns.user-columns-25-75,
    .user-custom-columns.user-columns-80-20,
    .user-custom-columns.user-columns-20-80,
    .user-custom-columns.user-columns-33-33-33,
    .user-custom-columns.user-columns-25-50-25,
    .user-custom-columns.user-columns-20-60-20,
    .user-custom-columns.user-columns-40-30-30,
    .user-custom-columns.user-columns-30-40-30,
    .user-custom-columns.user-columns-30-30-40 {
        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);
}

.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.1);
}

.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;
    }
}

/*
|--------------------------------------------------------------------------
| Forum Editor Counts — Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 640px) {
    .forum-editor-counts {
        justify-content: flex-start;
        flex-wrap: wrap;

        gap: 5px 7px;

        padding: 8px 12px;
    }
}
/* ==========================================================================
   Profile Friends Preview
   ========================================================================== */

.member-profile-friends-card {
    overflow: hidden;
}

.member-profile-friends-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.member-profile-friends-heading > div {
    min-width: 0;
}

.member-profile-friends-heading h2 {
    margin-bottom: 0;
}

.member-profile-friend-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 2rem;
    height: 2rem;
    padding: 0 0.55rem;
    border: 1px solid rgba(212, 175, 55, 0.35);
    border-radius: 999px;
    background: rgba(212, 175, 55, 0.08);
    color: #e7c86e;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1;
}

.member-profile-friend-preview {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.9rem 0.65rem;
    margin-top: 0.35rem;
}

.member-profile-friend {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
    color: inherit;
    text-align: center;
    text-decoration: none;
}

.member-profile-friend:hover,
.member-profile-friend:focus {
    color: #e7c86e;
    text-decoration: none;
}

.member-profile-friend-avatar {
    display: flex;
    width: 3.25rem;
    height: 3.25rem;
    flex: 0 0 3.25rem;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid rgba(212, 175, 55, 0.42);
    border-radius: 50%;
    background: radial-gradient(circle at 35% 25%, rgba(126, 74, 132, 0.32), rgba(31, 13, 35, 0.96) 72%);
    box-shadow:
        0 0 0 2px rgba(255, 255, 255, 0.02),
        0 6px 14px rgba(0, 0, 0, 0.22);
}

.member-profile-friend-avatar picture,
.member-profile-friend-avatar img {
    display: block;
    width: 100%;
    height: 100%;
}

.member-profile-friend-avatar img {
    object-fit: cover;
}

.member-profile-friend-avatar-fallback {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    color: #f4e3a4;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1;
}

.member-profile-friend-name {
    display: block;
    width: 100%;
    overflow: hidden;
    color: #f4edf3;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.member-profile-friend:hover .member-profile-friend-name,
.member-profile-friend:focus .member-profile-friend-name {
    color: #e7c86e;
}

.member-profile-friends-view-all {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1rem;
    padding-top: 0.9rem;
    border-top: 1px solid rgba(212, 175, 55, 0.16);
    color: #e7c86e;
    font-size: 0.86rem;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
}

.member-profile-friends-view-all:hover,
.member-profile-friends-view-all:focus {
    color: #f4e3a4;
    text-decoration: none;
}

.member-profile-friends-card .member-profile-empty {
    margin: 0;
}

/* Relationship action controls */

.member-profile-relationship-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
}

.member-profile-action-form {
    margin: 0;
}

.member-profile-status-button {
    cursor: default;
    pointer-events: none;
}

.member-profile-action-message {
    flex: 0 0 100%;
    margin: 0 0 0.25rem;
    font-size: 0.85rem;
    line-height: 1.45;
}

.member-profile-action-message.is-success {
    color: #d7c880;
}

.member-profile-action-message.is-error {
    color: #e5a5ad;
}

@media (max-width: 1180px) {
    .member-profile-friend-preview {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 820px) {
    .member-profile-friend-preview {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .member-profile-friends-heading {
        align-items: center;
    }

    .member-profile-friend-preview {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .member-profile-friend-avatar {
        width: 3rem;
        height: 3rem;
        flex-basis: 3rem;
    }

    .member-profile-relationship-actions {
        width: 100%;
    }

    .member-profile-action-form {
        flex: 1 1 auto;
    }

    .member-profile-action-form .button {
        width: 100%;
    }
}
/* Friend avatar presence indicator */

.member-profile-friend-avatar {
    position: relative;
}

.member-profile-friend-presence {
    position: absolute;
    right: 0.05rem;
    bottom: 0.05rem;
    width: 0.78rem;
    height: 0.78rem;
    border: 2px solid #160b18;
    border-radius: 50%;
    background: #77727a;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

.member-profile-friend-presence.is-online {
    background: #5fbf7a;
}

@media (max-width: 560px) {
    .member-profile-friend-presence {
        width: 0.72rem;
        height: 0.72rem;
    }
}
/* ==========================================================================
   Full Friends Page
   ========================================================================== */

.friends-page {
    min-height: calc(100vh - 8rem);
}

.friends-page-hero {
    padding: 3rem 0 1.5rem;
}

.friends-page-hero-content {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.25rem;
}

.friends-page-hero h1 {
    margin-bottom: 0.4rem;
}

.friends-page-summary {
    margin: 0;
    color: #cdbec9;
    font-size: 0.95rem;
}

.friends-page-content {
    padding: 0 0 4rem;
}

.friends-page-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

.friends-page-card {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    min-width: 0;
    padding: 1rem;
    border: 1px solid rgba(212, 175, 55, 0.24);
    border-radius: 0.7rem;
    background: linear-gradient(180deg, rgba(37, 17, 41, 0.98), rgba(24, 11, 28, 0.98));
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.2);
    color: inherit;
    text-decoration: none;
    transition:
        border-color 0.18s ease,
        transform 0.18s ease,
        background 0.18s ease;
}

.friends-page-card:hover,
.friends-page-card:focus {
    border-color: rgba(212, 175, 55, 0.52);
    background: linear-gradient(180deg, rgba(44, 20, 49, 1), rgba(27, 12, 31, 1));
    color: inherit;
    text-decoration: none;
    transform: translateY(-1px);
}

.friends-page-avatar {
    position: relative;
    display: flex;
    width: 3.75rem;
    height: 3.75rem;
    flex: 0 0 3.75rem;
    align-items: center;
    justify-content: center;
    overflow: visible;
    border: 1px solid rgba(212, 175, 55, 0.42);
    border-radius: 50%;
    background: radial-gradient(circle at 35% 25%, rgba(126, 74, 132, 0.32), rgba(31, 13, 35, 0.96) 72%);
    box-shadow:
        0 0 0 2px rgba(255, 255, 255, 0.02),
        0 6px 14px rgba(0, 0, 0, 0.22);
}

.friends-page-avatar picture {
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 50%;
}

.friends-page-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.friends-page-avatar-fallback {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 50%;
    color: #f4e3a4;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1;
}

.friends-page-presence {
    position: absolute;
    right: 0.02rem;
    bottom: 0.02rem;
    width: 0.82rem;
    height: 0.82rem;
    border: 2px solid #160b18;
    border-radius: 50%;
    background: #77727a;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

.friends-page-presence.is-online {
    background: #5fbf7a;
}

.friends-page-card-body {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0.2rem;
}

.friends-page-name {
    display: block;
    overflow: hidden;
    color: #f4edf3;
    font-size: 0.95rem;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.friends-page-card:hover .friends-page-name,
.friends-page-card:focus .friends-page-name {
    color: #e7c86e;
}

.friends-page-status {
    color: #9f95a0;
    font-size: 0.8rem;
    line-height: 1.2;
}

.friends-page-empty,
.friends-page-error .section-inner {
    max-width: 44rem;
    padding: 1.5rem;
    border: 1px solid rgba(212, 175, 55, 0.24);
    border-radius: 0.7rem;
    background: linear-gradient(180deg, rgba(37, 17, 41, 0.98), rgba(24, 11, 28, 0.98));
}

.friends-page-empty h2,
.friends-page-error h1 {
    margin-bottom: 0.6rem;
}

.friends-page-empty p,
.friends-page-error p {
    color: #cdbec9;
}

.friends-page-error {
    padding: 3rem 0 4rem;
}

/* ==========================================================================
   Friends Page Responsive
   ========================================================================== */

@media (max-width: 1180px) {
    .friends-page-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .friends-page-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .friends-page-hero-content {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 560px) {
    .friends-page-hero {
        padding-top: 2rem;
    }

    .friends-page-grid {
        grid-template-columns: 1fr;
    }

    .friends-page-card {
        padding: 0.9rem;
    }

    .friends-page-avatar {
        width: 3.4rem;
        height: 3.4rem;
        flex-basis: 3.4rem;
    }

    .friends-page-presence {
        width: 0.76rem;
        height: 0.76rem;
    }
}
/* Profile friendship primary action buttons */

.member-profile-relationship-actions .button:not(.button-secondary) {
    border: 1px solid rgba(212, 175, 55, 0.48);
    background: linear-gradient(180deg, rgba(84, 46, 91, 0.98), rgba(57, 29, 64, 0.98));
    color: #f3df9b;
    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.2);
}

.member-profile-relationship-actions .button:not(.button-secondary):hover,
.member-profile-relationship-actions .button:not(.button-secondary):focus {
    border-color: rgba(232, 198, 91, 0.72);
    background: linear-gradient(180deg, rgba(98, 54, 106, 1), rgba(67, 34, 75, 1));
    color: #fff0b8;
    text-decoration: none;
}
/* ==========================================================================
   Notifications History Page
   ========================================================================== */

.notifications-page {
    min-height: calc(100vh - 8rem);
}

.notifications-page-header {
    padding: 3rem 0 1.5rem;
}

.notifications-page-heading-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.25rem;
}

.notifications-page-heading-row h1 {
    margin-bottom: 0.4rem;
}

.notifications-page-summary {
    max-width: 46rem;
    margin: 0;
    color: #cdbec9;
    font-size: 0.95rem;
    line-height: 1.55;
}

.notifications-mark-all-form {
    margin: 0;
    flex: 0 0 auto;
}

.notifications-page-counts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.2rem;
}

.notifications-page-counts span {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 0.7rem;
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 999px;
    background: rgba(212, 175, 55, 0.05);
    color: #bfb2bc;
    font-size: 0.82rem;
}

.notifications-page-counts strong {
    color: #e7c86e;
    font-size: 0.9rem;
}

.notifications-page-content {
    padding: 0 0 4rem;
}

.notifications-page-message {
    margin-bottom: 1rem;
    padding: 0.8rem 1rem;
    border: 1px solid rgba(212, 175, 55, 0.18);
    border-radius: 0.55rem;
    background: rgba(31, 13, 35, 0.9);
    font-size: 0.88rem;
    line-height: 1.45;
}

.notifications-page-message.is-success {
    color: #d7c880;
}

.notifications-page-message.is-error {
    border-color: rgba(183, 91, 105, 0.32);
    color: #e5a5ad;
}

.notifications-filter-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-bottom: 1rem;
}

.notifications-filter-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 0.8rem;
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 999px;
    background: rgba(36, 16, 40, 0.88);
    color: #cdbec9;
    font-size: 0.84rem;
    font-weight: 600;
    text-decoration: none;
}

.notifications-filter-link span {
    display: inline-flex;
    min-width: 1.5rem;
    height: 1.5rem;
    align-items: center;
    justify-content: center;
    padding: 0 0.35rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    color: #e7c86e;
    font-size: 0.76rem;
}

.notifications-filter-link:hover,
.notifications-filter-link:focus {
    border-color: rgba(212, 175, 55, 0.42);
    color: #f2e2ef;
    text-decoration: none;
}

.notifications-filter-link.is-active {
    border-color: rgba(212, 175, 55, 0.52);
    background: linear-gradient(180deg, rgba(83, 45, 90, 0.98), rgba(56, 29, 63, 0.98));
    color: #f8e7ad;
}

.notifications-history-list {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.notifications-history-item {
    display: grid;
    grid-template-columns: 1rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.85rem;
    padding: 1rem 1.05rem;
    border: 1px solid rgba(212, 175, 55, 0.18);
    border-radius: 0.7rem;
    background: linear-gradient(180deg, rgba(34, 15, 38, 0.98), rgba(23, 10, 27, 0.98));
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16);
    color: inherit;
    text-decoration: none;
    transition:
        border-color 0.18s ease,
        background 0.18s ease,
        transform 0.18s ease;
}

.notifications-history-item:hover,
.notifications-history-item:focus {
    border-color: rgba(212, 175, 55, 0.42);
    background: linear-gradient(180deg, rgba(42, 19, 47, 1), rgba(27, 12, 31, 1));
    color: inherit;
    text-decoration: none;
    transform: translateY(-1px);
}

.notifications-history-item.is-unread {
    border-color: rgba(212, 175, 55, 0.34);
    background: linear-gradient(180deg, rgba(46, 21, 51, 0.99), rgba(28, 12, 33, 0.99));
}

.notifications-history-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
}

.notifications-unread-dot {
    display: block;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background: #d9b95e;
    box-shadow:
        0 0 0 3px rgba(217, 185, 94, 0.09),
        0 0 10px rgba(217, 185, 94, 0.24);
}

.notifications-history-main {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.2rem;
}

.notifications-history-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.notifications-history-type {
    color: #c9a94f;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-transform: uppercase;
}

.notifications-history-time {
    flex: 0 0 auto;
    color: #8f8490;
    font-size: 0.76rem;
    line-height: 1.2;
}

.notifications-history-title {
    display: block;
    color: #f3edf2;
    font-size: 0.98rem;
    line-height: 1.35;
}

.notifications-history-item.is-read .notifications-history-title {
    color: #d1c7cf;
}

.notifications-history-message {
    display: block;
    color: #b7abb5;
    font-size: 0.86rem;
    line-height: 1.45;
}

.notifications-history-arrow {
    color: #9e8b55;
    font-size: 1.35rem;
    line-height: 1;
}

.notifications-history-item:hover .notifications-history-arrow,
.notifications-history-item:focus .notifications-history-arrow {
    color: #e7c86e;
}

.notifications-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.25rem;
}

.notifications-pagination-status {
    color: #9f95a0;
    font-size: 0.82rem;
}

.notifications-empty-state {
    max-width: 44rem;
    padding: 1.5rem;
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 0.7rem;
    background: linear-gradient(180deg, rgba(37, 17, 41, 0.98), rgba(24, 11, 28, 0.98));
}

.notifications-empty-state h2 {
    margin-bottom: 0.6rem;
}

.notifications-empty-state p {
    color: #cdbec9;
}

/* ==========================================================================
   Notifications History Responsive
   ========================================================================== */

@media (max-width: 760px) {
    .notifications-page-heading-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .notifications-mark-all-form {
        width: 100%;
    }

    .notifications-mark-all-form .button {
        width: 100%;
    }

    .notifications-history-item {
        grid-template-columns: 0.8rem minmax(0, 1fr);
    }

    .notifications-history-arrow {
        display: none;
    }

    .notifications-history-topline {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.25rem;
    }

    .notifications-pagination {
        flex-wrap: wrap;
    }
}

@media (max-width: 520px) {
    .notifications-page-header {
        padding-top: 2rem;
    }

    .notifications-page-counts {
        gap: 0.5rem;
    }

    .notifications-page-counts span {
        flex: 1 1 auto;
        justify-content: center;
    }

    .notifications-filter-nav {
        display: grid;
        grid-template-columns: 1fr;
    }

    .notifications-filter-link {
        justify-content: space-between;
    }

    .notifications-history-item {
        padding: 0.9rem;
    }

    .notifications-history-title {
        font-size: 0.92rem;
    }

    .notifications-history-message {
        font-size: 0.82rem;
    }
}
/* ==========================================================================
   Blocked Members Page
   ========================================================================== */

.blocked-members-page {
    min-height: calc(100vh - 8rem);
}

.blocked-members-hero {
    padding: 3rem 0 1.5rem;
}

.blocked-members-hero-content {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.25rem;
}

.blocked-members-hero h1 {
    margin-bottom: 0.4rem;
}

.blocked-members-summary {
    max-width: 42rem;
    margin: 0;
    color: #cdbec9;
    font-size: 0.95rem;
    line-height: 1.55;
}

.blocked-members-content {
    padding: 0 0 4rem;
}

.blocked-members-message {
    margin-bottom: 1rem;
    padding: 0.8rem 1rem;
    border: 1px solid rgba(212, 175, 55, 0.18);
    border-radius: 0.55rem;
    background: rgba(31, 13, 35, 0.9);
    font-size: 0.88rem;
    line-height: 1.45;
}

.blocked-members-message.is-success {
    color: #d7c880;
}

.blocked-members-message.is-error {
    border-color: rgba(183, 91, 105, 0.32);
    color: #e5a5ad;
}

.blocked-members-list {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.blocked-member-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 0.7rem;
    background: linear-gradient(180deg, rgba(37, 17, 41, 0.98), rgba(24, 11, 28, 0.98));
    box-shadow: 0 7px 20px rgba(0, 0, 0, 0.18);
}

.blocked-member-profile-link {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    min-width: 0;
    flex: 1 1 auto;
    color: inherit;
    text-decoration: none;
}

.blocked-member-profile-link:hover,
.blocked-member-profile-link:focus {
    color: inherit;
    text-decoration: none;
}

.blocked-member-avatar {
    display: flex;
    width: 3.75rem;
    height: 3.75rem;
    flex: 0 0 3.75rem;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid rgba(212, 175, 55, 0.4);
    border-radius: 50%;
    background: radial-gradient(circle at 35% 25%, rgba(126, 74, 132, 0.32), rgba(31, 13, 35, 0.96) 72%);
    box-shadow:
        0 0 0 2px rgba(255, 255, 255, 0.02),
        0 6px 14px rgba(0, 0, 0, 0.22);
}

.blocked-member-avatar picture {
    display: block;
    width: 100%;
    height: 100%;
}

.blocked-member-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blocked-member-avatar-fallback {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    color: #f4e3a4;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1;
}

.blocked-member-details {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.2rem;
}

.blocked-member-name {
    overflow: hidden;
    color: #f4edf3;
    font-size: 0.98rem;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.blocked-member-profile-link:hover .blocked-member-name,
.blocked-member-profile-link:focus .blocked-member-name {
    color: #e7c86e;
}

.blocked-member-status {
    color: #9f95a0;
    font-size: 0.8rem;
    line-height: 1.2;
}

.blocked-member-unblock-form {
    margin: 0;
    flex: 0 0 auto;
}

.blocked-member-unblock-form .button {
    min-width: 6.5rem;
}

.blocked-members-empty {
    max-width: 44rem;
    padding: 1.5rem;
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 0.7rem;
    background: linear-gradient(180deg, rgba(37, 17, 41, 0.98), rgba(24, 11, 28, 0.98));
}

.blocked-members-empty h2 {
    margin-bottom: 0.6rem;
}

.blocked-members-empty p {
    color: #cdbec9;
}

/* ==========================================================================
   Blocked Members Responsive
   ========================================================================== */

@media (max-width: 720px) {
    .blocked-members-hero-content {
        align-items: flex-start;
        flex-direction: column;
    }

    .blocked-member-card {
        align-items: stretch;
        flex-direction: column;
    }

    .blocked-member-unblock-form {
        width: 100%;
    }

    .blocked-member-unblock-form .button {
        width: 100%;
    }
}

@media (max-width: 520px) {
    .blocked-members-hero {
        padding-top: 2rem;
    }

    .blocked-member-card {
        padding: 0.9rem;
    }

    .blocked-member-avatar {
        width: 3.4rem;
        height: 3.4rem;
        flex-basis: 3.4rem;
    }
}
/* ==========================================================================
   Rendering Stability
   ========================================================================== */

/*
 * Chrome can occasionally show horizontal repaint bands when a fixed header,
 * clipped forum rows, and multiple translucent layers are composited together.
 * Keep the fixed navigation on one stable layer and isolate the large member
 * layout regions so scrolling does not invalidate the entire viewport.
 */

.member-home-layout,
.member-sidebar,
.member-home-main,
.forum-index-layout,
.forum-index-main,
.forum-board-layout,
.forum-board-main,
.forum-index-category,
.forum-index-board-row,
.forum-subboard-row,
.forum-thread-list,
.notifications-page,
.friends-page,
.blocked-members-page {
    isolation: isolate;
}

/*
 * Prevent scroll anchoring from shifting authenticated page layouts while
 * images, presence data, or sidebar content finish painting.
 */
.member-home-layout,
.forum-index-layout,
.forum-board-layout {
    overflow-anchor: none;
}
/* ==========================================================================
   Mobile Hero / Cover Edge Spacing
   ========================================================================== */

@media (max-width: 700px) {
    /*
     * Hero frames sit about 12px from the viewport edge. Standard section
     * content is only 20px from the edge, which leaves almost no visual gap.
     * These hero containers use a narrower mobile width so headings, copy,
     * buttons, and panels sit comfortably inside the decorative frame.
     */
    .home-hero-grid,
    .features-hero-inner,
    .about-hero-inner,
    .contact-hero-inner,
    .login-hero-inner,
    .dashboard-hero-inner,
    .member-home-hero-inner,
    .member-profile-hero-inner,
    .friends-page-hero-content,
    .blocked-members-hero-content,
    .admin-dashboard-hero > .section-inner,
    .forum-admin-hero > .section-inner,
    .forum-index-header > .section-inner,
    .forum-board-header > .section-inner,
    .thread-page-header > .section-inner {
        width: min(calc(100% - 64px), var(--content-width));
        margin-left: auto;
        margin-right: auto;
    }

    /*
     * The homepage previously had an additional copy-only mobile inset.
     * The grid now provides the correct inset for the entire hero, including
     * its buttons, so avoid doubling the spacing on the text alone.
     */
    .home-hero-copy {
        padding-left: 0;
        padding-right: 0;
    }
}

@media (max-width: 420px) {
    .home-hero-grid,
    .features-hero-inner,
    .about-hero-inner,
    .contact-hero-inner,
    .login-hero-inner,
    .dashboard-hero-inner,
    .member-home-hero-inner,
    .member-profile-hero-inner,
    .friends-page-hero-content,
    .blocked-members-hero-content,
    .admin-dashboard-hero > .section-inner,
    .forum-admin-hero > .section-inner,
    .forum-index-header > .section-inner,
    .forum-board-header > .section-inner,
    .thread-page-header > .section-inner {
        width: min(calc(100% - 56px), var(--content-width));
    }
}
/* ==========================================================================
   Shared Member Sidebar — Mobile Drawer
   ========================================================================== */

/* Desktop/tablet defaults: shared sidebar remains part of the page layout. */
.member-sidebar-mobile-toggle,
.member-sidebar-mobile-header,
.member-sidebar-backdrop {
    display: none;
}

@media (max-width: 880px) {
    /*
     * The normal sidebar column becomes a mobile drawer. The opener remains
     * in the page flow wherever the shared sidebar include is used, including
     * the logged-in index/homepage and forum/member pages.
     */
    .member-sidebar-mobile-toggle {
        width: 100%;
        min-height: 46px;

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

        gap: 9px;

        margin: 0 0 18px;
        padding: 11px 16px;

        border: 1px solid rgba(196, 161, 90, 0.48);
        border-radius: 4px;

        background: linear-gradient(180deg, rgba(54, 31, 60, 0.98), rgba(31, 17, 36, 0.98));

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

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

        letter-spacing: 0.06em;
        text-transform: uppercase;

        cursor: pointer;
    }

    .member-sidebar-mobile-toggle:hover,
    .member-sidebar-mobile-toggle:focus-visible {
        border-color: rgba(219, 193, 125, 0.78);

        background: linear-gradient(180deg, rgba(67, 38, 74, 0.99), rgba(38, 20, 44, 0.99));

        outline: none;
    }

    /*
     * Backdrop begins beneath the fixed site header so the global navigation
     * remains available while the sidebar is open.
     */
    .member-sidebar-backdrop {
        position: fixed;

        top: var(--header-height);
        right: 0;
        bottom: 0;
        left: 0;

        z-index: 1390;

        display: block;

        background: rgba(5, 2, 7, 0.72);

        opacity: 0;

        transition: opacity 0.2s ease;
    }

    .member-sidebar-backdrop[hidden] {
        display: none;
    }

    .member-sidebar-backdrop.is-visible {
        opacity: 1;
    }

    /*
     * Full-height off-canvas sidebar. It is completely outside the viewport
     * until the shared sidebar script adds .is-mobile-open.
     */
    .member-sidebar {
        position: fixed;

        top: var(--header-height);
        left: 0;
        bottom: 0;

        z-index: 1400;

        width: min(88vw, 330px);

        max-width: 330px;
        height: calc(100dvh - var(--header-height));

        display: grid;
        grid-template-columns: 1fr;
        align-content: start;

        gap: 14px;

        margin: 0;
        padding: 0 14px 22px;

        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;

        background: linear-gradient(180deg, #1a0d1f 0%, #120815 100%);

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

        box-shadow: 20px 0 55px rgba(0, 0, 0, 0.58);

        transform: translateX(-105%);

        visibility: hidden;

        transition:
            transform 0.22s ease,
            visibility 0s linear 0.22s;
    }

    .member-sidebar.is-mobile-open {
        transform: translateX(0);

        visibility: visible;

        transition:
            transform 0.22s ease,
            visibility 0s linear 0s;
    }

    .member-sidebar-mobile-header {
        position: sticky;

        top: 0;
        z-index: 4;

        min-height: 52px;

        display: flex;
        align-items: center;
        justify-content: space-between;

        gap: 14px;

        margin: 0 -14px 2px;

        padding: 11px 14px;

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

        background: rgba(24, 12, 29, 0.99);

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

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

        letter-spacing: 0.1em;
        text-transform: uppercase;
    }

    .member-sidebar-mobile-close {
        width: 34px;
        height: 34px;

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

        flex: 0 0 34px;

        padding: 0;

        border: 1px solid rgba(196, 161, 90, 0.42);
        border-radius: 4px;

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

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

        font: inherit;
        font-size: 24px;
        font-weight: 400;
        line-height: 1;

        cursor: pointer;
    }

    .member-sidebar-mobile-close:hover,
    .member-sidebar-mobile-close:focus-visible {
        border-color: rgba(219, 193, 125, 0.76);

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

        outline: none;
    }

    /*
     * Keep the page beneath the drawer stationary while the member sidebar
     * is open.
     */
    body.member-sidebar-open {
        overflow: hidden;
    }

    /*
     * The main content should begin directly after the opener rather than
     * retaining desktop/sidebar spacing.
     */
    .member-home-main {
        margin-top: 0;
        min-width: 0;
    }
}

@media (prefers-reduced-motion: reduce) and (max-width: 880px) {
    .member-sidebar,
    .member-sidebar-backdrop {
        transition: none;
    }
}
/* ==========================================================================
   Mobile Main Navigation Layering
   ========================================================================== */

/*
 * The global site header/navigation must remain above member-page drawers,
 * backdrops, and page content at all times.
 */
.site-header {
    z-index: 3000;
}

@media (max-width: 760px) {
    .primary-menu {
        z-index: 3100;
    }

    .member-sidebar {
        z-index: 2400;
    }

    .member-sidebar-backdrop {
        z-index: 2300;
    }
}
/* ==========================================================================
   Mobile Navigation — Allow Dropdown Outside Header
   ========================================================================== */

.site-header,
.header-inner,
.site-navigation {
    overflow: visible;
}

@media (max-width: 760px) {
    .site-header {
        z-index: 3000;
    }

    .site-navigation {
        z-index: 3050;
    }

    .primary-menu,
    .primary-menu.is-open {
        z-index: 3100;
    }
}
/* ==========================================================================
   Shared Member Sidebar — Mobile Polish
   ========================================================================== */

@media (max-width: 880px) {
    .member-sidebar {
        width: min(82vw, 300px);

        max-width: 300px;

        gap: 10px;

        padding: 0 10px 16px;

        box-shadow: 18px 0 42px rgba(0, 0, 0, 0.52);
    }

    .member-sidebar-mobile-header {
        min-height: 44px;

        margin: 0 -10px 0;

        padding: 8px 10px;

        font-size: 11px;

        letter-spacing: 0.08em;
    }

    .member-sidebar-mobile-close {
        width: 30px;
        height: 30px;

        flex-basis: 30px;

        font-size: 20px;
    }

    .sidebar-panel {
        border-radius: 4px;

        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
    }

    .sidebar-titlebar {
        min-height: 40px;

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

    .sidebar-titlebar h2 {
        padding: 9px 10px 8px 12px;

        font-size: 14px;
        line-height: 1.35;

        letter-spacing: 0.02em;
    }

    .sidebar-collapse-toggle {
        width: 38px;
        min-height: 38px;
    }

    .sidebar-toggle-mark {
        font-size: 18px;
    }

    .sidebar-panel-content,
    .sidebar-profile-details {
        padding: 10px 12px 11px;
    }

    .sidebar-profile-details p,
    .sidebar-user-points p,
    .sidebar-class-year {
        margin: 0 0 7px;

        font-size: 13px;
        line-height: 1.45;
    }

    .sidebar-user-points {
        gap: 5px;
    }

    .sidebar-link-list a {
        min-height: 36px;

        display: flex;
        align-items: center;

        padding: 8px 12px;

        font-size: 13px;
        line-height: 1.35;
    }

    .sidebar-link-list a:hover,
    .sidebar-link-list a:focus-visible {
        padding-left: 14px;
    }

    .sidebar-forum-main-link {
        min-height: 36px;

        display: flex;
        align-items: center;

        padding: 8px 12px;

        font-size: 12.5px;
        line-height: 1.35;
    }

    .sidebar-forum-main-link:hover,
    .sidebar-forum-main-link:focus-visible {
        padding-left: 14px;
    }

    .sidebar-forum-empty {
        margin: 0;
        padding: 4px 0;

        font-size: 12px;
        line-height: 1.4;
    }

    .member-sidebar-mobile-toggle {
        min-height: 42px;

        margin-bottom: 14px;

        padding: 9px 14px;

        font-size: 12px;
    }
}

@media (max-width: 420px) {
    .member-sidebar {
        width: min(84vw, 290px);

        max-width: 290px;
    }
}
/* ==========================================================================
   Shared Member Sidebar — Mobile Full Content + Opaque Overlay
   ========================================================================== */

@media (max-width: 880px) {
    /*
     * Nothing behind the open sidebar should show through.
     */
    .member-sidebar-backdrop {
        background: rgba(5, 2, 7, 0.62) !important;
        opacity: 0 !important;
    }

    .member-sidebar-backdrop.is-visible {
        opacity: 1;
    }

    .member-sidebar {
        background: #120815;
        opacity: 1;
    }

    .member-sidebar-mobile-header {
        background: #180c1d;
    }

    .sidebar-panel {
        background: #160a1a;
    }

    .sidebar-titlebar {
        background: #211027;
    }

    .sidebar-panel-content,
    .sidebar-profile-details,
    .sidebar-link-list,
    .sidebar-forum-navigation {
        background: #0e0711;
    }

    /*
     * Expanded sidebar sections must size to all of their links/content.
     * These overrides remove any inherited sizing/clipping behavior.
     */
    .sidebar-panel {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }

    .sidebar-panel-content:not([hidden]),
    .sidebar-profile-details:not([hidden]),
    .sidebar-link-list:not([hidden]),
    .sidebar-forum-navigation:not([hidden]) {
        display: grid !important;

        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        grid-auto-rows: max-content !important;
        align-content: start !important;

        overflow: visible !important;
    }

    .sidebar-link-list:not([hidden]) > a,
    .sidebar-forum-navigation:not([hidden]) > *,
    .sidebar-forum-group,
    .sidebar-forum-main-link {
        position: relative;

        width: 100% !important;
        height: auto !important;
        min-height: 36px !important;
        max-height: none !important;

        visibility: visible !important;
        opacity: 1 !important;
    }

    .sidebar-link-list:not([hidden]) > a {
        display: flex !important;
        align-items: center !important;
    }

    .sidebar-forum-navigation:not([hidden]) {
        padding: 6px 0 8px !important;
    }

    .sidebar-forum-group {
        display: block !important;
    }

    /*
     * Only genuinely collapsed sections should disappear.
     */
    .sidebar-panel-content[hidden] {
        display: none !important;
    }

    /* ==========================================================================
   Shared Member Sidebar — Opaque Drawer / Visible Page Backdrop
   ========================================================================== */

    /*
     * The drawer itself stays completely solid.
     */
    .member-sidebar,
    .member-sidebar-mobile-header,
    .sidebar-panel,
    .sidebar-titlebar,
    .sidebar-panel-content,
    .sidebar-profile-details,
    .sidebar-link-list,
    .sidebar-forum-navigation {
        opacity: 1 !important;
    }

    .member-sidebar {
        background: #120815;
    }

    .member-sidebar-mobile-header {
        background: #180c1d !important;
    }

    .sidebar-panel {
        background: #160a1a !important;
    }

    .sidebar-titlebar {
        background: #211027 !important;
    }

    .sidebar-panel-content,
    .sidebar-profile-details,
    .sidebar-link-list,
    .sidebar-forum-navigation {
        background: #0e0711 !important;
    }

    /*
     * The page remains visible behind the drawer through a dim overlay.
     * This darkens it without making it disappear.
     */
    .member-sidebar-backdrop {
        background: rgba(5, 2, 7, 0.62) !important;
    }

    .member-sidebar-backdrop.is-visible {
        opacity: 1 !important;
    }
}
/* ==========================================================================
   Shared Member Sidebar — Stacking + Full Mobile Content Fix
   ========================================================================== */

@media (max-width: 880px) {
    /*
     * Keep the drawer above hero artwork and decorative pseudo-elements.
     */
    .member-home-layout,
    .forum-index-layout,
    .forum-board-layout,
    .forum-thread-layout {
        isolation: auto !important;
        transform: none !important;
        filter: none !important;
        perspective: none !important;
    }

    .member-sidebar {
        z-index: 5000 !important;

        background: #120815;
        background-image: none;

        opacity: 1;
    }

    .member-sidebar::before {
        content: '';

        position: fixed;
        inset: var(--header-height) auto 0 0;

        z-index: -1;

        width: min(82vw, 300px);

        background: #120815;
        pointer-events: none;
    }

    .member-sidebar-backdrop {
        z-index: 4900 !important;
    }

    /*
     * Expanded panels must show every direct child/link. No clipping,
     * grid-row limits, or inherited animation sizing on mobile.
     */
    .member-sidebar .sidebar-panel {
        overflow: visible !important;
    }

    .member-sidebar .sidebar-panel-content:not([hidden]),
    .member-sidebar .sidebar-profile-details:not([hidden]),
    .member-sidebar .sidebar-link-list:not([hidden]),
    .member-sidebar .sidebar-forum-navigation:not([hidden]) {
        display: block;

        height: auto;
        min-height: max-content !important;
        max-height: none;

        overflow: visible;

        clip: auto;
        clip-path: none;

        contain: none;
    }

    .member-sidebar .sidebar-link-list:not([hidden]) > a,
    .member-sidebar .sidebar-forum-navigation:not([hidden]) > .sidebar-forum-group,
    .member-sidebar .sidebar-forum-group > a {
        display: flex;

        position: static;

        width: 100%;
        height: auto;
        min-height: 38px;
        max-height: none;

        visibility: visible;
        opacity: 1;

        overflow: visible !important;

        transform: none !important;
    }

    .member-sidebar .sidebar-panel-content[hidden] {
        display: none;
    }

    /* ==========================================================================
   Shared Member Sidebar — Mobile Natural Flow Fix
   ========================================================================== */

    /*
     * IMPORTANT:
     * Do not use CSS Grid for the open mobile drawer. A fixed-height grid
     * shrinks its implicit rows and causes expanded sidebar panels to lose
     * links. Normal block flow lets every panel use its full content height,
     * while the drawer itself remains independently scrollable.
     */
    .member-sidebar {
        display: block !important;

        height: calc(100dvh - var(--header-height)) !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;

        background: #120815 !important;
        background-image: none !important;

        opacity: 1 !important;
    }

    .member-sidebar-mobile-header {
        margin-bottom: 12px !important;
    }

    .member-sidebar > .sidebar-panel {
        display: block !important;

        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        margin: 0 0 12px !important;

        overflow: visible !important;
    }

    .member-sidebar > .sidebar-panel:last-of-type {
        margin-bottom: 20px !important;
    }

    .member-sidebar .sidebar-panel-content:not([hidden]),
    .member-sidebar .sidebar-profile-details:not([hidden]),
    .member-sidebar .sidebar-link-list:not([hidden]),
    .member-sidebar .sidebar-forum-navigation:not([hidden]) {
        display: block !important;

        position: static !important;

        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        overflow: visible !important;

        clip: auto !important;
        clip-path: none !important;

        contain: none !important;

        visibility: visible !important;
        opacity: 1 !important;

        transform: none !important;
    }

    .member-sidebar .sidebar-link-list:not([hidden]) > a,
    .member-sidebar .sidebar-forum-navigation:not([hidden]) > .sidebar-forum-group,
    .member-sidebar .sidebar-forum-group > a {
        display: flex !important;

        position: static !important;

        width: 100% !important;
        height: auto !important;
        min-height: 38px !important;
        max-height: none !important;

        visibility: visible !important;
        opacity: 1 !important;
    }

    .member-sidebar .sidebar-panel-content[hidden] {
        display: none !important;
    }

    /*
     * Hero framing belongs to the page underneath the drawer. Hide those
     * decorative layers only while the mobile sidebar is open so they cannot
     * paint across the solid drawer.
     */
    body.member-sidebar-open .home-hero::before,
    body.member-sidebar-open .home-hero::after,
    body.member-sidebar-open .member-home-hero::before,
    body.member-sidebar-open .member-home-hero::after,
    body.member-sidebar-open .member-profile-hero::before,
    body.member-sidebar-open .member-profile-hero::after,
    body.member-sidebar-open .forum-index-header::before,
    body.member-sidebar-open .forum-index-header::after,
    body.member-sidebar-open .forum-board-header::before,
    body.member-sidebar-open .forum-board-header::after,
    body.member-sidebar-open .thread-page-header::before,
    body.member-sidebar-open .thread-page-header::after,
    body.member-sidebar-open .hero-ornament {
        visibility: hidden !important;
    }
}
/* ==========================================================================
   Blackthorne Academy — Custom Scrollbars
   ========================================================================== */

/*
 * Firefox
 */
html,
body,
.member-sidebar,
.nav-notification-list,
.forum-admin-modal,
.forum-thread-moderation-modal,
.profile-custom-block-dialog {
    scrollbar-width: thin;
    scrollbar-color: #8f6f3d #140a18;
}

/*
 * Chromium / Safari / Edge
 */
html::-webkit-scrollbar,
body::-webkit-scrollbar,
.member-sidebar::-webkit-scrollbar,
.nav-notification-list::-webkit-scrollbar,
.forum-admin-modal::-webkit-scrollbar,
.forum-thread-moderation-modal::-webkit-scrollbar,
.profile-custom-block-dialog::-webkit-scrollbar {
    width: 11px;
    height: 11px;
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
.member-sidebar::-webkit-scrollbar-track,
.nav-notification-list::-webkit-scrollbar-track,
.forum-admin-modal::-webkit-scrollbar-track,
.forum-thread-moderation-modal::-webkit-scrollbar-track,
.profile-custom-block-dialog::-webkit-scrollbar-track {
    background: #140a18;
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
.member-sidebar::-webkit-scrollbar-thumb,
.nav-notification-list::-webkit-scrollbar-thumb,
.forum-admin-modal::-webkit-scrollbar-thumb,
.forum-thread-moderation-modal::-webkit-scrollbar-thumb,
.profile-custom-block-dialog::-webkit-scrollbar-thumb {
    border: 2px solid #140a18;

    border-radius: 999px;

    background: linear-gradient(180deg, #a88546 0%, #7f6236 100%);
}

html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover,
.member-sidebar::-webkit-scrollbar-thumb:hover,
.nav-notification-list::-webkit-scrollbar-thumb:hover,
.forum-admin-modal::-webkit-scrollbar-thumb:hover,
.forum-thread-moderation-modal::-webkit-scrollbar-thumb:hover,
.profile-custom-block-dialog::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #c2a15b 0%, #92713d 100%);
}

html::-webkit-scrollbar-corner,
body::-webkit-scrollbar-corner,
.member-sidebar::-webkit-scrollbar-corner,
.nav-notification-list::-webkit-scrollbar-corner,
.forum-admin-modal::-webkit-scrollbar-corner,
.forum-thread-moderation-modal::-webkit-scrollbar-corner,
.profile-custom-block-dialog::-webkit-scrollbar-corner {
    background: #140a18;
}

/*
 * Slightly narrower on small screens so the drawer scrollbar does not
 * take unnecessary horizontal space.
 */
@media (max-width: 880px) {
    .member-sidebar {
        scrollbar-width: thin;
    }

    .member-sidebar::-webkit-scrollbar {
        width: 8px;
    }

    .member-sidebar::-webkit-scrollbar-thumb {
        border-width: 1px;
    }
}

/* --------------------------------------------------------------------------
   Profile Edit — Bookmark Controls
   -------------------------------------------------------------------------- */

.profile-bookmark-form-actions {
    align-items: center;
    gap: 14px;
    margin-top: 8px;
    padding-top: 18px;
    border-top: 1px solid rgba(219, 193, 125, 0.14);
}

.profile-bookmark-form-actions .button {
    min-width: 170px;
    min-height: 46px;
    padding: 11px 20px;
    border-radius: 7px;
}

.profile-bookmark-form-actions .button-primary {
    border: 1px solid rgba(240, 221, 166, 0.72);
    background: linear-gradient(180deg, rgba(202, 164, 82, 0.98), rgba(158, 117, 44, 0.98));
    color: #160b18;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16);
}

.profile-bookmark-form-actions .button-primary:hover,
.profile-bookmark-form-actions .button-primary:focus-visible {
    background: linear-gradient(180deg, rgba(226, 193, 112, 0.99), rgba(181, 137, 52, 0.99));
    border-color: rgba(255, 240, 196, 0.9);
}

.profile-bookmark-open-button {
    border-color: rgba(135, 86, 148, 0.5);
    background: linear-gradient(180deg, rgba(68, 39, 78, 0.72), rgba(42, 22, 50, 0.78));
}

.profile-bookmark-open-button:hover,
.profile-bookmark-open-button:focus-visible {
    border-color: rgba(219, 193, 125, 0.52);
    background: linear-gradient(180deg, rgba(83, 48, 95, 0.82), rgba(51, 27, 60, 0.88));
}

.profile-bookmark-list {
    margin-top: 22px;
    padding-top: 0;
}

.profile-bookmark-entry {
    padding: 24px 0;
}

.profile-bookmark-item-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
    align-items: center;
    margin-top: 18px;
}

.profile-bookmark-item-actions .button {
    min-width: 104px;
    min-height: 42px;
    padding: 9px 16px;
    border-radius: 6px;
    text-align: center;
}

.profile-bookmark-edit-button {
    border-color: rgba(219, 193, 125, 0.34);
    background: rgba(196, 161, 90, 0.07);
}

.profile-bookmark-edit-button:hover,
.profile-bookmark-edit-button:focus-visible {
    border-color: rgba(219, 193, 125, 0.62);
    background: rgba(196, 161, 90, 0.13);
}

.profile-bookmark-delete-button {
    border-color: rgba(156, 78, 96, 0.46);
    background: rgba(84, 35, 48, 0.34);
    color: #f0d9df;
}

.profile-bookmark-delete-button:hover,
.profile-bookmark-delete-button:focus-visible {
    border-color: rgba(199, 104, 126, 0.7);
    background: rgba(104, 43, 58, 0.48);
    color: #fff0f4;
}

@media (max-width: 700px) {
    .profile-bookmark-form-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .profile-bookmark-form-actions .button,
    .profile-bookmark-item-actions .button {
        width: 100%;
        min-width: 0;
    }

    .profile-bookmark-item-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
}

@media (max-width: 460px) {
    .profile-bookmark-item-actions {
        grid-template-columns: 1fr;
    }
}

/* --------------------------------------------------------------------------
   Profile Edit — Page Navigation & Save Actions
   -------------------------------------------------------------------------- */

.profile-edit-top-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}

.profile-action-button {
    min-height: 44px;
    min-width: 160px;
    padding: 10px 20px;
    border: 1px solid transparent;
    border-radius: 7px;
    text-align: center;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-decoration: none;
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.profile-action-button:hover,
.profile-action-button:focus-visible {
    transform: translateY(-1px);
}

.profile-action-save {
    border-color: rgba(244, 224, 163, 0.8);
    background: linear-gradient(180deg, rgba(207, 171, 88, 0.99), rgba(158, 118, 46, 0.99));
    color: #170b18;
    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(255, 247, 214, 0.2);
}

.profile-action-save:hover,
.profile-action-save:focus-visible {
    border-color: rgba(255, 242, 197, 0.96);
    background: linear-gradient(180deg, rgba(229, 197, 116, 1), rgba(180, 138, 54, 1));
    color: #120813;
    box-shadow:
        0 10px 24px rgba(0, 0, 0, 0.22),
        0 0 0 3px rgba(203, 164, 77, 0.09);
}

.profile-action-profile {
    border-color: rgba(207, 171, 88, 0.44);
    background: linear-gradient(180deg, rgba(75, 43, 85, 0.88), rgba(45, 24, 53, 0.94));
    color: #f1dfb1;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.14);
}

.profile-action-profile:hover,
.profile-action-profile:focus-visible {
    border-color: rgba(225, 195, 119, 0.72);
    background: linear-gradient(180deg, rgba(91, 52, 103, 0.96), rgba(55, 29, 64, 0.98));
    color: #fff1c9;
    box-shadow:
        0 9px 22px rgba(0, 0, 0, 0.18),
        0 0 0 3px rgba(116, 70, 128, 0.1);
}

.profile-action-dashboard {
    border-color: rgba(142, 115, 146, 0.34);
    background: linear-gradient(180deg, rgba(37, 25, 42, 0.9), rgba(25, 16, 30, 0.96));
    color: #cfc2d0;
}

.profile-action-dashboard:hover,
.profile-action-dashboard:focus-visible {
    border-color: rgba(188, 154, 194, 0.52);
    background: linear-gradient(180deg, rgba(48, 31, 54, 0.96), rgba(30, 19, 35, 0.99));
    color: #eee3ef;
}

.profile-page-actions {
    align-items: center;
    gap: 12px;
    padding-top: 20px;
    border-top: 1px solid rgba(219, 193, 125, 0.12);
}

@media (max-width: 560px) {
    .profile-edit-top-actions {
        display: grid;
        grid-template-columns: 1fr;
        margin-top: 20px;
    }

    .profile-edit-top-actions .profile-action-button,
    .profile-page-actions .profile-action-button {
        width: 100%;
        min-width: 0;
    }
}

/* --------------------------------------------------------------------------
   Forum YouTube Embeds
   -------------------------------------------------------------------------- */

.forum-youtube-embed {
    position: relative;
    width: min(100%, 900px);
    aspect-ratio: 16 / 9;
    margin: 18px 0;
    overflow: hidden;
    border: 1px solid rgba(203, 164, 77, 0.34);
    border-radius: 10px;
    background: rgba(10, 7, 12, 0.9);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2);
}

.forum-youtube-embed iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.forum-rich-editor-surface a[title^='blackthorne-youtube:'] {
    display: block;
    margin: 12px 0;
    padding: 12px 14px;
    border: 1px solid rgba(203, 164, 77, 0.32);
    border-radius: 8px;
    background: rgba(69, 39, 79, 0.38);
    color: #ead7a2;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.forum-rich-editor-surface a[title^='blackthorne-youtube:']::before {
    content: 'YouTube Embed';
    display: block;
    margin-bottom: 4px;
    color: #f0dfad;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.forum-editor-youtube-tool {
    border-color: rgba(203, 164, 77, 0.3);
}

@media (max-width: 700px) {
    .forum-youtube-embed {
        width: 100%;
        margin: 14px 0;
        border-radius: 8px;
    }
}

/* =========================================================
   SORTING CEREMONY — STUDENT EXPERIENCE
   ========================================================= */
.sorting-page {
    --sorting-gold: #c9ab68;
    --sorting-gold-bright: #e4cf98;
    --sorting-plum: #6f4578;
    --sorting-plum-deep: #2a182f;
    --sorting-ink: #0d0910;
    --sorting-panel: rgba(20, 13, 24, 0.93);
    --sorting-border: rgba(201, 171, 104, 0.38);
    --sorting-text: #f2eaf1;
    --sorting-muted: rgba(237, 225, 237, 0.74);
    --house-primary: #5b355f;
    --house-secondary: #2b182f;
    --house-accent: #c7a55b;
    --house-highlight: #e3d2ae;
    --house-dark: #100b13;

    min-height: 82vh;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    color: var(--sorting-text);
    background:
        radial-gradient(circle at 50% 8%, rgba(132, 82, 143, 0.2), transparent 26rem),
        radial-gradient(circle at 14% 28%, rgba(201, 171, 104, 0.07), transparent 18rem),
        radial-gradient(circle at 86% 74%, rgba(94, 53, 103, 0.14), transparent 22rem),
        linear-gradient(180deg, #0b080d 0%, #140d18 45%, #0b080e 100%);
}

/* Subtle star / dust field. Pure CSS so there are no extra image assets. */
.sorting-page::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    opacity: 0.58;
    background-image:
        radial-gradient(circle, rgba(232, 211, 157, 0.7) 0 1px, transparent 1.4px),
        radial-gradient(circle, rgba(190, 155, 201, 0.46) 0 1px, transparent 1.4px),
        radial-gradient(circle, rgba(255, 255, 255, 0.28) 0 0.7px, transparent 1.1px);
    background-size:
        92px 92px,
        137px 137px,
        61px 61px;
    background-position:
        0 0,
        23px 41px,
        11px 19px;
    mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
}

/* Large atmospheric glow behind the ritual frame. */
.sorting-page::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 46%;
    z-index: -1;
    width: min(76vw, 820px);
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    pointer-events: none;
    opacity: 0.34;
    filter: blur(34px);
    background:
        radial-gradient(circle, rgba(112, 67, 122, 0.26) 0 20%, transparent 58%),
        conic-gradient(
            from 20deg,
            transparent,
            rgba(201, 171, 104, 0.09),
            transparent 28%,
            rgba(106, 66, 116, 0.12),
            transparent 63%,
            rgba(201, 171, 104, 0.08),
            transparent
        );
    animation: sortingAtmosphere 18s linear infinite;
}

@keyframes sortingAtmosphere {
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

.sorting-stage {
    width: min(940px, calc(100% - 2rem));
    margin: 0 auto;
    padding: clamp(3rem, 7vw, 6rem) 0;
    position: relative;
    z-index: 1;
}

.sorting-panel {
    position: relative;
    overflow: hidden;
    padding: clamp(1.7rem, 5vw, 3.6rem);
    border: 1px solid rgba(207, 177, 108, 0.44);
    border-radius: 26px;
    background: linear-gradient(145deg, rgba(39, 24, 44, 0.93), rgba(15, 10, 18, 0.97) 58%), var(--sorting-panel);
    box-shadow:
        0 30px 90px rgba(0, 0, 0, 0.48),
        0 0 0 1px rgba(255, 255, 255, 0.018) inset,
        0 0 54px rgba(91, 53, 101, 0.09);
}

/* Double-line ritual border. */
.sorting-panel::before {
    content: '';
    position: absolute;
    inset: 10px;
    border: 1px solid rgba(209, 181, 112, 0.14);
    border-radius: 18px;
    pointer-events: none;
}

/* Faint magical geometry that makes the card feel ceremonial, not form-like. */
.sorting-panel::after {
    content: '';
    position: absolute;
    left: 50%;
    top: -180px;
    width: 430px;
    height: 430px;
    transform: translateX(-50%) rotate(45deg);
    border: 1px solid rgba(201, 171, 104, 0.07);
    box-shadow:
        0 0 0 34px rgba(201, 171, 104, 0.025),
        0 0 0 68px rgba(115, 72, 124, 0.02);
    pointer-events: none;
}

.sorting-center {
    text-align: center;
}

.sorting-overline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin: 0 0 1rem;
    color: var(--sorting-gold-bright);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-size: 0.74rem;
    font-weight: 700;
}

.sorting-overline::before,
.sorting-overline::after {
    content: '';
    width: clamp(28px, 7vw, 68px);
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(201, 171, 104, 0.65));
}

.sorting-overline::after {
    transform: scaleX(-1);
}

.sorting-page h1,
.sorting-page h2 {
    margin: 0;
    color: #f7eef6;
    font-family: var(--font-heading, Georgia, serif);
    line-height: 1.12;
    text-wrap: balance;
}

.sorting-page h1 {
    font-size: clamp(2.15rem, 5vw, 4.25rem);
    text-shadow: 0 3px 28px rgba(120, 76, 130, 0.18);
}

.sorting-page h2 {
    font-size: clamp(1.7rem, 4vw, 2.7rem);
}

.sorting-intro-copy,
.sorting-question-prelude,
.sorting-interlude-body,
.sorting-reveal-copy {
    max-width: 700px;
    margin: 1.35rem auto 0;
    color: var(--sorting-muted);
    font-size: clamp(1rem, 2.1vw, 1.12rem);
    line-height: 1.8;
    white-space: pre-line;
}

.sorting-intro-copy {
    position: relative;
    padding: 1.15rem 1.2rem 0;
}

.sorting-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.8rem;
    margin-top: 2rem;
}

.sorting-page .button-primary {
    position: relative;
    overflow: hidden;
    box-shadow:
        0 8px 26px rgba(0, 0, 0, 0.24),
        0 0 20px rgba(201, 171, 104, 0.07);
}

.sorting-page .button-primary::after {
    content: '';
    position: absolute;
    inset: 0;
    transform: translateX(-120%);
    background: linear-gradient(110deg, transparent 20%, rgba(255, 255, 255, 0.13) 47%, transparent 74%);
    transition: transform 0.6s ease;
}

.sorting-page .button-primary:hover::after,
.sorting-page .button-primary:focus-visible::after {
    transform: translateX(120%);
}

.sorting-error {
    max-width: 920px;
    margin: 1rem auto 0;
    padding: 0.9rem 1rem;
    border: 1px solid rgba(187, 91, 102, 0.5);
    border-radius: 12px;
    background: rgba(94, 38, 48, 0.3);
    color: #f1d6d9;
}

.sorting-progress-wrap {
    position: relative;
    margin-bottom: 2.15rem;
    padding-bottom: 0.45rem;
}

.sorting-progress-meta {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.7rem;
    color: rgba(235, 221, 235, 0.67);
    font-size: 0.8rem;
    letter-spacing: 0.025em;
}

.sorting-progress-track {
    height: 5px;
    border: 1px solid rgba(201, 171, 104, 0.12);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.035);
    overflow: visible;
}

.sorting-progress-fill {
    position: relative;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #66406e, #b28b58 72%, #e5ce91);
    box-shadow: 0 0 16px rgba(201, 171, 104, 0.25);
}

.sorting-progress-fill::after {
    content: '';
    position: absolute;
    right: -4px;
    top: 50%;
    width: 9px;
    height: 9px;
    transform: translateY(-50%) rotate(45deg);
    border: 1px solid rgba(241, 219, 158, 0.9);
    background: #9f7e50;
    box-shadow: 0 0 12px rgba(225, 196, 128, 0.42);
}

.sorting-question-prelude {
    position: relative;
    max-width: 650px;
    margin-bottom: 1.45rem;
    padding: 0.75rem 1rem;
    color: rgba(226, 207, 229, 0.81);
    font-family: var(--font-heading, Georgia, serif);
    font-style: italic;
    text-align: center;
}

.sorting-question-prelude::before {
    content: '✦';
    display: block;
    margin-bottom: 0.35rem;
    color: rgba(201, 171, 104, 0.74);
    font-size: 0.8rem;
    font-style: normal;
}

.sorting-question-prompt {
    position: relative;
    max-width: 770px;
    margin: 0 auto 2rem;
    padding: 0.35rem 0 0.4rem;
    text-align: center;
}

/* Intentionally specific so the general ceremony H1 cannot make questions huge. */
.sorting-page .sorting-question-prompt h1 {
    margin: 0;
    font-size: clamp(1.42rem, 2.15vw, 1.82rem);
    line-height: 1.38;
    font-weight: 600;
    letter-spacing: 0.005em;
    text-shadow: 0 2px 22px rgba(118, 76, 126, 0.16);
}

.sorting-answer-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
    margin-top: 1.8rem;
}

.sorting-answer {
    position: relative;
    display: block;
}

.sorting-answer input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.sorting-answer-box {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 78px;
    height: 100%;
    padding: 1rem 1.1rem 1rem 3.15rem;
    border: 1px solid rgba(201, 171, 104, 0.18);
    border-radius: 13px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0.008)), rgba(18, 12, 21, 0.54);
    color: #f0e8ef;
    line-height: 1.5;
    cursor: pointer;
    transition:
        border-color 0.2s ease,
        background 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.sorting-answer-box::before {
    content: '';
    position: absolute;
    left: 1.15rem;
    top: 50%;
    width: 15px;
    height: 15px;
    transform: translateY(-50%) rotate(45deg);
    border: 1px solid rgba(201, 171, 104, 0.55);
    background: rgba(11, 8, 13, 0.72);
    box-shadow: inset 0 0 0 3px rgba(23, 14, 27, 0.9);
    transition:
        transform 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;
}

.sorting-answer-box::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(110deg, transparent, rgba(201, 171, 104, 0.07), transparent);
    transition: opacity 0.2s ease;
}

.sorting-answer:hover .sorting-answer-box {
    transform: translateY(-2px);
    border-color: rgba(201, 171, 104, 0.46);
    background: rgba(201, 171, 104, 0.045);
    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.18),
        0 0 22px rgba(104, 67, 113, 0.07);
}

.sorting-answer:hover .sorting-answer-box::after {
    opacity: 1;
}

.sorting-answer input:focus-visible + .sorting-answer-box {
    outline: 2px solid #d8bd7b;
    outline-offset: 3px;
}

.sorting-answer input:checked + .sorting-answer-box {
    border-color: rgba(219, 190, 120, 0.72);
    background: linear-gradient(135deg, rgba(112, 70, 122, 0.22), rgba(201, 171, 104, 0.055)), rgba(21, 13, 24, 0.78);
    box-shadow:
        0 0 28px rgba(118, 78, 126, 0.14),
        inset 0 0 26px rgba(201, 171, 104, 0.025);
}

.sorting-answer input:checked + .sorting-answer-box::before {
    transform: translateY(-50%) rotate(45deg) scale(0.86);
    background: var(--sorting-gold);
    box-shadow: 0 0 14px rgba(201, 171, 104, 0.48);
}

.sorting-submit {
    width: 100%;
    margin-top: 1.6rem;
}

.sorting-submit .button {
    min-width: 210px;
}

/* ---------- Interludes ---------- */
.sorting-interlude {
    text-align: center;
}

.sorting-interlude .sorting-panel {
    background:
        radial-gradient(circle at 50% 35%, rgba(110, 69, 120, 0.13), transparent 17rem),
        linear-gradient(150deg, rgba(35, 21, 40, 0.95), rgba(13, 9, 16, 0.98));
}

.sorting-interlude-inner {
    position: relative;
    z-index: 1;
    max-width: 700px;
    margin: 0 auto;
}

.sorting-interlude-symbol {
    position: relative;
    width: 94px;
    height: 94px;
    margin: 0 auto 1.7rem;
    border: 1px solid rgba(201, 171, 104, 0.35);
    border-radius: 50%;
    box-shadow:
        0 0 42px rgba(201, 171, 104, 0.09),
        inset 0 0 26px rgba(100, 60, 110, 0.12);
}

.sorting-interlude-symbol::before {
    content: '✦';
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #d9bd78;
    font-size: 1.55rem;
    text-shadow: 0 0 18px rgba(201, 171, 104, 0.45);
}

.sorting-interlude-symbol::after {
    content: '';
    position: absolute;
    inset: 10px;
    border: 1px solid rgba(201, 171, 104, 0.22);
    transform: rotate(45deg);
    animation: sortingRuneTurn 12s linear infinite;
}

@keyframes sortingRuneTurn {
    to {
        transform: rotate(405deg);
    }
}

.sorting-animation-fade .sorting-interlude-inner {
    animation: sortingFade 1.8s ease both;
}

.sorting-animation-reveal .sorting-interlude-inner {
    animation: sortingReveal 1.5s ease both;
}

.sorting-animation-glow .sorting-interlude-symbol {
    animation: sortingGlow 2.2s ease-in-out infinite alternate;
}

.sorting-animation-whisper .sorting-interlude-body {
    animation: sortingWhisper 2.1s ease both;
}

@keyframes sortingFade {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes sortingReveal {
    from {
        opacity: 0;
        transform: translateY(16px);
        filter: blur(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

@keyframes sortingGlow {
    from {
        box-shadow:
            0 0 20px rgba(201, 171, 104, 0.08),
            inset 0 0 18px rgba(104, 64, 114, 0.08);
    }
    to {
        box-shadow:
            0 0 55px rgba(201, 171, 104, 0.3),
            inset 0 0 30px rgba(104, 64, 114, 0.15);
    }
}

@keyframes sortingWhisper {
    0% {
        opacity: 0;
        letter-spacing: 0.05em;
        filter: blur(2px);
    }
    100% {
        opacity: 1;
        letter-spacing: normal;
        filter: blur(0);
    }
}

/* ---------- The Choosing ---------- */
.sorting-choosing::after {
    opacity: 0.48;
}

.sorting-choosing .sorting-panel {
    border-color: rgba(219, 190, 120, 0.55);
    box-shadow:
        0 30px 90px rgba(0, 0, 0, 0.52),
        0 0 58px rgba(135, 87, 145, 0.13),
        inset 0 0 52px rgba(201, 171, 104, 0.025);
}

.sorting-choosing-mark {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.15rem;
    color: #dcc37f;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    text-align: center;
}

.sorting-choosing-mark::before,
.sorting-choosing-mark::after {
    content: '◇';
    color: rgba(201, 171, 104, 0.58);
    font-size: 0.8rem;
}

/* ---------- House Reveal ---------- */
.sorting-reveal {
    background:
        radial-gradient(
            circle at 50% 17%,
            color-mix(in srgb, var(--house-primary) 34%, transparent),
            transparent 28rem
        ),
        radial-gradient(circle at 50% 72%, color-mix(in srgb, var(--house-accent) 10%, transparent), transparent 28rem),
        linear-gradient(180deg, color-mix(in srgb, var(--house-dark) 93%, #09070a), #09070b);
}

.sorting-reveal::after {
    background:
        radial-gradient(circle, color-mix(in srgb, var(--house-primary) 33%, transparent) 0 18%, transparent 56%),
        conic-gradient(
            from 0deg,
            transparent,
            color-mix(in srgb, var(--house-accent) 12%, transparent),
            transparent 22%,
            color-mix(in srgb, var(--house-primary) 12%, transparent),
            transparent 58%,
            color-mix(in srgb, var(--house-accent) 10%, transparent),
            transparent
        );
}

.sorting-reveal .sorting-panel {
    border-color: color-mix(in srgb, var(--house-accent) 58%, transparent);
    background:
        radial-gradient(
            circle at 50% 18%,
            color-mix(in srgb, var(--house-primary) 15%, transparent),
            transparent 17rem
        ),
        linear-gradient(155deg, color-mix(in srgb, var(--house-secondary) 72%, #151017), var(--house-dark));
    box-shadow:
        0 34px 100px rgba(0, 0, 0, 0.55),
        0 0 70px color-mix(in srgb, var(--house-primary) 12%, transparent),
        inset 0 0 54px color-mix(in srgb, var(--house-accent) 3%, transparent);
}

.sorting-crest-wrap {
    position: relative;
    display: grid;
    place-items: center;
    width: min(390px, 76vw);
    min-height: 300px;
    margin: -0.5rem auto 0.4rem;
    isolation: isolate;
    background: transparent !important;
}

.sorting-crest-aura {
    position: absolute;
    z-index: -1;
    width: 78%;
    aspect-ratio: 1;
    border-radius: 50%;
    background:
        radial-gradient(circle, color-mix(in srgb, var(--house-primary) 38%, transparent), transparent 64%),
        conic-gradient(
            from 0deg,
            transparent 0 14%,
            color-mix(in srgb, var(--house-accent) 20%, transparent) 18%,
            transparent 24% 48%,
            color-mix(in srgb, var(--house-highlight) 14%, transparent) 52%,
            transparent 58% 82%,
            color-mix(in srgb, var(--house-accent) 17%, transparent) 86%,
            transparent 92%
        );
    filter: blur(5px);
    animation: sortingAuraTurn 18s linear infinite;
}

@keyframes sortingAuraTurn {
    to {
        transform: rotate(360deg);
    }
}

.sorting-crest {
    display: block;
    width: min(310px, 68vw);
    max-height: 310px;
    object-fit: contain;
    object-position: center;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    filter: drop-shadow(0 20px 34px rgba(0, 0, 0, 0.55))
        drop-shadow(0 0 16px color-mix(in srgb, var(--house-accent) 20%, transparent));
    animation: sortingCrestReveal 1.45s cubic-bezier(0.2, 0.78, 0.2, 1) both;
}

@keyframes sortingCrestReveal {
    from {
        opacity: 0;
        transform: scale(0.72) translateY(10px);
        filter: blur(6px) drop-shadow(0 8px 16px rgba(0, 0, 0, 0.2));
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
        filter: blur(0) drop-shadow(0 20px 34px rgba(0, 0, 0, 0.55))
            drop-shadow(0 0 16px color-mix(in srgb, var(--house-accent) 20%, transparent));
    }
}

.sorting-house-name {
    color: var(--house-highlight) !important;
    text-shadow:
        0 0 28px color-mix(in srgb, var(--house-primary) 46%, transparent),
        0 2px 0 rgba(0, 0, 0, 0.28);
}

.sorting-motto {
    max-width: 620px;
    margin: 1rem auto 0;
    color: var(--house-accent);
    font-family: var(--font-heading, Georgia, serif);
    font-size: 1.14rem;
    font-style: italic;
    letter-spacing: 0.015em;
}

.sorting-mascot {
    display: inline-block;
    margin-top: 1.5rem;
    padding: 0.45rem 0.8rem;
    border-top: 1px solid color-mix(in srgb, var(--house-accent) 20%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--house-accent) 20%, transparent);
    color: rgba(238, 229, 238, 0.7);
    font-size: 0.9rem;
}

.sorting-unavailable-icon {
    font-family: var(--font-heading, Georgia, serif);
    font-size: 3rem;
    color: #c9ab68;
    margin-bottom: 1rem;
    text-shadow: 0 0 22px rgba(201, 171, 104, 0.22);
}

@media (prefers-reduced-motion: reduce) {
    .sorting-page *,
    .sorting-page *::before,
    .sorting-page *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

@media (max-width: 760px) {
    .sorting-answer-list {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .sorting-stage {
        width: min(100% - 1rem, 940px);
        padding: 2rem 0 3rem;
    }

    .sorting-panel {
        border-radius: 18px;
        padding: 1.55rem 1rem 1.7rem;
    }

    .sorting-panel::before {
        inset: 7px;
        border-radius: 13px;
    }

    .sorting-page h1 {
        font-size: clamp(1.95rem, 9vw, 3rem);
    }

    .sorting-page .sorting-question-prompt h1 {
        font-size: clamp(1.3rem, 5.4vw, 1.55rem);
    }

    .sorting-answer-box {
        min-height: 64px;
        padding: 0.9rem 0.9rem 0.9rem 2.9rem;
    }

    .sorting-answer-box::before {
        left: 1rem;
    }

    .sorting-progress-meta {
        font-size: 0.75rem;
    }

    .sorting-progress-meta span:last-child {
        display: none;
    }

    .sorting-crest-wrap {
        min-height: 245px;
        width: min(330px, 82vw);
    }

    .sorting-crest {
        width: min(260px, 72vw);
        max-height: 260px;
    }

    .sorting-actions .button,
    .sorting-actions form,
    .sorting-actions form .button,
    .sorting-submit .button {
        width: 100%;
    }
}

/* =========================================================
   ADMIN — SORTING CEREMONY MANAGER
   ========================================================= */
.sorting-admin-page {
    overflow-anchor: none;
}

.sorting-admin-page .sorting-version-grid,
.sorting-admin-page .sorting-content-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.42fr);
    gap: 1.5rem;
    align-items: start;
}

.sorting-admin-page .sorting-card,
.sorting-admin-page .sorting-list-card {
    border: 1px solid rgba(209, 181, 112, 0.22);
    background: rgba(18, 13, 22, 0.84);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.18);
    border-radius: 18px;
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.sorting-admin-page .sorting-card-body {
    padding: 1.35rem;
}

.sorting-admin-page .sorting-status-row,
.sorting-admin-page .sorting-stats,
.sorting-admin-page .sorting-actions,
.sorting-admin-page .sorting-inline-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    align-items: center;
}

.sorting-admin-page .sorting-status,
.sorting-admin-page .sorting-count,
.sorting-admin-page .sorting-lock {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0.28rem 0.65rem;
    border: 1px solid rgba(209, 181, 112, 0.28);
    border-radius: 999px;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
}

.sorting-admin-page .sorting-status-published {
    color: #f0dda0;
    background: rgba(92, 76, 32, 0.28);
}

.sorting-admin-page .sorting-status-draft {
    color: #d9c9e1;
    background: rgba(83, 55, 95, 0.24);
}

.sorting-admin-page .sorting-status-retired,
.sorting-admin-page .sorting-lock {
    color: #cbbfc9;
    background: rgba(70, 63, 71, 0.3);
}

.sorting-admin-page .sorting-version-list,
.sorting-admin-page .sorting-question-list,
.sorting-admin-page .sorting-interlude-list,
.sorting-admin-page .sorting-answer-list {
    display: grid;
    gap: 0.8rem;
}

.sorting-admin-page .sorting-version-item,
.sorting-admin-page .sorting-question-item,
.sorting-admin-page .sorting-interlude-item,
.sorting-admin-page .sorting-answer-item {
    display: block;
    padding: 1rem;
    border: 1px solid rgba(209, 181, 112, 0.14);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.025);
}

.sorting-admin-page .sorting-version-item.is-selected,
.sorting-admin-page .sorting-question-item.is-selected,
.sorting-admin-page .sorting-interlude-item.is-selected {
    border-color: rgba(209, 181, 112, 0.52);
    background: rgba(209, 181, 112, 0.07);
}

.sorting-admin-page .sorting-item-title {
    color: #f2e7cf;
    font-family: var(--font-heading, Georgia, serif);
    font-size: 1.05rem;
    margin: 0 0 0.35rem;
}

.sorting-admin-page .sorting-item-meta,
.sorting-admin-page .sorting-muted {
    color: rgba(232, 222, 231, 0.68);
    font-size: 0.88rem;
    margin: 0;
}

.sorting-admin-page .sorting-field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.sorting-admin-page .sorting-field-grid .form-group.is-wide {
    grid-column: 1 / -1;
}

.sorting-admin-page .sorting-house-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
}

.sorting-admin-page .sorting-house-choice {
    display: flex;
    gap: 0.55rem;
    align-items: center;
    padding: 0.7rem 0.8rem;
    border: 1px solid rgba(209, 181, 112, 0.15);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.025);
}

.sorting-admin-page .sorting-house-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    flex: 0 0 11px;
}

.sorting-admin-page .sorting-danger {
    border-color: rgba(189, 95, 105, 0.45) !important;
}

.sorting-admin-page .sorting-danger-button {
    border-color: rgba(189, 95, 105, 0.48);
    background: linear-gradient(180deg, rgba(106, 48, 58, 0.94), rgba(71, 31, 40, 0.98));
    color: #f2dadd;
}

.sorting-admin-page .sorting-answer-editor {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 190px 100px auto;
    gap: 0.7rem;
    align-items: end;
}

.sorting-admin-page details.sorting-answer-edit {
    margin-top: 0.7rem;
}

.sorting-admin-page details.sorting-answer-edit summary {
    cursor: pointer;
    color: #d8c88c;
}

.sorting-admin-page .sorting-section-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-bottom: 1rem;
}

@media (max-width: 1000px) {
    .sorting-admin-page .sorting-version-grid,
    .sorting-admin-page .sorting-content-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .sorting-admin-page .sorting-field-grid,
    .sorting-admin-page .sorting-house-options,
    .sorting-admin-page .sorting-answer-editor {
        grid-template-columns: 1fr;
    }

    .sorting-admin-page .sorting-actions .button,
    .sorting-admin-page .sorting-actions form,
    .sorting-admin-page .sorting-actions form .button {
        width: 100%;
    }
}

/* ==========================================================================
   2026-09-18 — Member Layout Spacing + Homepage Announcement Refinements
   ========================================================================== */

/*
 * Keep shared sidebar navigation compact. These are navigation links, not
 * large action buttons, so they should read as a tidy list rather than a
 * stack of oversized rows.
 */
.sidebar-link-list {
    gap: 0;
    padding-top: 5px;
    padding-bottom: 5px;
}

.sidebar-link-list a {
    min-height: 0;
    padding-top: 5px;
    padding-bottom: 5px;
    line-height: 1.3;
}

.sidebar-forum-navigation {
    padding-top: 5px;
    padding-bottom: 6px;
}

.sidebar-forum-main-link {
    min-height: 0;
    padding-top: 6px;
    padding-bottom: 6px;
    line-height: 1.3;
}

.sidebar-subforum-link {
    min-height: 0;
    padding-top: 4px;
    padding-bottom: 4px;
}

/*
 * The decorative hero/cover frame sits inside the viewport. At tablet and
 * smaller desktop widths the normal section inset can land almost directly
 * on that frame, so reserve a protected inner gutter before true mobile.
 */
@media (max-width: 1100px) {
    .home-hero-grid,
    .features-hero-inner,
    .about-hero-inner,
    .contact-hero-inner,
    .login-hero-inner,
    .dashboard-hero-inner,
    .member-home-hero-inner,
    .member-profile-hero-inner,
    .friends-page-hero-content,
    .blocked-members-hero-content,
    .admin-dashboard-hero > .section-inner,
    .staff-dashboard-hero > .section-inner,
    .forum-admin-hero > .section-inner,
    .forum-index-header > .section-inner,
    .forum-board-header > .section-inner,
    .thread-page-header > .section-inner,
    .common-room-hero .section-inner {
        width: min(calc(100% - 96px), var(--content-width));
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 700px) {
    .home-hero-grid,
    .features-hero-inner,
    .about-hero-inner,
    .contact-hero-inner,
    .login-hero-inner,
    .dashboard-hero-inner,
    .member-home-hero-inner,
    .member-profile-hero-inner,
    .friends-page-hero-content,
    .blocked-members-hero-content,
    .admin-dashboard-hero > .section-inner,
    .staff-dashboard-hero > .section-inner,
    .forum-admin-hero > .section-inner,
    .forum-index-header > .section-inner,
    .forum-board-header > .section-inner,
    .thread-page-header > .section-inner,
    .common-room-hero .section-inner {
        width: min(calc(100% - 72px), var(--content-width));
    }
}

@media (max-width: 420px) {
    .home-hero-grid,
    .features-hero-inner,
    .about-hero-inner,
    .contact-hero-inner,
    .login-hero-inner,
    .dashboard-hero-inner,
    .member-home-hero-inner,
    .member-profile-hero-inner,
    .friends-page-hero-content,
    .blocked-members-hero-content,
    .admin-dashboard-hero > .section-inner,
    .staff-dashboard-hero > .section-inner,
    .forum-admin-hero > .section-inner,
    .forum-index-header > .section-inner,
    .forum-board-header > .section-inner,
    .thread-page-header > .section-inner,
    .common-room-hero .section-inner {
        width: min(calc(100% - 64px), var(--content-width));
    }
}

/* Logged-in homepage: Announcements / Events should be a compact content bar. */
.member-homepage .member-content-titlebar {
    padding: 9px 16px;
}

.member-homepage .member-content-titlebar h2 {
    font-size: clamp(17px, 1.8vw, 20px);
    line-height: 1.25;
}

/* Announcement thread titles are links to content, not secondary hero titles. */
.member-homepage .announcement-entry {
    padding-top: clamp(18px, 2.4vw, 26px);
    padding-bottom: clamp(18px, 2.4vw, 26px);
}

.member-homepage .announcement-entry h3 {
    margin-bottom: 5px;
    font-size: clamp(16px, 1.8vw, 19px);
    line-height: 1.35;
}

@media (max-width: 880px) {
    .member-sidebar .sidebar-link-list:not([hidden]) > a,
    .member-sidebar .sidebar-forum-navigation:not([hidden]) > .sidebar-forum-group,
    .member-sidebar .sidebar-forum-group > a {
        min-height: 0 !important;
    }

    .member-sidebar .sidebar-link-list:not([hidden]) > a {
        padding-top: 5px !important;
        padding-bottom: 5px !important;
    }

    .member-sidebar .sidebar-forum-main-link {
        padding-top: 6px !important;
        padding-bottom: 6px !important;
    }
}

/* ==========================================================================
   2026-09-18 — Dedicated Personal + Staff Dashboard Workspaces
   ========================================================================== */

.dashboard-workspace-section {
    padding: clamp(46px, 6vw, 78px) 0 clamp(80px, 9vw, 120px);
    background:
        radial-gradient(circle at 76% 12%, rgba(83, 47, 96, 0.11), transparent 34%),
        linear-gradient(180deg, #100713 0%, #0d0610 100%);
}

.dashboard-workspace-layout {
    display: grid;
    grid-template-columns: minmax(220px, 270px) minmax(0, 1fr);
    gap: clamp(24px, 3.5vw, 42px);
    align-items: start;
}

.dashboard-workspace-sidebar {
    min-width: 0;
}

.dashboard-workspace-sidebar-inner {
    position: sticky;
    top: calc(var(--header-height, 86px) + 22px);
    overflow: hidden;
    border: 1px solid rgba(219, 193, 125, 0.15);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(33, 16, 41, 0.96), rgba(17, 8, 21, 0.98));
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.22);
}

.dashboard-workspace-sidebar-header {
    padding: 20px 20px 18px;
    border-bottom: 1px solid rgba(219, 193, 125, 0.12);
    background: rgba(70, 35, 80, 0.16);
}

.dashboard-workspace-sidebar-header .academy-overline {
    margin-bottom: 7px;
    font-size: 10px;
}

.dashboard-workspace-sidebar-header h2 {
    margin: 0;
    color: var(--color-text);
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 22px;
    font-weight: 500;
    line-height: 1.2;
}

.dashboard-workspace-nav,
.dashboard-workspace-sidebar-footer {
    display: grid;
    gap: 2px;
    padding: 10px;
}

.dashboard-workspace-sidebar-footer {
    border-top: 1px solid rgba(219, 193, 125, 0.1);
    background: rgba(255, 255, 255, 0.012);
}

.dashboard-nav-link {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 9px;
    align-items: center;
    min-height: 48px;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: 10px;
    color: #d7cdd7;
    text-decoration: none;
    transition:
        color 150ms ease,
        background 150ms ease,
        border-color 150ms ease,
        transform 150ms ease;
}

.dashboard-nav-link:hover,
.dashboard-nav-link:focus-visible {
    color: #f1dfaa;
    border-color: rgba(219, 193, 125, 0.15);
    background: rgba(219, 193, 125, 0.055);
    transform: translateX(2px);
}

.dashboard-nav-link.is-active {
    color: #f4e4b3;
    border-color: rgba(219, 193, 125, 0.26);
    background: linear-gradient(90deg, rgba(117, 76, 127, 0.19), rgba(219, 193, 125, 0.035));
}

.dashboard-nav-link.is-disabled {
    opacity: 0.54;
    cursor: default;
}

.dashboard-nav-link.is-disabled:hover {
    transform: none;
    border-color: transparent;
    background: transparent;
}

.dashboard-nav-icon {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    color: var(--color-gold-light);
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 15px;
}

.dashboard-nav-copy {
    min-width: 0;
    display: grid;
    gap: 1px;
}

.dashboard-nav-label {
    font-size: 13px;
    font-weight: 650;
    line-height: 1.25;
}

.dashboard-nav-meta {
    overflow: hidden;
    color: #897d89;
    font-size: 10px;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-workspace-main {
    min-width: 0;
}

.dashboard-workspace-heading {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    align-items: flex-start;
    margin-bottom: 26px;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(219, 193, 125, 0.12);
}

.dashboard-workspace-heading > div {
    min-width: 0;
    max-width: 760px;
}

.dashboard-workspace-heading h2 {
    margin: 7px 0 0;
    color: var(--color-text);
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(30px, 3.4vw, 43px);
    font-weight: 500;
    line-height: 1.13;
}

.dashboard-workspace-heading p:last-child {
    margin: 13px 0 0;
    color: var(--color-text-muted);
    font-size: 14px;
    line-height: 1.65;
}

.dashboard-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

.dashboard-summary-card {
    min-width: 0;
    padding: 18px 18px 17px;
    border: 1px solid rgba(219, 193, 125, 0.13);
    border-radius: 13px;
    background: linear-gradient(180deg, rgba(35, 18, 43, 0.91), rgba(18, 9, 23, 0.94));
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.13);
}

.dashboard-summary-kicker {
    display: block;
    margin-bottom: 7px;
    color: var(--color-gold-light);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.dashboard-summary-card strong {
    display: block;
    overflow: hidden;
    margin-bottom: 4px;
    color: #f4edf3;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(22px, 2.7vw, 31px);
    font-weight: 500;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-summary-card p {
    margin: 0;
    color: #918391;
    font-size: 11px;
    line-height: 1.4;
}

.dashboard-workspace-panel {
    overflow: hidden;
    margin-top: 20px;
    border: 1px solid rgba(219, 193, 125, 0.13);
    border-radius: 15px;
    background: rgba(22, 11, 27, 0.88);
    box-shadow: 0 15px 38px rgba(0, 0, 0, 0.15);
}

.dashboard-panel-titlebar {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
    min-height: 68px;
    padding: 13px 18px;
    border-bottom: 1px solid rgba(219, 193, 125, 0.12);
    background: linear-gradient(90deg, rgba(72, 37, 82, 0.32), rgba(30, 16, 36, 0.72));
}

.dashboard-panel-titlebar .academy-overline {
    margin-bottom: 4px;
    font-size: 9px;
}

.dashboard-panel-titlebar h3 {
    margin: 0;
    color: var(--color-text);
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(18px, 2vw, 23px);
    font-weight: 500;
    line-height: 1.2;
}

.dashboard-panel-link,
.dashboard-inline-link {
    color: var(--color-gold-light);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}

.dashboard-panel-link:hover,
.dashboard-panel-link:focus-visible,
.dashboard-inline-link:hover,
.dashboard-inline-link:focus-visible {
    color: #f3df9f;
}

.dashboard-panel-body {
    padding: 19px 20px 21px;
}

.dashboard-panel-body > p {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 14px;
    line-height: 1.7;
}

.dashboard-panel-body > p + .dashboard-inline-link {
    display: inline-flex;
    margin-top: 15px;
}

.dashboard-workspace-two-column {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.dashboard-empty-state {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 13px;
    align-items: start;
}

.dashboard-empty-state > span {
    color: var(--color-gold-light);
    font-size: 21px;
    line-height: 1;
}

.dashboard-empty-state h4 {
    margin: 0 0 5px;
    color: var(--color-text);
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 17px;
    font-weight: 500;
}

.dashboard-empty-state p {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 13px;
    line-height: 1.6;
}

.dashboard-placeholder-list {
    display: grid;
    gap: 7px;
    margin-top: 15px;
}

.dashboard-placeholder-list span {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #9b8e9a;
    font-size: 12px;
}

.dashboard-placeholder-list span::before {
    content: '✦';
    color: rgba(219, 193, 125, 0.66);
    font-size: 8px;
}

.dashboard-staff-switcher .dashboard-panel-titlebar {
    align-items: center;
}

.dashboard-role-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.dashboard-role-chip {
    display: inline-flex;
    align-items: center;
    min-height: 31px;
    padding: 5px 11px;
    border: 1px solid var(--dashboard-role-color, rgba(219, 193, 125, 0.28));
    border-radius: 999px;
    color: #e1d7e0;
    background: rgba(255, 255, 255, 0.025);
    font-size: 11px;
    font-weight: 700;
}

.dashboard-management-list {
    padding: 0;
}

.dashboard-management-row {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) minmax(145px, auto);
    gap: 16px;
    align-items: center;
    padding: 18px 20px;
    border-bottom: 1px solid rgba(219, 193, 125, 0.085);
}

.dashboard-management-row:last-child {
    border-bottom: 0;
}

.dashboard-management-row:hover {
    background: rgba(219, 193, 125, 0.025);
}

.dashboard-management-number {
    color: rgba(219, 193, 125, 0.72);
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 11px;
    letter-spacing: 0.12em;
}

.dashboard-management-copy h4 {
    margin: 0 0 5px;
    color: var(--color-text);
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 17px;
    font-weight: 500;
}

.dashboard-management-copy p {
    margin: 0;
    color: #988b97;
    font-size: 12px;
    line-height: 1.55;
}

.dashboard-management-action {
    justify-self: end;
    text-align: right;
}

@media (max-width: 1080px) {
    .dashboard-workspace-layout {
        grid-template-columns: minmax(200px, 235px) minmax(0, 1fr);
        gap: 24px;
    }

    .dashboard-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 860px) {
    .dashboard-workspace-layout {
        grid-template-columns: 1fr;
    }

    .dashboard-workspace-sidebar-inner {
        position: static;
    }

    .dashboard-workspace-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-workspace-sidebar-footer {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-workspace-heading {
        flex-direction: column;
        align-items: stretch;
    }

    .dashboard-workspace-heading > .button {
        width: fit-content;
    }

    .dashboard-management-row {
        grid-template-columns: 40px minmax(0, 1fr);
    }

    .dashboard-management-action {
        grid-column: 2;
        justify-self: start;
        text-align: left;
    }
}

@media (max-width: 640px) {
    .dashboard-workspace-section {
        padding-top: 34px;
    }

    .dashboard-workspace-nav,
    .dashboard-workspace-sidebar-footer,
    .dashboard-summary-grid,
    .dashboard-workspace-two-column {
        grid-template-columns: 1fr;
    }

    .dashboard-panel-titlebar {
        align-items: flex-start;
        flex-direction: column;
    }

    .dashboard-panel-titlebar > .button,
    .dashboard-workspace-heading > .button {
        width: 100%;
    }

    .dashboard-management-row {
        grid-template-columns: 32px minmax(0, 1fr);
        gap: 12px;
        padding: 16px;
    }

    .dashboard-panel-body {
        padding: 17px;
    }
}

/* =========================================================
   DASHBOARD — LIVE ACTIVITY, HOUSE NEWS & COMMUNITY STATS
   ========================================================= */

.dashboard-community-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.dashboard-community-stats article {
    min-width: 0;
    padding: 16px 18px;
    border: 1px solid rgba(219, 193, 125, 0.13);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.018);
}

.dashboard-community-stats span {
    display: block;
    margin-bottom: 6px;
    color: #9e919d;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.dashboard-community-stats strong {
    color: var(--color-gold-light);
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 24px;
    font-weight: 500;
}

.dashboard-house-news-item h4 {
    margin: 0 0 9px;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.3;
}

.dashboard-house-news-item h4 a {
    color: var(--color-text);
    text-decoration: none;
}

.dashboard-house-news-item h4 a:hover,
.dashboard-house-news-item h4 a:focus-visible {
    color: var(--color-gold-light);
}

.dashboard-house-news-item > p:not(.dashboard-activity-label) {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 13px;
    line-height: 1.65;
}

.dashboard-house-news-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin-top: 13px;
    color: #897d88;
    font-size: 11px;
}

.dashboard-activity-list {
    display: grid;
    padding: 0;
}

.dashboard-activity-list > .dashboard-empty-state {
    padding: 17px 20px 19px;
}

.dashboard-activity-item {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 12px;
    padding: 15px 20px;
    border-bottom: 1px solid rgba(219, 193, 125, 0.075);
    color: inherit;
    text-decoration: none;
    transition:
        background 0.18s ease,
        border-color 0.18s ease;
}

.dashboard-activity-item:last-child {
    border-bottom: 0;
}

.dashboard-activity-item:hover,
.dashboard-activity-item:focus-visible {
    background: rgba(219, 193, 125, 0.035);
}

.dashboard-activity-symbol {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid rgba(219, 193, 125, 0.18);
    border-radius: 50%;
    color: var(--color-gold-light);
    font-size: 12px;
}

.dashboard-activity-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.dashboard-activity-topline {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 5px 12px;
}

.dashboard-activity-label {
    margin: 0;
    color: var(--color-gold-light);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.dashboard-activity-date {
    color: #817681;
    font-size: 10px;
}

.dashboard-activity-copy strong {
    color: var(--color-text);
    font-size: 13px;
    line-height: 1.35;
}

.dashboard-activity-summary {
    color: #9e919d;
    font-size: 11px;
    line-height: 1.5;
}

@media (max-width: 720px) {
    .dashboard-community-stats {
        grid-template-columns: 1fr;
    }

    .dashboard-activity-item {
        padding: 14px 16px;
    }
}
/* =========================================================
   HOUSE COMMON ROOM
   ========================================================= */
.house-common-room-page {
    min-height: 100vh;
    background:
        radial-gradient(
            circle at top right,
            color-mix(in srgb, var(--house-primary) 22%, transparent),
            transparent 38%
        ),
        linear-gradient(180deg, var(--house-dark), #0d0710 72%);
}

.house-common-room-hero {
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid color-mix(in srgb, var(--house-accent) 32%, transparent);
    background-color: var(--house-dark);
    background-image:
        var(--house-hero-image, none),
        radial-gradient(circle at 18% 40%, color-mix(in srgb, var(--house-primary) 28%, transparent), transparent 34%),
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--house-dark) 92%, #050306),
            color-mix(in srgb, var(--house-secondary) 76%, #0b060d)
        );
    background-size: cover, auto, auto;
    background-position: center, center, center;
    background-repeat: no-repeat, no-repeat, no-repeat;
    min-height: clamp(360px, 47vh, 540px);
    display: flex;
    align-items: center;
}

.house-common-room-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(8, 4, 10, 0.82) 0%, rgba(10, 5, 12, 0.72) 46%, rgba(10, 5, 12, 0.62) 100%);
}

.house-common-room-hero::before {
    content: '';
    position: absolute;
    inset: 20px;
    pointer-events: none;
    border: 1px solid color-mix(in srgb, var(--house-accent) 28%, transparent);
}

.house-common-room-hero-inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(170px, 220px) minmax(0, 760px);
    gap: clamp(28px, 4vw, 54px);
    align-items: center;
    width: min(1180px, calc(100% - 80px));
    margin-inline: auto;
    padding-top: clamp(22px, 2.6vw, 34px);
    padding-bottom: clamp(22px, 2.6vw, 34px);
}

.house-common-room-crest-link,
.house-common-room-crest-static {
    display: grid;
    place-items: center;
    width: 100%;
    min-height: 180px;
    padding: 14px;
    border: 1px solid color-mix(in srgb, var(--house-accent) 32%, transparent);
    border-radius: 18px;
    background: color-mix(in srgb, var(--house-dark) 72%, transparent);
    box-shadow: 0 18px 52px rgba(0, 0, 0, 0.28);
}

.house-common-room-crest-link {
    transition:
        transform 160ms ease,
        border-color 160ms ease;
}

.house-common-room-crest-link:hover,
.house-common-room-crest-link:focus-visible {
    transform: translateY(-2px);
    border-color: var(--house-accent);
}

.house-common-room-crest {
    display: block;
    width: min(100%, 185px);
    max-height: 205px;
    object-fit: contain;
}

.house-common-room-crest-fallback {
    display: grid;
    place-items: center;
    width: 155px;
    aspect-ratio: 1;
    border: 1px solid color-mix(in srgb, var(--house-accent) 34%, transparent);
    border-radius: 50%;
    color: var(--house-name);
    font-size: 3.4rem;
    font-family: Georgia, 'Times New Roman', serif;
}

.house-common-room-copy {
    max-width: none;
}

.house-common-room-copy .academy-overline {
    margin-bottom: 8px;
    color: var(--house-accent);
}

.house-common-room-title {
    margin: 0;
    color: var(--house-name);
    font-size: clamp(2.2rem, 4vw, 4rem);
    line-height: 0.98;
}

.house-common-room-kicker {
    margin: 8px 0 0;
    color: var(--house-highlight);
    font-size: clamp(1rem, 2vw, 1.18rem);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.house-common-room-welcome {
    margin: 8px 0 0;
    color: #d8ced6;
    font-size: 0.96rem;
}

.house-common-room-welcome strong {
    color: var(--house-name);
    font-weight: 600;
}

.house-common-room-description {
    margin: 9px 0 0;
    color: #ded4dc;
    line-height: 1.48;
}

.house-common-room-motto {
    margin: 9px 0 0;
    padding: 6px 12px;
    border-left: 3px solid var(--house-accent);
    background: color-mix(in srgb, var(--house-primary) 12%, transparent);
    color: var(--house-highlight);
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 0.98rem;
    font-style: italic;
    line-height: 1.45;
}

.house-common-room-introduction {
    margin-top: 9px;
    color: #d8ced6;
    line-height: 1.48;
}

.house-common-room-introduction > :first-child {
    margin-top: 0;
}

.house-common-room-introduction > :last-child {
    margin-bottom: 0;
}

.house-about-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid color-mix(in srgb, var(--house-primary) 22%, transparent);
    color: #b9acb6;
    font-size: 0.9rem;
}

.house-about-meta strong {
    color: var(--house-highlight);
    font-weight: 600;
}

.house-common-room-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 10px;
}

.house-common-room-actions .button-primary {
    border-color: var(--house-accent);
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--house-primary) 85%, #ffffff 4%),
        color-mix(in srgb, var(--house-primary) 74%, #000000)
    );
}

.house-introduction-section {
    padding: 38px 0 8px;
}

.house-introduction-inner {
    width: min(980px, calc(100% - 48px));
    margin-inline: auto;
    padding: 28px 32px;
    border: 1px solid color-mix(in srgb, var(--house-primary) 28%, #322236);
    border-radius: 16px;
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--house-secondary) 50%, #100912),
        color-mix(in srgb, var(--house-dark) 84%, #0d0710)
    );
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.18);
}

.house-introduction-inner .academy-overline {
    margin-bottom: 8px;
    color: var(--house-accent);
}

.house-introduction-inner h2 {
    margin: 0;
    color: var(--house-highlight);
    font-size: clamp(1.6rem, 3vw, 2.25rem);
}

.house-introduction-copy {
    margin-top: 18px;
    color: #d8ced6;
    line-height: 1.72;
}

.house-introduction-copy > :first-child {
    margin-top: 0;
}

.house-introduction-copy > :last-child {
    margin-bottom: 0;
}

.house-common-room-content {
    padding-top: 28px;
    padding-bottom: 70px;
}

.house-common-room-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.7fr);
    gap: 24px;
    align-items: start;
}

.house-common-room-main,
.house-common-room-side {
    display: grid;
    gap: 24px;
}

.house-room-panel {
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--house-primary) 34%, #322236);
    border-radius: 16px;
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--house-secondary) 56%, #100912),
        color-mix(in srgb, var(--house-dark) 85%, #0d0710)
    );
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.2);
}

.house-room-panel-heading {
    padding: 15px 18px;
    border-bottom: 1px solid color-mix(in srgb, var(--house-primary) 28%, transparent);
    background: color-mix(in srgb, var(--house-primary) 18%, transparent);
}

.house-room-panel-heading h2 {
    margin: 0;
    color: var(--house-highlight);
    font-size: 1.05rem;
    letter-spacing: 0.035em;
}

.house-room-panel-body {
    padding: 20px;
}

.house-room-empty {
    margin: 0;
    color: #bcaeb9;
    line-height: 1.65;
}

.house-room-announcement h3,
.house-room-discussion h3 {
    margin: 0;
}

.house-room-announcement h3 a,
.house-room-discussion h3 a {
    color: var(--house-highlight);
}

.house-room-announcement-meta,
.house-room-discussion-meta {
    margin-top: 7px;
    color: #aa9da8;
    font-size: 0.86rem;
}

.house-room-announcement-content {
    margin-top: 18px;
    color: #d8ced6;
    line-height: 1.7;
}

.house-room-announcement-actions {
    margin-top: 20px;
}

.house-room-discussion-list,
.house-room-birthday-list,
.house-room-member-list {
    display: grid;
    gap: 0;
}

.house-room-discussion,
.house-room-birthday,
.house-room-member {
    padding: 15px 0;
    border-bottom: 1px solid color-mix(in srgb, var(--house-primary) 18%, transparent);
}

.house-room-discussion:first-child,
.house-room-birthday:first-child,
.house-room-member:first-child {
    padding-top: 0;
}

.house-room-discussion:last-child,
.house-room-birthday:last-child,
.house-room-member:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.house-room-birthday,
.house-room-member {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.house-room-member-name {
    color: var(--house-name);
}

.house-room-birthday-date,
.house-room-member-status {
    flex: 0 0 auto;
    color: #b9acb6;
    font-size: 0.84rem;
}

.house-room-birthday-today {
    color: var(--house-accent);
    font-weight: 700;
}

.house-room-pinned-list {
    display: grid;
    gap: 0;
}

.house-room-pinned-item {
    padding: 14px 0;
    border-bottom: 1px solid color-mix(in srgb, var(--house-primary) 18%, transparent);
}

.house-room-pinned-item:first-child {
    padding-top: 0;
}

.house-room-pinned-item:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.house-room-pinned-item a {
    color: var(--house-highlight);
}

.house-room-pinned-meta {
    margin: 6px 0 0;
    color: #aa9da8;
    font-size: 0.84rem;
}

.house-cup-card {
    display: grid;
    gap: 16px;
}

.house-cup-scoreline {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 18px;
}

.house-cup-points {
    color: var(--house-highlight);
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(2rem, 5vw, 3rem);
    line-height: 1;
}

.house-cup-points small {
    display: block;
    margin-top: 6px;
    color: #aa9da8;
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 400;
}

.house-cup-rank {
    text-align: right;
    color: #d9cfd7;
}

.house-cup-rank strong {
    display: block;
    color: var(--house-name);
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.7rem;
    line-height: 1;
}

.house-cup-breakdown {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.house-cup-breakdown div {
    padding: 10px 12px;
    border: 1px solid color-mix(in srgb, var(--house-primary) 24%, transparent);
    border-radius: 10px;
    background: color-mix(in srgb, var(--house-primary) 8%, transparent);
}

.house-cup-breakdown span {
    display: block;
    color: #9e919b;
    font-size: 0.76rem;
}

.house-cup-breakdown strong {
    display: block;
    margin-top: 3px;
    color: #e4d9e1;
}

.house-room-mascot-wrap {
    display: grid;
    place-items: center;
    min-height: 210px;
}

.house-room-mascot-wrap img {
    display: block;
    width: min(100%, 250px);
    max-height: 270px;
    object-fit: contain;
    filter: drop-shadow(0 14px 26px rgba(0, 0, 0, 0.38));
}

.house-room-mascot-fallback {
    margin: 0;
    color: #bcaeb9;
    text-align: center;
    line-height: 1.65;
}

.house-room-mascot-details {
    display: grid;
    gap: 9px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid color-mix(in srgb, var(--house-primary) 20%, transparent);
}

.house-room-mascot-detail {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
}

.house-room-mascot-detail dt {
    color: var(--house-highlight);
    font-weight: 700;
}

.house-room-mascot-detail dd {
    margin: 0;
    color: #d8ced6;
}

.house-common-room-denied {
    padding: 90px 0;
}

.house-common-room-denied .section-inner {
    max-width: 760px;
}

@media (max-width: 900px) {
    .house-common-room-hero-inner,
    .house-common-room-grid {
        grid-template-columns: 1fr;
    }

    .house-common-room-hero-inner {
        width: min(760px, calc(100% - 40px));
    }

    .house-common-room-crest-link,
    .house-common-room-crest-static {
        width: min(100%, 190px);
        margin-inline: auto;
    }

    .house-common-room-copy {
        text-align: center;
        margin-inline: auto;
    }

    .house-common-room-actions {
        justify-content: center;
    }
}

@media (max-width: 620px) {
    .house-common-room-hero::before {
        inset: 9px;
    }

    .house-common-room-hero-inner {
        padding: 28px 20px;
    }

    .house-common-room-content {
        padding-inline: 4px;
    }

    .house-room-birthday,
    .house-room-member {
        align-items: flex-start;
    }
}

/* Common Room workspace redesign */
.house-common-room-layout {
    padding-top: clamp(32px, 4vw, 52px);
    padding-bottom: clamp(72px, 8vw, 110px);
}

.house-common-room-layout > .member-sidebar {
    position: sticky;
    top: calc(var(--header-height, 86px) + 22px);
}

.house-common-room-main {
    min-width: 0;
    display: grid;
    gap: 24px;
}

.house-room-dashboard-heading {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
    padding: 26px 28px;
    border: 1px solid color-mix(in srgb, var(--house-accent) 28%, #322236);
    border-radius: 18px;
    background:
        radial-gradient(circle at 88% 0%, color-mix(in srgb, var(--house-primary) 26%, transparent), transparent 34%),
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--house-secondary) 64%, #110912),
            color-mix(in srgb, var(--house-dark) 90%, #0b070d)
        );
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.22);
}

.house-room-dashboard-heading::after {
    content: '';
    position: absolute;
    right: 34px;
    top: -62px;
    width: 180px;
    aspect-ratio: 1;
    border: 1px solid color-mix(in srgb, var(--house-accent) 16%, transparent);
    transform: rotate(45deg);
    pointer-events: none;
}

.house-room-dashboard-heading > * {
    position: relative;
    z-index: 1;
}

.house-room-dashboard-heading .academy-overline,
.house-room-section-heading .academy-overline {
    margin: 0 0 6px;
    color: var(--house-accent);
}

.house-room-dashboard-heading h2,
.house-room-section-heading h2 {
    margin: 0;
    color: var(--house-highlight);
    font-family: Georgia, 'Times New Roman', serif;
}

.house-room-dashboard-heading h2 {
    font-size: clamp(1.6rem, 2.8vw, 2.35rem);
}

.house-room-dashboard-heading p:last-child {
    max-width: 720px;
    margin: 8px 0 0;
    color: #cfc3cc;
    line-height: 1.65;
}

.house-room-featured-announcement {
    position: relative;
    border-color: color-mix(in srgb, var(--house-accent) 40%, #322236);
    background:
        radial-gradient(circle at 92% 18%, color-mix(in srgb, var(--house-primary) 22%, transparent), transparent 28%),
        linear-gradient(
            145deg,
            color-mix(in srgb, var(--house-secondary) 66%, #110912),
            color-mix(in srgb, var(--house-dark) 91%, #0b070d)
        );
}

.house-room-featured-announcement::before {
    content: '✦';
    position: absolute;
    right: 28px;
    top: 54px;
    color: color-mix(in srgb, var(--house-accent) 26%, transparent);
    font-size: clamp(3rem, 8vw, 6.5rem);
    line-height: 1;
    pointer-events: none;
}

.house-room-featured-announcement .house-room-panel-heading {
    background: linear-gradient(90deg, color-mix(in srgb, var(--house-primary) 28%, transparent), transparent 72%);
}

.house-room-featured-announcement .house-room-panel-body {
    padding: clamp(24px, 3vw, 34px);
}

.house-room-featured-announcement .house-room-announcement {
    position: relative;
    z-index: 1;
    max-width: 820px;
}

.house-room-featured-announcement .house-room-announcement h3 {
    font-size: clamp(1.25rem, 2.2vw, 1.75rem);
}

.house-room-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 6px 2px 0;
}

.house-room-section-heading h2 {
    font-size: clamp(1.35rem, 2.2vw, 1.85rem);
}

.house-room-section-flourish {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 120px;
    color: var(--house-accent);
    opacity: 0.75;
}

.house-room-section-flourish::before,
.house-room-section-flourish::after {
    content: '';
    height: 1px;
    flex: 1;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--house-accent) 48%, transparent));
}

.house-room-section-flourish::after {
    background: linear-gradient(90deg, color-mix(in srgb, var(--house-accent) 48%, transparent), transparent);
}

.house-common-room-community-grid {
    display: grid;
    grid-template-columns: minmax(250px, 0.78fr) minmax(0, 1.35fr);
    gap: 24px;
    align-items: start;
}

.house-common-room-identity-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
    gap: 24px;
    align-items: stretch;
}

.house-common-room-life-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    align-items: start;
}

.house-room-mascot-panel .house-room-panel-body {
    display: grid;
    grid-template-columns: minmax(190px, 0.9fr) minmax(0, 1.1fr);
    gap: 26px;
    align-items: center;
}

.house-room-mascot-panel .house-room-mascot-wrap {
    min-height: 250px;
    padding: 14px;
    border-radius: 14px;
    background: radial-gradient(circle, color-mix(in srgb, var(--house-primary) 22%, transparent), transparent 68%);
}

.house-room-mascot-panel .house-room-mascot-details {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.house-room-cup-panel {
    height: 100%;
}

.house-room-cup-panel .house-room-panel-body {
    height: calc(100% - 54px);
    display: grid;
    align-content: center;
}

.house-room-panel {
    transition:
        border-color 0.18s ease,
        transform 0.18s ease,
        box-shadow 0.18s ease;
}

.house-room-panel:hover {
    border-color: color-mix(in srgb, var(--house-accent) 42%, #322236);
    box-shadow: 0 20px 54px rgba(0, 0, 0, 0.26);
}

.house-room-pinned-panel,
.house-room-discussions-panel,
.house-room-birthdays-panel,
.house-room-housemates-panel {
    min-width: 0;
}

.house-room-discussions-panel .house-room-panel-body {
    padding-top: 8px;
    padding-bottom: 8px;
}

.house-room-discussion {
    padding: 17px 4px;
}

.house-room-discussion h3 a,
.house-room-pinned-item > a {
    font-weight: 650;
}

.house-room-birthday-date,
.house-room-member-status {
    padding: 4px 8px;
    border: 1px solid color-mix(in srgb, var(--house-primary) 20%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--house-primary) 8%, transparent);
}

@media (max-width: 1080px) {
    .house-common-room-community-grid,
    .house-common-room-identity-grid {
        grid-template-columns: 1fr;
    }

    .house-room-mascot-panel .house-room-panel-body {
        grid-template-columns: minmax(180px, 280px) minmax(0, 1fr);
    }
}

@media (max-width: 900px) {
    .house-common-room-layout > .member-sidebar {
        position: fixed;
        top: var(--header-height);
    }

    .house-room-dashboard-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .house-common-room-life-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 680px) {
    .house-room-dashboard-heading {
        padding: 22px 20px;
    }

    .house-room-section-flourish {
        min-width: 72px;
    }

    .house-room-mascot-panel .house-room-panel-body {
        grid-template-columns: 1fr;
    }

    .house-room-mascot-panel .house-room-mascot-details {
        padding-top: 16px;
        border-top: 1px solid color-mix(in srgb, var(--house-primary) 20%, transparent);
    }
}

/* ==========================================================================
   2026-09-18 — Shared Sidebar Cleanup + House-Themed Common Room Sidebar
   ========================================================================== */

/* Forum quick links should read as one compact navigation list, not boxed rows. */
.sidebar-forum-group + .sidebar-forum-group {
    border-top: 0;
}

/* The Common Room uses the shared member sidebar, but lets each House own it. */
.house-common-room-page .member-sidebar {
    border-color: color-mix(in srgb, var(--house-accent) 34%, #322236);
    background:
        radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--house-primary) 20%, transparent), transparent 30%),
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--house-secondary) 58%, #120a14),
            color-mix(in srgb, var(--house-dark) 92%, #09060b)
        );
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.28);
}

.house-common-room-page .member-sidebar .sidebar-panel {
    border-color: color-mix(in srgb, var(--house-primary) 30%, #38273b);
    background: color-mix(in srgb, var(--house-dark) 62%, transparent);
}

.house-common-room-page .member-sidebar .sidebar-titlebar {
    border-bottom-color: color-mix(in srgb, var(--house-primary) 28%, transparent);
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--house-primary) 22%, transparent),
        color-mix(in srgb, var(--house-secondary) 20%, transparent)
    );
}

.house-common-room-page .member-sidebar .sidebar-titlebar h2,
.house-common-room-page .member-sidebar .sidebar-titlebar h2 a {
    color: var(--house-highlight);
}

.house-common-room-page .member-sidebar .sidebar-collapse-toggle,
.house-common-room-page .member-sidebar .sidebar-toggle-mark {
    color: var(--house-accent);
}

.house-common-room-page .member-sidebar .sidebar-link-list a,
.house-common-room-page .member-sidebar .sidebar-forum-link,
.house-common-room-page .member-sidebar .sidebar-profile-details a {
    color: color-mix(in srgb, var(--house-highlight) 88%, #ffffff);
}

.house-common-room-page .member-sidebar .sidebar-link-list a:hover,
.house-common-room-page .member-sidebar .sidebar-link-list a:focus-visible,
.house-common-room-page .member-sidebar .sidebar-forum-link:hover,
.house-common-room-page .member-sidebar .sidebar-forum-link:focus-visible,
.house-common-room-page .member-sidebar .sidebar-profile-details a:hover,
.house-common-room-page .member-sidebar .sidebar-profile-details a:focus-visible {
    color: var(--house-accent);
    background: color-mix(in srgb, var(--house-primary) 12%, transparent);
}

.house-common-room-page .member-sidebar .sidebar-forum-navigation,
.house-common-room-page .member-sidebar .sidebar-link-list,
.house-common-room-page .member-sidebar .sidebar-panel-content,
.house-common-room-page .member-sidebar .sidebar-profile-details {
    border-color: color-mix(in srgb, var(--house-primary) 18%, transparent);
}

.house-common-room-page .member-sidebar-mobile-toggle {
    border-color: color-mix(in srgb, var(--house-accent) 42%, #322236);
    background: color-mix(in srgb, var(--house-secondary) 82%, #100912);
    color: var(--house-highlight);
}

/* Welcome/About belongs to the Common Room workspace, not between hero/content. */
.house-room-welcome-panel {
    position: relative;
    overflow: hidden;
}

.house-room-welcome-panel::after {
    content: '';
    position: absolute;
    right: -72px;
    top: -88px;
    width: 220px;
    aspect-ratio: 1;
    border: 1px solid color-mix(in srgb, var(--house-accent) 13%, transparent);
    border-radius: 50%;
    box-shadow:
        0 0 0 30px color-mix(in srgb, var(--house-primary) 4%, transparent),
        0 0 0 62px color-mix(in srgb, var(--house-primary) 3%, transparent);
    pointer-events: none;
}

.house-room-welcome-inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 22px;
    align-items: start;
    padding: clamp(24px, 3vw, 34px);
}

.house-room-welcome-mark {
    display: grid;
    place-items: center;
    width: 72px;
    aspect-ratio: 1;
    border: 1px solid color-mix(in srgb, var(--house-accent) 42%, transparent);
    border-radius: 50%;
    background: radial-gradient(
        circle,
        color-mix(in srgb, var(--house-primary) 28%, transparent),
        color-mix(in srgb, var(--house-dark) 76%, transparent)
    );
    color: var(--house-accent);
    font-size: 1.55rem;
    box-shadow: 0 0 28px color-mix(in srgb, var(--house-primary) 16%, transparent);
}

.house-room-welcome-copy .academy-overline {
    margin: 0 0 6px;
    color: var(--house-accent);
}

.house-room-welcome-copy h2 {
    margin: 0;
    color: var(--house-highlight);
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(1.55rem, 2.8vw, 2.2rem);
}

.house-room-welcome-copy .house-introduction-copy {
    margin-top: 14px;
}

.house-room-welcome-copy .house-about-meta {
    margin-top: 18px;
}

@media (max-width: 620px) {
    .house-room-welcome-inner {
        grid-template-columns: 1fr;
    }

    .house-room-welcome-mark {
        width: 58px;
    }
}

/* ==========================================================================
   2026-09-18 — Common Room Crest + Full House Sidebar Theme
   ========================================================================== */

/* Use the assigned House crest in the Welcome/About panel. */
.house-room-welcome-mark {
    display: grid;
    place-items: center;
    width: clamp(82px, 9vw, 112px);
    min-width: clamp(82px, 9vw, 112px);
    aspect-ratio: 1;
    padding: 8px;
    border: 1px solid color-mix(in srgb, var(--house-accent) 46%, transparent);
    border-radius: 50%;
    background: radial-gradient(
        circle,
        color-mix(in srgb, var(--house-primary) 20%, transparent),
        color-mix(in srgb, var(--house-dark) 80%, transparent) 68%
    );
    box-shadow:
        inset 0 0 0 5px color-mix(in srgb, var(--house-dark) 48%, transparent),
        0 14px 34px rgba(0, 0, 0, 0.24);
}

.house-room-welcome-mark picture {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
}

.house-room-welcome-crest {
    display: block;
    width: 100%;
    max-width: 92px;
    max-height: 92px;
    object-fit: contain;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.32));
}

.house-room-welcome-crest-fallback {
    color: var(--house-name);
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 2.2rem;
    line-height: 1;
}

/*
 * On a Common Room page the shared sidebar should visually belong to that
 * House, not fall back to the Academy's generic plum/gold sidebar palette.
 */
.house-common-room-page .member-sidebar {
    border-color: color-mix(in srgb, var(--house-accent) 55%, var(--house-primary)) !important;
    background:
        radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--house-primary) 28%, transparent), transparent 32%),
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--house-secondary) 72%, var(--house-dark)),
            color-mix(in srgb, var(--house-dark) 96%, #070508)
        ) !important;
}

.house-common-room-page .member-sidebar .sidebar-panel {
    border-color: color-mix(in srgb, var(--house-accent) 34%, var(--house-primary)) !important;
    background: color-mix(in srgb, var(--house-dark) 82%, #09060b) !important;
}

.house-common-room-page .member-sidebar .sidebar-titlebar {
    border-bottom-color: color-mix(in srgb, var(--house-accent) 34%, transparent) !important;
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--house-primary) 54%, var(--house-dark)),
        color-mix(in srgb, var(--house-secondary) 82%, var(--house-dark))
    ) !important;
}

.house-common-room-page .member-sidebar .sidebar-titlebar::before,
.house-common-room-page .member-sidebar .sidebar-titlebar::after {
    border-color: color-mix(in srgb, var(--house-accent) 34%, transparent) !important;
}

.house-common-room-page .member-sidebar .sidebar-titlebar h2,
.house-common-room-page .member-sidebar .sidebar-titlebar h2 a {
    color: var(--house-highlight) !important;
}

.house-common-room-page .member-sidebar .sidebar-collapse-toggle,
.house-common-room-page .member-sidebar .sidebar-toggle-mark {
    color: var(--house-accent) !important;
    border-color: color-mix(in srgb, var(--house-accent) 22%, transparent) !important;
}

.house-common-room-page .member-sidebar .sidebar-house-name,
.house-common-room-page .member-sidebar .sidebar-profile-details > p:first-child,
.house-common-room-page .member-sidebar .sidebar-titlebar:first-child h2 a {
    color: var(--house-name) !important;
}

.house-common-room-page .member-sidebar .sidebar-user-role,
.house-common-room-page .member-sidebar .sidebar-user-role em {
    color: var(--house-highlight) !important;
}

.house-common-room-page .member-sidebar .sidebar-user-points,
.house-common-room-page .member-sidebar .sidebar-user-points p,
.house-common-room-page .member-sidebar .sidebar-user-points span {
    border-color: color-mix(in srgb, var(--house-primary) 24%, transparent) !important;
}

.house-common-room-page .member-sidebar .sidebar-user-points span {
    color: color-mix(in srgb, var(--house-highlight) 78%, #ffffff) !important;
}

.house-common-room-page .member-sidebar .sidebar-user-points p {
    color: var(--house-name) !important;
}

.house-common-room-page .member-sidebar .sidebar-link-list a,
.house-common-room-page .member-sidebar .sidebar-forum-link,
.house-common-room-page .member-sidebar .sidebar-forum-main-link,
.house-common-room-page .member-sidebar .sidebar-subforum-link,
.house-common-room-page .member-sidebar .sidebar-profile-details a,
.house-common-room-page .member-sidebar .sidebar-forum-category-title,
.house-common-room-page .member-sidebar .sidebar-forum-category-title a {
    color: var(--house-accent) !important;
}

.house-common-room-page .member-sidebar .sidebar-link-list a:hover,
.house-common-room-page .member-sidebar .sidebar-link-list a:focus-visible,
.house-common-room-page .member-sidebar .sidebar-forum-link:hover,
.house-common-room-page .member-sidebar .sidebar-forum-link:focus-visible,
.house-common-room-page .member-sidebar .sidebar-forum-main-link:hover,
.house-common-room-page .member-sidebar .sidebar-forum-main-link:focus-visible,
.house-common-room-page .member-sidebar .sidebar-subforum-link:hover,
.house-common-room-page .member-sidebar .sidebar-subforum-link:focus-visible,
.house-common-room-page .member-sidebar .sidebar-profile-details a:hover,
.house-common-room-page .member-sidebar .sidebar-profile-details a:focus-visible {
    color: var(--house-highlight) !important;
    background: color-mix(in srgb, var(--house-primary) 22%, transparent) !important;
}

.house-common-room-page .member-sidebar .sidebar-panel-content,
.house-common-room-page .member-sidebar .sidebar-profile-details,
.house-common-room-page .member-sidebar .sidebar-link-list,
.house-common-room-page .member-sidebar .sidebar-forum-navigation,
.house-common-room-page .member-sidebar .sidebar-forum-group {
    border-color: color-mix(in srgb, var(--house-primary) 25%, transparent) !important;
}

/* Forum quick links are a compact list; never draw a divider between each one. */
.house-common-room-page .member-sidebar .sidebar-forum-group,
.house-common-room-page .member-sidebar .sidebar-forum-group + .sidebar-forum-group,
.house-common-room-page .member-sidebar .sidebar-forum-main-link,
.house-common-room-page .member-sidebar .sidebar-subforum-link {
    border-top: 0 !important;
    border-bottom: 0 !important;
}

.house-common-room-page .member-sidebar-mobile-toggle {
    border-color: color-mix(in srgb, var(--house-accent) 52%, var(--house-primary)) !important;
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--house-primary) 58%, var(--house-dark)),
        color-mix(in srgb, var(--house-secondary) 82%, var(--house-dark))
    ) !important;
    color: var(--house-highlight) !important;
}

@media (max-width: 720px) {
    .house-room-welcome-mark {
        width: 88px;
        min-width: 88px;
    }

    .house-room-welcome-crest {
        max-width: 72px;
        max-height: 72px;
    }
}

/* ================================================================
   COMMON ROOM SIDEBAR — UNIFIED BACKGROUND
   Keep House theming on titles/links/borders, but remove the separate
   background block behind each individual sidebar section.
================================================================ */
.house-common-room-page .member-sidebar .sidebar-panel {
    background: transparent !important;
    box-shadow: none !important;
}

.house-common-room-page .member-sidebar .sidebar-panel-content,
.house-common-room-page .member-sidebar .sidebar-profile-details,
.house-common-room-page .member-sidebar .sidebar-link-list,
.house-common-room-page .member-sidebar .sidebar-forum-navigation,
.house-common-room-page .member-sidebar .sidebar-forum-group {
    background: transparent !important;
}

/* ==========================================================================
   2026-09-18 — Common Room Welcome Crest Stacking
   ========================================================================== */

/* Give the House crest its own row above the Welcome/About text. */
.house-common-room-page .house-room-welcome-inner {
    grid-template-columns: 1fr;
    gap: clamp(18px, 2.5vw, 26px);
    padding: clamp(28px, 3.4vw, 40px);
}

.house-common-room-page .house-room-welcome-mark {
    width: clamp(112px, 12vw, 148px);
    min-width: 0;
    margin-inline: auto;
    padding: 10px;
}

.house-common-room-page .house-room-welcome-crest {
    max-width: 124px;
    max-height: 124px;
}

.house-common-room-page .house-room-welcome-copy {
    width: 100%;
}

.house-common-room-page .house-room-welcome-copy .academy-overline {
    margin-bottom: 8px;
}

.house-common-room-page .house-room-welcome-copy .house-introduction-copy {
    margin-top: 18px;
}

.house-common-room-page .house-room-welcome-copy .house-about-meta {
    margin-top: 24px;
    padding-top: 18px;
}

@media (max-width: 620px) {
    .house-common-room-page .house-room-welcome-inner {
        gap: 18px;
        padding: 24px 20px;
    }

    .house-common-room-page .house-room-welcome-mark {
        width: 104px;
    }

    .house-common-room-page .house-room-welcome-crest {
        max-width: 88px;
        max-height: 88px;
    }
}

/* ================================================================
   COMMON ROOM SIDEBAR — TRANSPARENT OUTER CONTAINER
   The shared sidebar should not paint House color into the gaps
   between individual panels.
================================================================ */
.house-common-room-page .member-sidebar {
    background: transparent !important;
    box-shadow: none !important;
}

/* =========================================================
   STAFF DASHBOARD — GROUPED SIDEBAR NAVIGATION
   ========================================================= */

.staff-dashboard-page .dashboard-workspace-nav {
    gap: 8px;
}

.dashboard-nav-group {
    overflow: hidden;
    border: 1px solid rgba(219, 193, 125, 0.1);
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.012);
}

.dashboard-nav-group.is-active {
    border-color: rgba(219, 193, 125, 0.2);
}

.dashboard-nav-group-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 42px;
    padding: 10px 12px;
    color: #eadba9;
    background: rgba(70, 35, 80, 0.16);
    font-family: 'Arial Narrow', 'Segoe UI', Arial, sans-serif;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1.2;
    text-decoration: none;
    transition:
        color 150ms ease,
        background 150ms ease;
}

.dashboard-nav-group-heading:hover,
.dashboard-nav-group-heading:focus-visible {
    color: #fff0bd;
    background: rgba(93, 50, 105, 0.22);
}

.dashboard-nav-group-heading.is-static {
    cursor: default;
}

.dashboard-nav-group-heading small {
    flex: 0 0 auto;
    color: #8f818e;
    font-family: inherit;
    font-size: 9px;
    font-weight: 400;
}

.dashboard-nav-children {
    display: grid;
    gap: 1px;
    padding: 5px;
}

.dashboard-nav-link.is-nested {
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 6px;
    min-height: 35px;
    padding: 6px 8px;
    border-radius: 7px;
}

.dashboard-nav-link.is-nested .dashboard-nav-icon {
    width: 18px;
    height: 18px;
    font-size: 13px;
}

.dashboard-nav-link.is-nested .dashboard-nav-label {
    font-size: 12px;
    font-weight: 550;
}

.dashboard-nav-link.is-nested .dashboard-nav-meta {
    font-size: 9px;
}

.staff-dashboard-page .dashboard-workspace-heading {
    margin-bottom: 24px;
    padding-bottom: 0;
    border-bottom: 0;
}

@media (max-width: 860px) {
    .staff-dashboard-page .dashboard-workspace-nav {
        align-items: start;
    }
}

@media (max-width: 640px) {
    .dashboard-nav-group {
        width: 100%;
    }
}

/* ================================================================
   FORUM ADMIN STRUCTURE + IMAGE MAP BUILDER
   2026-09-18
================================================================ */

body.forum-admin-overlay-open {
    overflow: hidden;
}

body.forum-admin-overlay-open::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 9990;
    background: rgba(5, 2, 7, 0.82);
    backdrop-filter: blur(3px);
}

.forum-admin-create-panel[hidden] {
    display: none !important;
}

.forum-admin-create-panel.is-open {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 9991;
    display: block;
    width: min(920px, calc(100vw - 34px));
    max-height: min(90vh, 980px);
    margin: 0;
    overflow: auto;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(126, 86, 120, 0.46);
    border-radius: var(--radius-lg);
    background: #100712;
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.62);
}

.forum-admin-create-panel.is-open .forum-admin-titlebar {
    position: sticky;
    top: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.forum-admin-create-panel.is-open .forum-admin-form {
    padding-bottom: 28px;
}

.forum-admin-action-buttons button[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
}

.forum-structure-inline-form {
    display: inline-flex;
    margin: 0;
}

.forum-structure-main-group {
    display: grid;
    gap: 0;
    transition:
        opacity var(--transition),
        transform var(--transition);
}

.forum-structure-main-group.is-dragging,
.forum-structure-forum.is-dragging {
    opacity: 0.42;
}

.forum-structure-main-group.is-drag-over > .forum-structure-forum,
.forum-structure-forum.is-drag-over {
    outline: 1px dashed var(--color-gold-light);
    outline-offset: 4px;
}

.forum-structure-forum {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
}

.forum-structure-copy {
    min-width: 0;
}

.forum-structure-drag-handle {
    display: inline-grid;
    place-items: center;
    width: 34px;
    min-width: 34px;
    height: 38px;
    padding: 0;
    border: 1px solid rgba(219, 193, 125, 0.18);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.02);
    color: var(--color-gold-light);
    font: inherit;
    font-size: 18px;
    letter-spacing: -3px;
    cursor: grab;
}

.forum-structure-drag-handle:active {
    cursor: grabbing;
}

.forum-structure-subforums {
    display: grid;
    gap: 8px;
    margin: 8px 0 12px 34px;
    padding-left: 20px;
    border-left: 1px solid rgba(219, 193, 125, 0.16);
}

.forum-image-map-fieldset {
    overflow: visible;
}

.forum-image-map-settings[hidden] {
    display: none !important;
}

.forum-image-map-builder-shell {
    display: grid;
    gap: 12px;
    margin-top: 18px;
}

.forum-image-map-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.forum-image-map-toolbar .button.is-active {
    border-color: var(--color-gold-light);
    box-shadow: 0 0 0 2px rgba(219, 193, 125, 0.12);
}

.forum-image-map-stage {
    position: relative;
    width: 100%;
    min-height: 300px;
    overflow: hidden;
    border: 1px solid rgba(219, 193, 125, 0.2);
    border-radius: var(--radius-md);
    background:
        linear-gradient(
            45deg,
            rgba(255, 255, 255, 0.018) 25%,
            transparent 25%,
            transparent 75%,
            rgba(255, 255, 255, 0.018) 75%
        ),
        linear-gradient(
            45deg,
            rgba(255, 255, 255, 0.018) 25%,
            transparent 25%,
            transparent 75%,
            rgba(255, 255, 255, 0.018) 75%
        ),
        #0b070d;
    background-position:
        0 0,
        12px 12px;
    background-size: 24px 24px;
}

.forum-image-map-stage picture,
.forum-image-map-stage img[data-map-image] {
    display: block;
    width: 100%;
}

.forum-image-map-stage img[data-map-image][hidden] {
    display: none;
}

.forum-image-map-drawing-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    cursor: crosshair;
}

.forum-map-shape {
    fill: rgba(219, 193, 125, 0.15);
    stroke: var(--color-gold-light);
    stroke-width: 3;
    vector-effect: non-scaling-stroke;
}

.forum-map-shape.is-draft {
    fill: rgba(165, 116, 170, 0.16);
    stroke-dasharray: 8 6;
}

.forum-image-map-placeholder {
    display: grid;
    place-items: center;
    min-height: 300px;
    padding: 28px;
    color: var(--color-text-muted);
    text-align: center;
}

.forum-image-map-placeholder[hidden] {
    display: none;
}

.forum-image-map-area-editor {
    display: grid;
    gap: 12px;
    margin-top: 20px;
}

.forum-image-map-area-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
}

.forum-image-map-area-heading h3 {
    margin: 0 0 4px;
}

.forum-image-map-count {
    color: var(--color-gold-light);
    font-size: 13px;
}

.forum-image-map-area-row {
    padding: 15px;
    border: 1px solid rgba(126, 86, 120, 0.28);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.018);
}

.forum-image-map-area-row-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.forum-image-map-area-row-heading span {
    color: var(--color-text-muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.forum-image-map-area-row-heading .forum-label-remove {
    margin-left: auto;
}

.forum-image-map-area-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

/* Public board image map */
.forum-board-image-map {
    overflow: hidden;
    margin-bottom: 24px;
    border: 1px solid rgba(219, 193, 125, 0.18);
    border-radius: var(--radius-lg);
    background: rgba(10, 5, 12, 0.82);
}

.forum-image-map-display {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.forum-image-map-display picture,
.forum-image-map-display img {
    display: block;
    width: 100%;
    height: auto;
}

/* Live forum image maps are slightly darkened so they sit naturally
   within the Blackthorne forum palette. The admin builder remains
   unaffected for accurate hotspot editing. */
.forum-image-map-display img {
    filter: brightness(0.84);
}

.forum-image-map-links-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.forum-image-map-links-layer a {
    outline: none;
}

.forum-board-image-map .forum-board-section-titlebar h2 {
    width: 100%;
    text-align: center;
}

.forum-image-map-links-layer .forum-image-map-hotspot {
    fill: transparent;
    stroke: transparent;
    stroke-width: 0;
    pointer-events: all;
    cursor: pointer;
}

.forum-image-map-links-layer a:hover .forum-image-map-hotspot,
.forum-image-map-links-layer a:focus .forum-image-map-hotspot,
.forum-image-map-links-layer a:focus-visible .forum-image-map-hotspot {
    fill: transparent;
    stroke: transparent;
    stroke-width: 0;
}

@media (max-width: 760px) {
    .forum-admin-create-panel.is-open {
        width: calc(100vw - 18px);
        max-height: calc(100vh - 18px);
    }

    .forum-structure-forum {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .forum-structure-meta {
        grid-column: 1 / -1;
        padding-left: 48px;
    }

    .forum-structure-subforums {
        margin-left: 12px;
        padding-left: 12px;
    }

    .forum-image-map-area-grid {
        grid-template-columns: 1fr;
    }

    .forum-image-map-stage,
    .forum-image-map-placeholder {
        min-height: 220px;
    }
}

/* Keep modal titlebar typography stacked while the close control sits right. */
.forum-admin-create-panel.is-open .forum-admin-titlebar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 16px;
}

.forum-admin-create-panel.is-open .forum-admin-titlebar .forum-admin-step,
.forum-admin-create-panel.is-open .forum-admin-titlebar h2 {
    grid-column: 1;
}

.forum-admin-create-panel.is-open .forum-admin-titlebar .forum-admin-step {
    grid-row: 1;
}

.forum-admin-create-panel.is-open .forum-admin-titlebar h2 {
    grid-row: 2;
}

.forum-admin-create-panel.is-open .forum-admin-titlebar .forum-admin-modal-close {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
}

/* ================================================================
   FORUM INDEX — FLAT ACADEMIC LAYOUT
   Removes the angled/wedge treatment and bright purple stat panels.
   Gives the board title/description the majority of each row width.
   ================================================================ */

.forum-index-category-titlebar {
    border-color: rgba(196, 161, 90, 0.2);
    background: #170d1a;
}

.forum-index-board-top {
    grid-template-columns:
        minmax(0, 1fr)
        64px
        64px
        minmax(220px, 0.42fr);
    min-height: 102px;
    overflow: hidden;
    border-color: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    background: #100a13;
}

.forum-index-board-copy {
    padding: 20px 26px;
    background: transparent;
}

.forum-index-board-description {
    max-width: none;
}

.forum-index-board-stat {
    position: relative;
    z-index: auto;
    min-width: 0;
    padding: 12px 5px;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.018);
}

.forum-index-board-stat::before,
.forum-index-last-post::before {
    display: none !important;
    content: none !important;
}

.forum-index-board-stat strong {
    font-size: 17px;
}

.forum-index-board-stat span {
    font-size: 8px;
    letter-spacing: 0.06em;
}

.forum-index-last-post {
    position: relative;
    z-index: auto;
    min-width: 0;
    padding: 15px 16px;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.012);
}

.forum-index-last-thread {
    max-width: 190px;
}

.forum-index-board-meta-strip {
    border-color: rgba(255, 255, 255, 0.1);
    background: #120b15;
}

.forum-index-category-empty {
    border-color: rgba(255, 255, 255, 0.1);
    background: #100a13;
}

@media (max-width: 1080px) {
    .forum-index-board-top {
        grid-template-columns:
            minmax(0, 1fr)
            60px
            60px
            minmax(205px, 0.38fr);
    }

    .forum-index-last-thread {
        max-width: 175px;
    }
}

@media (max-width: 860px) {
    .forum-index-board-top {
        grid-template-columns:
            minmax(0, 1fr)
            62px
            62px;
    }

    .forum-index-last-post {
        grid-column: 1 / -1;
        min-height: 70px;
        padding-left: 20px;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        border-left: 0;
    }

    .forum-index-board-stat {
        border-left-color: rgba(255, 255, 255, 0.08);
    }
}

@media (max-width: 640px) {
    .forum-index-board-top {
        grid-template-columns: 1fr 1fr;
    }

    .forum-index-board-copy {
        grid-column: 1 / -1;
        padding: 17px 15px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .forum-index-board-stat {
        min-height: 60px;
        border-left: 0;
    }

    .forum-index-board-stat + .forum-index-board-stat {
        border-left: 1px solid rgba(255, 255, 255, 0.08);
    }
}

/* ==========================================================================
   FORUM ROWS — FINAL FLAT RECTANGULAR OVERRIDE
   Applies to forums.php main board rows and forum.php sub-board rows.
   This intentionally overrides all legacy clipped/parallelogram experiments.
   ========================================================================== */

:root {
    --forum-flat-surface: #100a13;
    --forum-flat-surface-soft: #130c16;
    --forum-flat-surface-hover: #160e19;
    --forum-flat-border: rgba(116, 64, 129, 0.36);
    --forum-flat-divider: rgba(255, 255, 255, 0.075);
}

/* --------------------------------------------------------------------------
   forums.php — main forum rows
   -------------------------------------------------------------------------- */

.forum-index-board-top {
    display: grid !important;
    grid-template-columns:
        minmax(0, 1fr)
        72px
        72px
        minmax(205px, 0.34fr) !important;
    column-gap: 0 !important;
    min-height: 100px !important;
    overflow: hidden !important;
    border: 1px solid var(--forum-flat-border) !important;
    border-radius: 0 !important;
    background: var(--forum-flat-surface) !important;
}

.forum-index-board-copy,
.forum-index-thread-stat,
.forum-index-post-stat,
.forum-index-last-post {
    position: relative !important;
    isolation: auto !important;
    min-width: 0 !important;
    min-height: 100px !important;
    margin: 0;
    clip-path: none;
    transform: none !important;
    filter: none;
    border: 0 !important;
    border-radius: 0;
    box-shadow: none;
    background: var(--forum-flat-surface) !important;
}

.forum-index-board-copy {
    padding: 20px 26px !important;
}

.forum-index-thread-stat,
.forum-index-post-stat {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 6px !important;
    text-align: center !important;
    border-left: 1px solid var(--forum-flat-divider) !important;
    background: var(--forum-flat-surface-soft) !important;
}

.forum-index-last-post {
    display: flex !important;
    align-items: center !important;
    padding: 14px 16px !important;
    border-left: 1px solid var(--forum-flat-divider) !important;
    background: var(--forum-flat-surface-soft) !important;
}

/* Remove every legacy shape/fill pseudo layer. */
.forum-index-board-copy::before,
.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,
.forum-index-last-post::after {
    content: none;
    display: none !important;
    clip-path: none;
    background: transparent !important;
    transform: none !important;
}

.forum-index-board-copy:hover {
    background: var(--forum-flat-surface-hover) !important;
}

/* --------------------------------------------------------------------------
   forum.php — sub-board rows
   -------------------------------------------------------------------------- */

.forum-subboard-row {
    display: grid !important;
    grid-template-columns:
        minmax(0, 1fr)
        72px
        72px
        minmax(205px, 0.34fr) !important;
    column-gap: 0 !important;
    min-height: 100px !important;
    overflow: hidden !important;
    border: 1px solid var(--forum-flat-border) !important;
    border-radius: 0 !important;
    background: var(--forum-flat-surface) !important;
}

.forum-subboard-copy,
.forum-subboard-stat,
.forum-subboard-last-post {
    position: relative !important;
    isolation: auto !important;
    min-width: 0 !important;
    min-height: 100px !important;
    margin: 0 !important;
    clip-path: none !important;
    transform: none !important;
    filter: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: var(--forum-flat-surface) !important;
}

.forum-subboard-copy {
    padding: 20px 26px !important;
}

.forum-subboard-stat {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 6px !important;
    text-align: center !important;
    border-left: 1px solid var(--forum-flat-divider) !important;
    background: var(--forum-flat-surface-soft) !important;
}

.forum-subboard-last-post {
    display: flex !important;
    align-items: center !important;
    padding: 14px 16px !important;
    border-left: 1px solid var(--forum-flat-divider) !important;
    background: var(--forum-flat-surface-soft) !important;
}

.forum-subboard-copy::before,
.forum-subboard-copy::after,
.forum-subboard-stat::before,
.forum-subboard-stat::after,
.forum-subboard-last-post::before,
.forum-subboard-last-post::after {
    content: none !important;
    display: none !important;
    clip-path: none !important;
    background: transparent !important;
    transform: none !important;
}

.forum-subboard-copy:hover {
    background: var(--forum-flat-surface-hover) !important;
}

/* --------------------------------------------------------------------------
   Responsive behavior for both row types
   -------------------------------------------------------------------------- */

@media (max-width: 1050px) {
    .forum-index-board-top,
    .forum-subboard-row {
        grid-template-columns:
            minmax(0, 1fr)
            66px
            66px
            minmax(185px, 0.32fr) !important;
    }
}

@media (max-width: 860px) {
    .forum-index-board-top,
    .forum-subboard-row {
        grid-template-columns:
            minmax(0, 1fr)
            68px
            68px !important;
    }

    .forum-index-last-post,
    .forum-subboard-last-post {
        grid-column: 1 / -1 !important;
        min-height: 66px !important;
        margin: 0 !important;
        padding: 13px 18px !important;
        border-top: 1px solid var(--forum-flat-divider) !important;
        border-left: 0 !important;
        clip-path: none !important;
    }
}

@media (max-width: 640px) {
    .forum-index-board-top,
    .forum-subboard-row {
        grid-template-columns: 1fr 1fr !important;
    }

    .forum-index-board-copy,
    .forum-subboard-copy {
        grid-column: 1 / -1;
        min-height: auto !important;
        padding: 16px 15px !important;
        border-bottom: 1px solid var(--forum-flat-divider);
    }

    .forum-index-thread-stat,
    .forum-index-post-stat,
    .forum-subboard-stat {
        min-height: 58px !important;
        border-left: 0 !important;
    }

    .forum-index-post-stat,
    .forum-subboard-stat + .forum-subboard-stat {
        border-left: 1px solid var(--forum-flat-divider) !important;
    }
}

/* --------------------------------------------------------------------------
   Forum structure drag/drop hierarchy editor
   -------------------------------------------------------------------------- */
.forum-structure-forums,
.forum-structure-subforums {
    position: relative;
    min-height: 42px;
    transition:
        border-color var(--transition),
        background-color var(--transition),
        box-shadow var(--transition);
}

.forum-structure-forums.is-empty,
.forum-structure-subforums.is-empty {
    min-height: 54px;
}

.forum-structure-drop-hint,
.forum-structure-forums > .forum-structure-empty[data-forum-drop-hint] {
    margin: 0;
    padding: 12px 14px;
    border: 1px dashed rgba(219, 193, 125, 0.18);
    border-radius: 8px;
    color: var(--color-text-muted);
    font-size: 0.88rem;
    text-align: center;
}

[data-forum-sort-container].is-valid-drop-zone {
    border-color: rgba(219, 193, 125, 0.32);
}

[data-forum-sort-container].is-valid-drop-zone.is-drag-over {
    background: rgba(219, 193, 125, 0.055);
    box-shadow: inset 0 0 0 1px rgba(219, 193, 125, 0.2);
}

[data-forum-sort-container].is-invalid-drop-zone {
    opacity: 0.58;
}

[data-forum-sort-item].is-drop-before::before,
[data-forum-sort-item].is-drop-after::after {
    content: '';
    display: block;
    height: 2px;
    margin: 5px 0;
    border-radius: 999px;
    background: var(--color-gold-light);
    box-shadow: 0 0 8px rgba(219, 193, 125, 0.28);
}

.forum-structure-main-group.is-dragging,
.forum-structure-forum.is-dragging {
    opacity: 0.36;
}

.forum-structure-subforums.is-drag-over,
.forum-structure-forums.is-drag-over {
    outline: 1px dashed rgba(219, 193, 125, 0.42);
    outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Forum board staff-online + thread quick actions
   -------------------------------------------------------------------------- */
.forum-board-staff-online {
    margin: 18px 0 24px;
    padding: 14px 18px 16px;
    border-top: 1px solid rgba(219, 193, 125, 0.16);
    border-bottom: 1px solid rgba(219, 193, 125, 0.16);
    text-align: center;
}

.forum-board-staff-online h2 {
    margin: 0 0 6px;
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-gold-light);
}

.forum-board-staff-online-names {
    margin: 0;
    color: var(--color-text-muted);
    line-height: 1.6;
}

.forum-board-staff-online-names a {
    text-decoration: none;
    font-weight: 600;
}

.forum-board-staff-online-names a:hover,
.forum-board-staff-online-names a:focus-visible {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.forum-thread-quick-actions {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto minmax(180px, 0.7fr) minmax(180px, 0.7fr) auto;
    gap: 12px;
    align-items: end;
    margin: 0 0 14px;
    padding: 14px 16px;
    border: 1px solid rgba(219, 193, 125, 0.18);
    border-radius: var(--radius-md);
    background: rgba(13, 8, 15, 0.78);
}

.forum-thread-quick-actions-heading {
    align-self: center;
    min-width: 0;
}

.forum-thread-quick-actions-heading strong,
.forum-thread-quick-actions-heading span {
    display: block;
}

.forum-thread-quick-actions-heading strong {
    margin-bottom: 3px;
    font-family: var(--font-heading);
    font-size: 0.95rem;
    letter-spacing: 0.035em;
    color: var(--color-gold-light);
}

.forum-thread-quick-actions-heading span {
    color: var(--color-text-muted);
    font-size: 0.82rem;
    line-height: 1.4;
}

.forum-thread-quick-select-all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    color: var(--color-text-muted);
    font-size: 0.84rem;
    white-space: nowrap;
    cursor: pointer;
}

.forum-thread-quick-select-all input,
.forum-thread-bulk-checkbox input {
    accent-color: var(--color-gold);
}

.forum-thread-quick-field {
    display: grid;
    gap: 5px;
}

.forum-thread-quick-field > span {
    color: var(--color-text-muted);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.055em;
    text-transform: uppercase;
}

.forum-thread-quick-field select {
    width: 100%;
    min-height: 40px;
    border: 1px solid rgba(219, 193, 125, 0.18);
    border-radius: 7px;
    background: rgba(7, 4, 9, 0.92);
    color: var(--color-text);
    padding: 8px 34px 8px 10px;
}

.forum-thread-quick-field[hidden] {
    display: none !important;
}

.forum-thread-quick-apply {
    min-height: 40px;
    align-self: end;
}

.forum-thread-quick-action-notice {
    margin: 0 0 14px;
    padding: 10px 13px;
    border-radius: 7px;
    font-size: 0.86rem;
    line-height: 1.45;
}

.forum-thread-quick-action-notice.is-success {
    border: 1px solid rgba(125, 184, 145, 0.28);
    background: rgba(73, 121, 88, 0.1);
    color: #c8ddcf;
}

.forum-thread-quick-action-notice.is-warning {
    border: 1px solid rgba(219, 193, 125, 0.24);
    background: rgba(219, 193, 125, 0.07);
    color: var(--color-text-muted);
}

.forum-thread-bulk-checkbox {
    width: 23px;
    height: 23px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 5px;
    cursor: pointer;
}

.forum-thread-bulk-checkbox input {
    width: 16px;
    height: 16px;
    margin: 0;
    cursor: pointer;
}

@media (max-width: 1180px) {
    .forum-thread-quick-actions {
        grid-template-columns: minmax(220px, 1fr) auto minmax(180px, 0.8fr) auto;
    }

    .forum-thread-quick-field.is-conditional:not([hidden]) {
        grid-column: 1 / -2;
    }
}

@media (max-width: 760px) {
    .forum-thread-quick-actions {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .forum-thread-quick-actions-heading,
    .forum-thread-quick-select-all,
    .forum-thread-quick-field,
    .forum-thread-quick-field.is-conditional:not([hidden]),
    .forum-thread-quick-apply {
        grid-column: 1;
    }

    .forum-thread-quick-apply {
        width: 100%;
    }

    .forum-board-staff-online {
        margin-top: 14px;
        padding-inline: 10px;
    }
}

/* ================================================================
   Forum thread quick-actions toggle
   ================================================================ */
.forum-thread-titlebar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.forum-thread-quick-toggle {
    min-height: 32px;
    cursor: pointer;
}

.forum-thread-quick-actions[hidden],
.forum-thread-bulk-checkbox[hidden] {
    display: none !important;
}

@media (max-width: 640px) {
    .forum-thread-titlebar-actions {
        width: 100%;
        justify-content: flex-start;
    }
}

/* ================================================================
   Threads titlebar action buttons — force side-by-side layout
   ================================================================ */
.forum-thread-list-section .forum-board-section-titlebar > .forum-thread-titlebar-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: nowrap;
    width: auto;
    min-width: max-content;
}

.forum-thread-list-section .forum-thread-titlebar-actions .forum-new-thread-placeholder,
.forum-thread-list-section .forum-thread-titlebar-actions .forum-thread-quick-toggle {
    width: auto;
    min-width: 0;
    flex: 0 0 auto;
    margin: 0;
    white-space: nowrap;
}

@media (max-width: 640px) {
    .forum-thread-list-section .forum-board-section-titlebar > .forum-thread-titlebar-actions {
        width: auto;
        justify-content: flex-end;
        flex-direction: row;
        flex-wrap: nowrap;
    }
}

/* ==========================================================================
   2026-09-18 — Common Room: open editorial layout, reduced card treatment
   ========================================================================== */

/* Main Common Room content should feel like one continuous House page rather
   than a collection of separate dashboard cards. Sidebar styling is excluded. */
.house-common-room-page .house-common-room-main .house-room-panel {
    overflow: visible;
    border: 0;
    border-top: 1px solid color-mix(in srgb, var(--house-primary) 28%, #2a1c2b);
    border-bottom: 1px solid color-mix(in srgb, var(--house-primary) 18%, #211523);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    transition: none;
}

.house-common-room-page .house-common-room-main .house-room-panel:hover {
    border-color: color-mix(in srgb, var(--house-primary) 28%, #2a1c2b);
    box-shadow: none;
    transform: none;
}

/* Welcome/About becomes a spacious section instead of a large card. */
.house-common-room-page .house-room-welcome-panel {
    padding-block: 8px 28px;
    border-top: 0 !important;
}

/* The Inside [House] intro becomes a section banner, not another card. */
.house-common-room-page .house-room-dashboard-heading {
    overflow: visible;
    padding: 26px 4px 28px;
    border: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--house-primary) 24%, #2a1c2b);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.house-common-room-page .house-room-dashboard-heading::after {
    display: none;
}

/* Remove boxed/fill title bars from the content panels. */
.house-common-room-page .house-common-room-main .house-room-panel-heading,
.house-common-room-page .house-room-featured-announcement .house-room-panel-heading {
    padding: 18px 2px 10px;
    border: 0;
    background: transparent;
}

/* Cleaner sans-serif type for content-section title bars only. */
.house-common-room-page .house-common-room-main .house-room-panel-heading h2 {
    margin: 0;
    color: var(--house-highlight);
    font-family: 'Segoe UI', Arial, Helvetica, sans-serif;
    font-size: 1rem;
    font-weight: 650;
    line-height: 1.35;
    letter-spacing: 0.01em;
}

.house-common-room-page .house-common-room-main .house-room-panel-body {
    padding: 12px 2px 24px;
}

/* Latest announcement stays visually important without becoming a giant card. */
.house-common-room-page .house-room-featured-announcement {
    position: relative;
    border-color: color-mix(in srgb, var(--house-accent) 30%, #2a1c2b);
    background: transparent;
}

.house-common-room-page .house-room-featured-announcement::before {
    right: 12px;
    top: 38px;
    opacity: 0.55;
}

.house-common-room-page .house-room-featured-announcement .house-room-panel-body {
    padding: 12px 2px 28px;
}

/* Announcement thread title should read like a thread link, not a page heading. */
.house-common-room-page .house-room-featured-announcement .house-room-announcement h3 {
    font-size: 1.08rem;
    line-height: 1.4;
    font-family: 'Segoe UI', Arial, Helvetica, sans-serif;
    font-weight: 650;
}

.house-common-room-page .house-room-featured-announcement .house-room-announcement h3 a {
    font-size: inherit;
    line-height: inherit;
}

/* Paired areas read as columns in one section instead of two floating cards. */
.house-common-room-page .house-common-room-community-grid,
.house-common-room-page .house-common-room-identity-grid,
.house-common-room-page .house-common-room-life-grid {
    gap: 0;
    border-top: 1px solid color-mix(in srgb, var(--house-primary) 20%, #251827);
    border-bottom: 1px solid color-mix(in srgb, var(--house-primary) 14%, #211523);
}

.house-common-room-page .house-common-room-community-grid > .house-room-panel,
.house-common-room-page .house-common-room-identity-grid > .house-room-panel,
.house-common-room-page .house-common-room-life-grid > .house-room-panel {
    border-top: 0;
    border-bottom: 0;
    padding-inline: 18px;
}

.house-common-room-page .house-common-room-community-grid > .house-room-panel:first-child,
.house-common-room-page .house-common-room-identity-grid > .house-room-panel:first-child,
.house-common-room-page .house-common-room-life-grid > .house-room-panel:first-child {
    padding-left: 2px;
}

.house-common-room-page .house-common-room-community-grid > .house-room-panel + .house-room-panel,
.house-common-room-page .house-common-room-identity-grid > .house-room-panel + .house-room-panel,
.house-common-room-page .house-common-room-life-grid > .house-room-panel + .house-room-panel {
    border-left: 1px solid color-mix(in srgb, var(--house-primary) 20%, #2a1c2b);
}

.house-common-room-page .house-common-room-community-grid > .house-room-panel:last-child,
.house-common-room-page .house-common-room-identity-grid > .house-room-panel:last-child,
.house-common-room-page .house-common-room-life-grid > .house-room-panel:last-child {
    padding-right: 2px;
}

/* Mascot artwork should sit naturally in the section instead of in its own mini-card. */
.house-common-room-page .house-room-mascot-panel .house-room-mascot-wrap {
    min-height: 230px;
    padding: 8px;
    border-radius: 0;
    background: radial-gradient(circle, color-mix(in srgb, var(--house-primary) 12%, transparent), transparent 70%);
}

/* Status/date pills were another small card cue; simplify them. */
.house-common-room-page .house-room-birthday-date,
.house-common-room-page .house-room-member-status {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

@media (max-width: 1080px) {
    .house-common-room-page .house-common-room-community-grid,
    .house-common-room-page .house-common-room-identity-grid {
        gap: 0;
    }

    .house-common-room-page .house-common-room-community-grid > .house-room-panel,
    .house-common-room-page .house-common-room-identity-grid > .house-room-panel {
        padding-inline: 2px;
    }

    .house-common-room-page .house-common-room-community-grid > .house-room-panel + .house-room-panel,
    .house-common-room-page .house-common-room-identity-grid > .house-room-panel + .house-room-panel {
        border-left: 0;
        border-top: 1px solid color-mix(in srgb, var(--house-primary) 18%, #2a1c2b);
    }
}

@media (max-width: 900px) {
    .house-common-room-page .house-common-room-life-grid {
        gap: 0;
    }

    .house-common-room-page .house-common-room-life-grid > .house-room-panel {
        padding-inline: 2px;
    }

    .house-common-room-page .house-common-room-life-grid > .house-room-panel + .house-room-panel {
        border-left: 0;
        border-top: 1px solid color-mix(in srgb, var(--house-primary) 18%, #2a1c2b);
    }
}

/* ==========================================================================
   2026-09-18 — Common Room: cohesive section-panels refinement
   Replaces the overly-open editorial treatment with one surface per major
   section while avoiding the original card-per-item dashboard appearance.
   ========================================================================== */

/* Restore visual structure to the main content without touching the sidebar. */
.house-common-room-page .house-common-room-main .house-room-panel {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

/* Welcome/About remains a single intentional feature panel. */
.house-common-room-page .house-room-welcome-panel {
    overflow: hidden;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--house-primary) 48%, #392537) !important;
    border-radius: 16px;
    background:
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--house-primary) 9%, transparent), transparent 28%),
        linear-gradient(
            145deg,
            color-mix(in srgb, var(--house-dark) 88%, #160d15),
            color-mix(in srgb, var(--house-secondary) 31%, #130b13)
        );
}

/* Keep the Inside [House] area as a clean transition banner. */
.house-common-room-page .house-room-dashboard-heading {
    padding: 24px 28px;
    border: 1px solid color-mix(in srgb, var(--house-primary) 40%, #352232);
    border-radius: 14px;
    background: linear-gradient(
        115deg,
        color-mix(in srgb, var(--house-primary) 8%, #160d15),
        color-mix(in srgb, var(--house-dark) 92%, #100911)
    );
    box-shadow: none;
}

.house-common-room-page .house-room-dashboard-heading::after {
    display: block;
    opacity: 0.34;
}

/* Featured announcement gets one contained surface. */
.house-common-room-page .house-room-featured-announcement {
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--house-primary) 44%, #382434);
    border-radius: 14px;
    background: linear-gradient(
        145deg,
        color-mix(in srgb, var(--house-secondary) 34%, #150c14),
        color-mix(in srgb, var(--house-dark) 91%, #100911)
    );
}

.house-common-room-page .house-room-featured-announcement::before {
    right: 22px;
    top: 62px;
    opacity: 0.38;
}

/* Major two-column groups become ONE panel, not two cards. */
.house-common-room-page .house-common-room-community-grid,
.house-common-room-page .house-common-room-identity-grid,
.house-common-room-page .house-common-room-life-grid {
    gap: 0;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--house-primary) 38%, #342132);
    border-radius: 14px;
    background: linear-gradient(
        145deg,
        color-mix(in srgb, var(--house-secondary) 23%, #130b13),
        color-mix(in srgb, var(--house-dark) 94%, #0e080f)
    );
}

.house-common-room-page .house-common-room-community-grid > .house-room-panel,
.house-common-room-page .house-common-room-identity-grid > .house-room-panel,
.house-common-room-page .house-common-room-life-grid > .house-room-panel {
    padding: 0;
    border: 0 !important;
    border-radius: 0;
    background: transparent;
}

.house-common-room-page .house-common-room-community-grid > .house-room-panel + .house-room-panel,
.house-common-room-page .house-common-room-identity-grid > .house-room-panel + .house-room-panel,
.house-common-room-page .house-common-room-life-grid > .house-room-panel + .house-room-panel {
    border-left: 1px solid color-mix(in srgb, var(--house-primary) 24%, #2b1a2a) !important;
}

/* Section title bars: cleaner site font, restrained House tint. */
.house-common-room-page .house-common-room-main .house-room-panel-heading,
.house-common-room-page .house-room-featured-announcement .house-room-panel-heading {
    padding: 14px 18px;
    border: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--house-primary) 22%, #2a1928);
    background: color-mix(in srgb, var(--house-primary) 8%, transparent);
}

.house-common-room-page .house-common-room-main .house-room-panel-heading h2 {
    margin: 0;
    color: var(--house-highlight);
    font-family: inherit;
    font-size: 0.96rem;
    font-weight: 600;
    line-height: 1.45;
    letter-spacing: 0.025em;
}

.house-common-room-page .house-common-room-main .house-room-panel-body {
    padding: 20px 22px 22px;
}

/* Announcement thread title should not compete with page/section headings. */
.house-common-room-page .house-room-featured-announcement .house-room-announcement h3,
.house-common-room-page .house-room-featured-announcement .house-room-announcement h3 a {
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.45;
}

.house-common-room-page .house-room-featured-announcement .house-room-announcement-content {
    margin-top: 14px;
}

/* Give the paired content breathing room without making mini-cards. */
.house-common-room-page .house-room-mascot-panel .house-room-mascot-wrap {
    min-height: 230px;
    padding: 10px 4px;
    border-radius: 0;
    background: radial-gradient(circle, color-mix(in srgb, var(--house-primary) 9%, transparent), transparent 70%);
}

/* Restore compact status/date treatments while keeping them subtle. */
.house-common-room-page .house-room-birthday-date,
.house-common-room-page .house-room-member-status {
    padding: 5px 9px;
    border: 1px solid color-mix(in srgb, var(--house-primary) 22%, #2a1a29);
    border-radius: 999px;
    background: color-mix(in srgb, var(--house-dark) 72%, transparent);
}

@media (max-width: 1080px) {
    .house-common-room-page .house-common-room-community-grid > .house-room-panel + .house-room-panel,
    .house-common-room-page .house-common-room-identity-grid > .house-room-panel + .house-room-panel {
        border-left: 0 !important;
        border-top: 1px solid color-mix(in srgb, var(--house-primary) 24%, #2b1a2a) !important;
    }
}

@media (max-width: 900px) {
    .house-common-room-page .house-common-room-life-grid > .house-room-panel + .house-room-panel {
        border-left: 0 !important;
        border-top: 1px solid color-mix(in srgb, var(--house-primary) 24%, #2b1a2a) !important;
    }
}

/* ==========================================================================
   COMMON ROOM — LATEST HOUSE ANNOUNCEMENT INTEGRATION
   Removes the remaining card/titlebar treatment from the featured announcement.
   ========================================================================== */
.house-common-room-page .house-room-featured-announcement {
    position: relative;
    overflow: hidden;
    padding: 0 22px 24px;
    border: 1px solid color-mix(in srgb, var(--house-primary) 34%, #32202f);
    border-radius: 14px;
    background: linear-gradient(
        145deg,
        color-mix(in srgb, var(--house-primary) 5%, #130b13),
        color-mix(in srgb, var(--house-dark) 95%, #0d080e)
    );
    box-shadow: none;
}

.house-common-room-page .house-room-featured-announcement .house-room-panel-heading {
    margin: 0;
    padding: 18px 0 13px;
    border: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--house-primary) 25%, #291827);
    background: transparent;
}

.house-common-room-page .house-room-featured-announcement .house-room-panel-heading h2 {
    margin: 0;
    color: var(--house-highlight);
    font-family: inherit;
    font-size: 0.98rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.02em;
}

.house-common-room-page .house-room-featured-announcement .house-room-panel-body {
    padding: 20px 0 0;
}

.house-common-room-page .house-room-featured-announcement .house-room-announcement h3,
.house-common-room-page .house-room-featured-announcement .house-room-announcement h3 a {
    margin: 0;
    font-family: inherit;
    font-size: 0.96rem;
    font-weight: 600;
    line-height: 1.4;
}

.house-common-room-page .house-room-featured-announcement .house-room-announcement-meta {
    margin-top: 8px;
    font-size: 0.88rem;
}

.house-common-room-page .house-room-featured-announcement .house-room-announcement-content {
    max-width: calc(100% - 110px);
    margin-top: 16px;
}

.house-common-room-page .house-room-featured-announcement::before {
    right: 24px;
    top: 74px;
    opacity: 0.22;
}

@media (max-width: 700px) {
    .house-common-room-page .house-room-featured-announcement {
        padding: 0 18px 20px;
    }

    .house-common-room-page .house-room-featured-announcement .house-room-announcement-content {
        max-width: 100%;
    }

    .house-common-room-page .house-room-featured-announcement::before {
        opacity: 0.14;
    }
}

/* ==========================================================================
   COMMON ROOM — ANNOUNCEMENT MATCHES STANDARD SECTION PANELS
   ========================================================================== */
.house-common-room-page .house-room-featured-announcement {
    position: relative;
    overflow: hidden;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--house-primary) 38%, #342132);
    border-radius: 14px;
    background: linear-gradient(
        145deg,
        color-mix(in srgb, var(--house-secondary) 23%, #130b13),
        color-mix(in srgb, var(--house-dark) 94%, #0e080f)
    );
    box-shadow: none;
}

.house-common-room-page .house-room-featured-announcement .house-room-panel-heading {
    margin: 0;
    padding: 14px 18px;
    border: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--house-primary) 22%, #2a1928);
    background: color-mix(in srgb, var(--house-primary) 8%, transparent);
}

.house-common-room-page .house-room-featured-announcement .house-room-panel-heading h2 {
    margin: 0;
    color: var(--house-highlight);
    font-family: inherit;
    font-size: 0.96rem;
    font-weight: 600;
    line-height: 1.45;
    letter-spacing: 0.025em;
}

.house-common-room-page .house-room-featured-announcement .house-room-panel-body {
    padding: 20px 22px 22px;
}

.house-common-room-page .house-room-featured-announcement .house-room-announcement h3,
.house-common-room-page .house-room-featured-announcement .house-room-announcement h3 a {
    margin: 0;
    font-family: inherit;
    font-size: 0.96rem;
    font-weight: 600;
    line-height: 1.45;
}

.house-common-room-page .house-room-featured-announcement .house-room-announcement-content {
    max-width: none;
    margin-top: 14px;
}

/* Remove the special decorative mark so this panel matches its siblings. */
.house-common-room-page .house-room-featured-announcement::before {
    display: none;
}

@media (max-width: 700px) {
    .house-common-room-page .house-room-featured-announcement {
        padding: 0;
    }

    .house-common-room-page .house-room-featured-announcement .house-room-panel-body {
        padding: 18px;
    }
}
/* ==========================================================================
   THE LIVING LEDGER
   ========================================================================== */

.living-ledger-page {
    min-height: 100vh;
}

.living-ledger-intro {
    position: relative;
    overflow: hidden;

    border-bottom: 1px solid rgba(196, 161, 90, 0.16);

    background:
        radial-gradient(circle at 50% 0%, rgba(116, 64, 129, 0.16), transparent 44%),
        linear-gradient(180deg, rgba(17, 7, 20, 0.98), rgba(12, 6, 15, 0.96));
}

.living-ledger-intro::before,
.living-ledger-intro::after {
    content: '';

    position: absolute;

    top: 50%;

    width: min(20vw, 220px);

    height: 1px;

    background: linear-gradient(90deg, transparent, rgba(196, 161, 90, 0.32));

    pointer-events: none;
}

.living-ledger-intro::before {
    left: 0;
}

.living-ledger-intro::after {
    right: 0;

    transform: rotate(180deg);
}

.living-ledger-intro .section-inner {
    position: relative;

    z-index: 1;

    padding-top: clamp(52px, 6vw, 82px);

    padding-bottom: clamp(50px, 6vw, 78px);

    text-align: center;
}

.living-ledger-intro .academy-overline {
    margin: 0 0 10px;

    color: var(--color-gold);

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

    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.living-ledger-intro h1 {
    margin: 0;

    color: var(--color-white);

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

    font-weight: 500;
    line-height: 1.08;

    letter-spacing: 0.015em;

    text-shadow: 0 3px 24px rgba(0, 0, 0, 0.62);
}

.living-ledger-intro-copy {
    max-width: 700px;

    margin: 18px auto 0;

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

    font-size: clamp(14px, 1.7vw, 16px);

    line-height: 1.8;
}

.living-ledger-summary {
    margin-top: 22px;

    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;

    gap: 8px 12px;

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

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

    letter-spacing: 0.085em;
    text-transform: uppercase;
}

.living-ledger-summary strong {
    color: var(--color-gold-light);

    font-weight: 800;
}

.living-ledger-content {
    position: relative;
}

.living-ledger-layout {
    padding-top: clamp(34px, 4vw, 54px);
}

.living-ledger-main {
    min-width: 0;
}

.living-ledger-houses {
    display: grid;

    gap: clamp(24px, 3vw, 34px);
}

.living-ledger-house {
    --ledger-house-display: #c8bec5;
    --ledger-house-primary: #5b355f;
    --ledger-house-secondary: #2b182f;
    --ledger-house-accent: #c7a55b;
    --ledger-house-dark: #100b13;
    --ledger-house-highlight: #e3d2ae;

    position: relative;
    overflow: hidden;

    border: 1px solid color-mix(in srgb, var(--ledger-house-primary) 46%, rgba(255, 255, 255, 0.08));

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

    background: linear-gradient(
        145deg,
        color-mix(in srgb, var(--ledger-house-secondary) 32%, #160a1a),
        color-mix(in srgb, var(--ledger-house-dark) 94%, #0e0711)
    );

    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.2);

    isolation: isolate;
}

.living-ledger-house::before {
    content: '';

    position: absolute;

    inset: 0 auto 0 0;

    width: 4px;

    background: linear-gradient(180deg, var(--ledger-house-accent), var(--ledger-house-primary), transparent);

    opacity: 0.78;

    pointer-events: none;
}

.living-ledger-house::after {
    content: '';

    position: absolute;

    z-index: -1;

    top: -120px;
    right: -90px;

    width: 310px;
    height: 310px;

    border-radius: 50%;

    background: radial-gradient(
        circle,
        color-mix(in srgb, var(--ledger-house-primary) 16%, transparent),
        transparent 70%
    );

    pointer-events: none;
}

.living-ledger-house-header {
    position: relative;

    min-height: 132px;

    padding: 22px 24px;

    display: grid;

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

    gap: 22px;

    align-items: center;

    border-bottom: 1px solid color-mix(in srgb, var(--ledger-house-primary) 25%, rgba(255, 255, 255, 0.05));

    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--ledger-house-primary) 12%, transparent),
        transparent 72%
    );
}

.living-ledger-house-crest-wrap {
    width: 96px;
    height: 96px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.living-ledger-house-crest-wrap picture {
    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;
}

.living-ledger-house-crest {
    width: 100%;
    height: 100%;

    object-fit: contain;

    filter: drop-shadow(0 8px 15px rgba(0, 0, 0, 0.34));
}

.living-ledger-house-crest-fallback {
    width: 82px;
    height: 82px;

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

    border: 1px solid color-mix(in srgb, var(--ledger-house-accent) 55%, transparent);

    border-radius: 50%;

    background: color-mix(in srgb, var(--ledger-house-primary) 15%, rgba(0, 0, 0, 0.16));

    color: var(--ledger-house-highlight);

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

    font-size: 34px;
}

.living-ledger-house-heading {
    min-width: 0;
}

.living-ledger-house-kicker {
    margin: 0 0 2px;

    color: var(--ledger-house-accent);

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

    letter-spacing: 0.17em;
    text-transform: uppercase;
}

.living-ledger-house-heading h2 {
    margin: 0;

    color: var(--ledger-house-display);

    font-size: clamp(25px, 3vw, 34px);

    font-weight: 500;
    line-height: 1.15;

    letter-spacing: 0.02em;

    overflow-wrap: anywhere;
}

.living-ledger-house-count {
    margin: 8px 0 0;

    color: color-mix(in srgb, var(--ledger-house-highlight) 75%, var(--color-text-muted));

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

    letter-spacing: 0.035em;
}

.living-ledger-house-body {
    padding: 8px 24px 22px;
}

.living-ledger-member-list {
    display: grid;
}

.living-ledger-member {
    min-height: 52px;

    padding: 12px 2px;

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

    gap: 8px 11px;

    border-bottom: 1px solid color-mix(in srgb, var(--ledger-house-primary) 18%, rgba(255, 255, 255, 0.04));
}

.living-ledger-member:last-child {
    border-bottom: 0;
}

.living-ledger-online-mark {
    width: 7px;
    height: 7px;

    flex: 0 0 7px;

    border-radius: 50%;

    background: var(--ledger-house-accent);

    box-shadow:
        0 0 0 3px color-mix(in srgb, var(--ledger-house-accent) 13%, transparent),
        0 0 10px color-mix(in srgb, var(--ledger-house-accent) 25%, transparent);
}

.living-ledger-member-name {
    min-width: 0;

    color: var(--ledger-house-display);

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

    line-height: 1.4;

    text-decoration: none;

    overflow-wrap: anywhere;

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

.living-ledger-member-name:hover,
.living-ledger-member-name:focus-visible {
    color: var(--ledger-house-highlight);

    opacity: 0.94;

    text-decoration: none;
}

.living-ledger-staff-mark {
    padding: 3px 7px;

    border: 1px solid color-mix(in srgb, var(--ledger-house-accent) 28%, transparent);

    border-radius: 999px;

    background: color-mix(in srgb, var(--ledger-house-accent) 7%, transparent);

    color: color-mix(in srgb, var(--ledger-house-highlight) 84%, var(--color-text-muted));

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

    line-height: 1.3;

    letter-spacing: 0.075em;
    text-transform: uppercase;
}

.living-ledger-house-empty {
    margin: 12px 0 0;

    padding: 18px 2px 5px;

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

    font-size: 13px;
    font-style: italic;

    line-height: 1.7;
}

.living-ledger-empty-page {
    padding: clamp(48px, 8vw, 86px) 28px;

    border: 1px solid rgba(196, 161, 90, 0.14);

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

    background: linear-gradient(180deg, rgba(28, 13, 33, 0.92), rgba(16, 7, 19, 0.96));

    text-align: center;
}

.living-ledger-empty-page h2 {
    margin: 0 0 10px;

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

    font-size: clamp(23px, 3vw, 31px);

    font-weight: 500;
}

.living-ledger-empty-page p {
    margin: 0;

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

/* ==========================================================================
   THE LIVING LEDGER — TABLET
   ========================================================================== */

@media (max-width: 880px) {
    .living-ledger-main {
        margin-top: 0;
    }

    .living-ledger-house-header {
        min-height: 124px;

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

        gap: 18px;
    }

    .living-ledger-house-crest-wrap {
        width: 88px;
        height: 88px;
    }
}

/* ==========================================================================
   THE LIVING LEDGER — MOBILE
   ========================================================================== */

@media (max-width: 700px) {
    .living-ledger-intro .section-inner {
        width: min(calc(100% - 64px), var(--content-width));

        margin-left: auto;
        margin-right: auto;

        padding-top: 42px;
        padding-bottom: 42px;
    }

    .living-ledger-intro::before,
    .living-ledger-intro::after {
        display: none;
    }

    .living-ledger-intro h1 {
        font-size: clamp(34px, 10vw, 46px);
    }

    .living-ledger-intro-copy {
        font-size: 14px;
    }

    .living-ledger-summary {
        margin-top: 18px;

        font-size: 10px;
    }

    .living-ledger-layout {
        padding-top: 30px;
    }

    .living-ledger-houses {
        gap: 22px;
    }

    .living-ledger-house-header {
        min-height: 0;

        padding: 20px 18px;

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

        gap: 15px;
    }

    .living-ledger-house-crest-wrap {
        width: 74px;
        height: 74px;
    }

    .living-ledger-house-crest-fallback {
        width: 66px;
        height: 66px;

        font-size: 28px;
    }

    .living-ledger-house-heading h2 {
        font-size: clamp(23px, 7vw, 29px);
    }

    .living-ledger-house-body {
        padding: 7px 18px 18px;
    }

    .living-ledger-member {
        min-height: 48px;

        padding: 11px 0;
    }

    .living-ledger-member-name {
        font-size: 13px;
    }
}

/* ==========================================================================
   THE LIVING LEDGER — SMALL MOBILE
   ========================================================================== */

@media (max-width: 460px) {
    .living-ledger-house-header {
        padding: 18px 16px;

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

        gap: 13px;
    }

    .living-ledger-house-crest-wrap {
        width: 62px;
        height: 62px;
    }

    .living-ledger-house-crest-fallback {
        width: 58px;
        height: 58px;

        font-size: 25px;
    }

    .living-ledger-house-kicker {
        font-size: 9px;
    }

    .living-ledger-house-count {
        margin-top: 6px;

        font-size: 11px;
    }

    .living-ledger-house-body {
        padding: 6px 16px 16px;
    }

    .living-ledger-member {
        gap: 7px 9px;
    }

    .living-ledger-staff-mark {
        padding: 3px 6px;

        font-size: 8px;
    }
}

/* ==========================================================================
   Blackthorne Forum Picker
   Custom forum selector used anywhere staff must choose a forum.
   Keeps the native select for form submission while replacing the browser/
   OS popup with a fully themed, hierarchical picker.
   ========================================================================== */

.forum-picker-native {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.forum-picker {
    position: relative;
    width: 100%;
}

.forum-picker-trigger {
    display: flex;
    width: 100%;
    min-height: 46px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 13px;
    border: 1px solid rgba(201, 168, 91, 0.58);
    border-radius: 8px;
    background: #16091b;
    color: var(--color-text);
    font: inherit;
    line-height: 1.35;
    text-align: left;
    cursor: pointer;
    transition:
        border-color 160ms ease,
        box-shadow 160ms ease,
        background 160ms ease;
}

.forum-picker-trigger:hover,
.forum-picker-trigger:focus-visible,
.forum-picker.is-open .forum-picker-trigger {
    border-color: var(--color-gold);
    background: #1b0d20;
    box-shadow:
        0 0 0 2px rgba(201, 168, 91, 0.12),
        0 8px 22px rgba(0, 0, 0, 0.2);
    outline: none;
}

.forum-picker-trigger:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.forum-picker-current {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.forum-picker-chevron {
    flex: 0 0 auto;
    color: var(--color-gold);
    font-size: 0.9rem;
    transition: transform 160ms ease;
}

.forum-picker.is-open .forum-picker-chevron {
    transform: rotate(180deg);
}

.forum-picker-panel {
    position: absolute;
    z-index: 10050;
    top: calc(100% + 6px);
    left: 0;
    width: min(100%, 720px);
    min-width: 100%;
    max-height: min(460px, 62vh);
    overflow: hidden;
    border: 1px solid rgba(201, 168, 91, 0.48);
    border-radius: 10px;
    background: #120716;
    box-shadow:
        0 18px 46px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.025);
}

.forum-picker-panel[hidden] {
    display: none !important;
}

.forum-picker-search-wrap {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 10px;
    border-bottom: 1px solid rgba(201, 168, 91, 0.2);
    background: #180a1d;
}

.forum-picker-search {
    width: 100%;
    min-height: 40px;
    padding: 8px 11px;
    border: 1px solid rgba(201, 168, 91, 0.34);
    border-radius: 7px;
    background: #0f0712;
    color: var(--color-text);
    font: inherit;
}

.forum-picker-search::placeholder {
    color: rgba(234, 224, 238, 0.52);
}

.forum-picker-search:focus {
    border-color: var(--color-gold);
    outline: none;
    box-shadow: 0 0 0 2px rgba(201, 168, 91, 0.1);
}

.forum-picker-options {
    max-height: min(400px, 54vh);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 6px 0 8px;
    scrollbar-color: rgba(201, 168, 91, 0.48) #120716;
}

.forum-picker-category {
    padding: 10px 13px 6px;
    color: var(--color-gold);
    font-size: 0.67rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.forum-picker-option {
    --forum-picker-depth: 0;
    position: relative;
    display: flex;
    width: 100%;
    min-height: 38px;
    align-items: center;
    gap: 8px;
    padding: 7px 13px 7px calc(13px + (var(--forum-picker-depth) * 22px));
    border: 0;
    background: transparent;
    color: var(--color-text);
    font: inherit;
    line-height: 1.35;
    text-align: left;
    cursor: pointer;
}

.forum-picker-option:hover,
.forum-picker-option:focus-visible {
    background: rgba(107, 61, 115, 0.36);
    outline: none;
}

.forum-picker-option.is-selected {
    background: rgba(107, 61, 115, 0.52);
    color: #fff;
}

.forum-picker-option.is-main-forum {
    font-weight: 650;
}

.forum-picker-option.is-child-forum::before {
    content: '';
    position: absolute;
    left: calc(17px + ((var(--forum-picker-depth) - 1) * 22px));
    top: 0;
    bottom: 0;
    width: 1px;
    background: rgba(201, 168, 91, 0.18);
}

.forum-picker-option.is-child-forum::after {
    content: '';
    position: absolute;
    left: calc(17px + ((var(--forum-picker-depth) - 1) * 22px));
    top: 50%;
    width: 11px;
    height: 1px;
    background: rgba(201, 168, 91, 0.34);
}

.forum-picker-option-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.forum-picker-option-meta {
    margin-left: auto;
    color: rgba(234, 224, 238, 0.52);
    font-size: 0.72rem;
    white-space: nowrap;
}

.forum-picker-placeholder {
    border-bottom: 1px solid rgba(201, 168, 91, 0.14);
    color: rgba(234, 224, 238, 0.82);
    font-style: italic;
}

.forum-picker-empty {
    padding: 18px 14px;
    color: rgba(234, 224, 238, 0.62);
    text-align: center;
}

@media (max-width: 640px) {
    .forum-picker-panel {
        width: 100%;
        max-height: min(420px, 58vh);
    }

    .forum-picker-option {
        padding-right: 10px;
    }

    .forum-picker-option-meta {
        display: none;
    }
}