/* Variable refactor: uses grundlagen.css tokens for palette, typography, spacing and avatars.
   Functional dimensions, breakpoints and intentionally unique values remain local. */

/* =========================================================
   COMPLEXION 28
   order.css
   Requires: font.css + grundlagen.css

   Contains:
   01. Global header and navigation
   02. Index background aperture
   03. Forum categories and cards

   Do not create patch stylesheets. Edit the relevant section here.
   ========================================================= */

/* =========================================================
   01. GLOBAL HEADER / NAVIGATION
   ========================================================= */

/* Structural tokens belong to this component rather than the
   global design system. They keep the stacking order readable
   without introducing arbitrary z-index values throughout the file. */
:root {
    --c28-utility-height: 66px;
    --c28-z-navigation: 100;
    --c28-z-utility: 200;
    --c28-z-header: 500;
    --c28-z-overlay: 1000;
}

#container,
#header,
#logo,
#panel {
    width: 100%;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.c28-site-header {
    position: relative;
    z-index: var(--c28-z-header);
    isolation: isolate;
    color: var(--paper);
    background: var(--bg-deep);
    border-bottom: 1px solid var(--hairline-strong);
}

.c28-site-header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image:
        linear-gradient(90deg, color-mix(in srgb, var(--bg-deep) 90%, transparent) 0%, color-mix(in srgb, var(--bg-deep) 50%, transparent) 55%, color-mix(in srgb, var(--bg-deep) 88%, transparent) 100%),
        linear-gradient(to bottom, color-mix(in srgb, var(--bg-deep) 12%, transparent), color-mix(in srgb, var(--bg-deep) 76%, transparent)),
        var(--hgbig);
    background-position: center 20%;
    background-size: cover;
    background-repeat: no-repeat;
}

.c28-site-header::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        linear-gradient(color-mix(in srgb, var(--paper) 3.5%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--paper) 3.5%, transparent) 1px, transparent 1px);
    background-size: 80px 80px;
    mask-image: linear-gradient(to bottom, color-mix(in srgb, var(--bg-deep) 80%, transparent), transparent 82%);
}

/* ---------------------------------------------------------
   Utility strip
   --------------------------------------------------------- */

.c28-utility {
    position: relative;
    z-index: var(--c28-z-utility);
    background: color-mix(in srgb, var(--bg-deep) 92%, transparent);
    border-bottom: 1px solid var(--hairline);
}

.c28-utility__inner {
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr) minmax(250px, auto);
    align-items: stretch;
    min-height: 66px;
}

.c28-interface {
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr);
    align-items: center;
    color: var(--paper);
    border-right: 1px solid var(--hairline);
    text-decoration: none;
}

.c28-interface:hover {
    color: var(--paper);
    text-decoration: none;
}

.c28-interface__code {
    display: grid;
    place-items: center;
    align-self: stretch;
    color: var(--bg-deep);
    background: var(--design);
    font-family: var(--akzenttext);
    font-size: 25px;
    font-weight: 500;
    line-height: 1;
}

.c28-interface__name {
    padding: 0 var(--space-m);
    color: var(--paper-muted);
    font-size: var(--txtxsmall);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.c28-system-status {
    display: flex;
    align-items: center;
    gap: 0;
    min-width: 0;
    padding-left: 24px;
    color: var(--txtcol-soft);
    font-size: var(--txtxxsmall);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.c28-system-status span {
    padding: 0 var(--space-m);
    white-space: nowrap;
    border-right: 1px solid var(--hairline);
}

.c28-system-status span:first-child {
    padding-left: 0;
}

.c28-system-status__live {
    color: var(--signal-light);
}

.c28-system-status__live::before {
    content: "";
    display: inline-block;
    width: 5px;
    height: 5px;
    margin-right: var(--space-xs);
    vertical-align: 1px;
    background: var(--signal);
}

/* ---------------------------------------------------------
   Account / access
   --------------------------------------------------------- */

.c28-account {
    position: relative;
    align-self: stretch;
    min-width: 250px;
    margin: 0;
    border-left: 1px solid var(--hairline);
}

.c28-account__summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 24px;
    align-content: center;
    min-height: 65px;
    padding: 10px var(--space-m);
    cursor: pointer;
    list-style: none;
}

.c28-account__summary::-webkit-details-marker {
    display: none;
}

.c28-account__summary::marker {
    content: "";
}

.c28-account__state {
    display: block;
    color: var(--design-light);
    font-size: var(--txtxxsmall);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.c28-account__summary strong {
    grid-column: 1;
    overflow: hidden;
    color: var(--paper);
    font-size: var(--txtm);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.c28-account__toggle {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    justify-self: end;
    color: var(--signal);
    font-family: var(--akzenttext);
    font-size: 24px;
    font-weight: 300;
    transition: transform 160ms ease;
}

.c28-account[open] .c28-account__toggle {
    transform: rotate(45deg);
}

.c28-account__drawer {
    position: fixed;
    top: var(--c28-utility-height);
    right: var(--space-m);
    z-index: var(--c28-z-overlay);
    width: min(340px, 90vw);
    padding: var(--space-m);
    background: color-mix(in srgb, var(--bg-deep) 99%, transparent);
    border: 1px solid var(--hairline-strong);
    border-top: 2px solid var(--design);
}

.c28-account__drawer-label {
    display: block;
    margin-bottom: var(--space-s);
    color: var(--txtcol-soft);
    font-size: var(--txtxxsmall);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.c28-account__links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    margin: 0 0 14px;
    padding: 1px;
    background: var(--hairline);
    list-style: none;
}

.c28-account__links li {
    margin: 0;
    padding: 0;
    background: var(--tbl-main);
}

.c28-account__links li::before {
    content: none !important;
}

.c28-account__links a,
.c28-account__logout {
    display: block;
    padding: 10px var(--space-s);
    color: var(--paper-muted);
    font-size: var(--txtxsmall);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-decoration: none;
    text-transform: uppercase;
}

.c28-account__links a:hover {
    color: var(--paper);
    background: color-mix(in srgb, var(--design) 12%, transparent);
}

.c28-account__logout {
    color: var(--akzent-red-soft);
    border-left: 3px solid var(--akzent-red);
}

.c28-account__logout:hover {
    color: var(--paper);
    background: color-mix(in srgb, var(--akzent-red) 12%, transparent);
}

.c28-account--guest {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-m);
    padding: 10px var(--space-m);
}

.c28-account__guestlinks {
    display: flex;
    align-items: center;
    gap: 1px;
    background: var(--hairline-strong);
}

.c28-account__guestlinks a {
    padding: var(--space-xs) 11px;
    color: var(--paper);
    background: var(--tbl-main);
    font-size: var(--txtxsmall);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-decoration: none;
    text-transform: uppercase;
}

.c28-account__guestlinks .register {
    color: var(--bg-deep);
    background: var(--signal);
}

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

.c28-hero {
    position: relative;
    min-height: clamp(310px, 38vw, 520px);
    border-bottom: 1px solid var(--hairline-strong);
}

.c28-hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(270px, 390px);
    min-height: inherit;
}

.c28-hero__copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    padding: clamp(54px, 7vw, 100px) clamp(32px, 7vw, 110px) clamp(48px, 6vw, 82px) 0;
}

.c28-hero__eyebrow {
    color: var(--signal);
    font-size: var(--txtxsmall);
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.c28-hero__title {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    width: max-content;
    max-width: 100%;
    margin: 17px 0 22px;
    color: var(--paper);
    font-family: var(--akzenttext);
    font-size: clamp(70px, 9.4vw, 154px);
    font-weight: 300;
    line-height: 0.69;
    letter-spacing: -0.045em;
    text-decoration: none;
    text-transform: uppercase;
}

.c28-hero__title span:last-child {
    margin-left: clamp(24px, 8vw, 140px);
    color: var(--design-light);
}

.c28-hero__title:hover {
    color: var(--paper);
    text-decoration: none;
}

.c28-hero__title:hover span:last-child {
    color: var(--signal-light);
}

.c28-hero__claim {
    max-width: 620px;
    margin: 0 0 25px;
    color: var(--paper-muted);
    font-size: clamp(15px, 1.4vw, 20px);
    letter-spacing: 0.01em;
}

.c28-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1px;
    width: fit-content;
    background: var(--hairline-strong);
}

.c28-hero__meta span {
    padding: var(--space-xs) var(--space-s);
    color: var(--txtcol);
    background: color-mix(in srgb, var(--bg-deep) 86%, transparent);
    font-size: var(--txtxxsmall);
    font-weight: 600;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.c28-threshold {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-width: 0;
    padding: var(--space-xl) 36px 48px;
    background: color-mix(in srgb, var(--bg-deep) 70%, transparent);
    border-right: 1px solid var(--hairline);
    border-left: 1px solid var(--hairline-strong);
}

.c28-threshold::before {
    content: "";
    position: absolute;
    top: 32px;
    right: 32px;
    width: 10px;
    height: 10px;
    background: var(--signal);
}

.c28-threshold__number {
    color: var(--signal);
    font-family: var(--akzenttext);
    font-size: clamp(150px, 17vw, 270px);
    font-weight: 300;
    line-height: 0.65;
    letter-spacing: -0.08em;
}

.c28-threshold__copy {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-s);
    align-items: baseline;
    margin-top: 30px;
    padding-top: 15px;
    border-top: 1px solid var(--signal-dark);
}

.c28-threshold__copy strong {
    color: var(--paper);
    font-size: var(--txtxsmall);
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.c28-threshold__copy span {
    color: var(--txtcol-soft);
    font-size: var(--txtxxsmall);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* ---------------------------------------------------------
   Main navigation
   --------------------------------------------------------- */

.c28-navigation-shell {
    position: sticky;
    top: 0;
    z-index: var(--c28-z-navigation);
    background: color-mix(in srgb, var(--bg-deep) 98%, transparent);
    border-bottom: 1px solid var(--hairline-strong);
}

.c28-navigation-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 330px);
    align-items: stretch;
}

.c28-mainnav {
    display: flex;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.c28-mainnav::-webkit-scrollbar {
    display: none;
}

.c28-mainnav a {
    position: relative;
    display: grid;
    grid-template-columns: 20px auto;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
    min-height: 64px;
    padding: 0 17px;
    color: var(--paper-muted);
    border-right: 1px solid var(--hairline);
    text-decoration: none;
}

.c28-mainnav a::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 2px;
    background: var(--design);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 170ms ease;
}

.c28-mainnav a:hover::after,
.c28-mainnav a:focus-visible::after {
    transform: scaleX(1);
}

.c28-mainnav a span {
    color: var(--design-light);
    font-family: var(--akzenttext);
    font-size: 15px;
    font-weight: 500;
}

.c28-mainnav a strong {
    color: inherit;
    font-size: var(--txtxsmall);
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.c28-mainnav a:hover {
    color: var(--paper);
    background: color-mix(in srgb, var(--design) 8%, transparent);
    text-decoration: none;
}

/* ---------------------------------------------------------
   Quick search
   --------------------------------------------------------- */

.c28-quicksearch {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
    min-width: 0;
    margin: 0;
    border-left: 1px solid var(--hairline-strong);
}

.c28-quicksearch input[type="search"] {
    width: 100%;
    min-width: 0;
    min-height: 63px;
    padding: 0 16px;
    color: var(--paper);
    background: transparent;
    border: 0;
    border-radius: 0;
    font-size: var(--txtxsmall);
    font-weight: 600;
    letter-spacing: 0.10em;
}

.c28-quicksearch input[type="search"]:focus {
    background: color-mix(in srgb, var(--design) 8%, transparent);
    border: 0;
    outline: 1px solid var(--design);
    outline-offset: -1px;
}

.c28-quicksearch__submit {
    min-width: 74px;
    min-height: 63px;
    padding: 0 16px;
    color: var(--bg-deep);
    background: var(--signal);
    border: 0;
    border-radius: 0;
}

.c28-quicksearch__submit span {
    display: none;
}

.c28-quicksearch__submit b {
    color: inherit;
    font-family: var(--akzenttext);
    font-size: 22px;
    font-weight: 500;
}

.c28-quicksearch__submit:hover {
    color: var(--bg-deep);
    background: var(--signal-light);
    border: 0;
}

/* ---------------------------------------------------------
   Breadcrumbs and notices
   --------------------------------------------------------- */

.c28-content-shell {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

.c28-page-tools {
    position: relative;
    z-index: 5;
    padding-top: var(--space-m);
}

.c28-page-tools navigation {
    display: block;
    padding: 10px 0 14px;
    color: var(--txtcol-soft);
    border-bottom: 1px solid var(--hairline);
    font-size: var(--txtxsmall);
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.page-index .c28-page-tools navigation {
    display: none;
}

/* ---------------------------------------------------------
   Login modal
   --------------------------------------------------------- */

.c28-login-modal {
    width: min(520px, calc(100vw - 32px));
    padding: 0;
    color: var(--txtcol);
    background: var(--tbl-main);
    border: 1px solid var(--hairline-strong);
    border-radius: 0;
    box-shadow: none;
}

.c28-login-form__header {
    display: grid;
    gap: 3px;
    padding: 20px 24px;
    background: var(--bg-deep);
    border-bottom: 1px solid var(--hairline-strong);
}

.c28-login-form__header span {
    color: var(--design-light);
    font-size: var(--txtxxsmall);
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.c28-login-form__header strong {
    color: var(--paper);
    font-family: var(--akzenttext);
    font-size: 34px;
    font-weight: 500;
    text-transform: uppercase;
}

.c28-login-form__body {
    display: grid;
    gap: 16px;
    padding: 24px;
}

.c28-login-field {
    display: grid;
    gap: 6px;
}

.c28-login-field label {
    color: var(--paper-muted);
    font-size: var(--txtxsmall);
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.c28-login-field input {
    width: 100%;
}

.c28-login-field .lost_password {
    justify-self: end;
    font-size: var(--txtxsmall);
}

.c28-login-options label {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    color: var(--txtcol);
    font-size: var(--txtxsmall);
}

.c28-login-options input {
    width: auto;
    min-height: 0;
}

.c28-login-submit {
    width: 100%;
    min-height: 42px;
    color: var(--paper);
    background: var(--design);
    border-color: var(--design);
}

.c28-login-lockout {
    padding: 16px;
    color: var(--akzent-red-soft);
    border-left: 3px solid var(--akzent-red);
}

.blocker {
    background: color-mix(in srgb, var(--bg-deep) 88%, transparent) !important;
}

.modal a.close-modal {
    filter: grayscale(1) brightness(2);
}

/* ---------------------------------------------------------
   Accessibility helper
   --------------------------------------------------------- */

.c28-sr-only {
    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;
}

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

@media (max-width: 1180px) {
    .c28-utility__inner {
        grid-template-columns: 210px minmax(0, 1fr) minmax(230px, auto);
    }

    .c28-system-status span:first-child {
        display: none;
    }

    .c28-hero__inner {
        grid-template-columns: minmax(0, 1fr) 300px;
    }

    .c28-navigation-row {
        grid-template-columns: minmax(0, 1fr) 260px;
    }
}

@media (max-width: 900px) {
    .c28-utility__inner {
        grid-template-columns: 190px minmax(0, 1fr);
    }

    .c28-system-status {
        display: none;
    }

    .c28-account {
        min-width: 0;
    }

    .c28-hero__inner {
        grid-template-columns: minmax(0, 1fr) 220px;
    }

    .c28-threshold {
        padding-right: 22px;
        padding-left: 22px;
    }

    .c28-threshold__copy {
        grid-template-columns: 1fr;
        gap: var(--space-xxs);
    }

    .c28-navigation-row {
        grid-template-columns: minmax(0, 1fr) 200px;
    }
}

@media (max-width: 700px) {
    :root {
        --c28-utility-height: 58px;
    }

    .c28-utility__inner {
        grid-template-columns: 120px minmax(0, 1fr);
        min-height: 58px;
    }

    .c28-interface {
        grid-template-columns: 58px 1fr;
    }

    .c28-interface__name {
        display: none;
    }

    .c28-account--guest {
        justify-content: flex-end;
        padding-right: 0;
    }

    .c28-account--guest .c28-account__state {
        display: none;
    }

    .c28-account__summary {
        min-height: 57px;
    }

    .c28-hero {
        min-height: auto;
    }

    .c28-hero__inner {
        grid-template-columns: 1fr;
    }

    .c28-hero__copy {
        min-height: 360px;
        padding-right: 0;
    }

    .c28-hero__title {
        font-size: clamp(58px, 18vw, 92px);
    }

    .c28-hero__title span:last-child {
        margin-left: 20px;
    }

    .c28-threshold {
        display: grid;
        grid-template-columns: 150px minmax(0, 1fr);
        align-items: end;
        min-height: 190px;
        padding: var(--space-l) 24px;
        border-top: 1px solid var(--hairline-strong);
        border-left: 0;
    }

    .c28-threshold__number {
        font-size: 140px;
    }

    .c28-threshold__copy {
        margin: 0;
    }

    .c28-navigation-row {
        grid-template-columns: 1fr;
    }

    .c28-mainnav a {
        min-height: 56px;
        padding: 0 14px;
    }

    .c28-quicksearch {
        display: none;
    }
}

@media (max-width: 480px) {
    .c28-account__drawer {
        right: var(--space-xs);
        width: min(340px, calc(100vw - var(--space-xs) - var(--space-xs)));
    }

    .c28-account__guestlinks a {
        padding: var(--space-xs);
        font-size: var(--txtxsmall);
    }

    .c28-account__state {
        font-size: var(--txtxsmall);
    }

    .c28-account__summary strong {
        font-size: var(--txtsmall);
    }

    .c28-hero__meta span {
        width: 100%;
    }

    .c28-threshold {
        grid-template-columns: 116px minmax(0, 1fr);
    }

    .c28-threshold__number {
        font-size: 110px;
    }
}


/* =========================================================
   02. SHARED RECORD SURFACE / INDEX APERTURE
   ========================================================= */

/* ---------------------------------------------------------
   Shared page background
   Applies to every redesigned template carrying themebg.
   --------------------------------------------------------- */

/* =========================================================
   GLOBAL PAGE SURFACE
   Gilt automatisch auf allen Frontend-Seiten des Themes
   ========================================================= */

html {
    min-height: 100%;
    background: var(--bg-deep);
}

body {
    position: relative;
    isolation: isolate;
    min-height: 100vh;
    margin: 0;
    color: var(--txtcol);
    background-color: var(--bg-deep);
    background-image:
        linear-gradient(
            to bottom,
            color-mix(in srgb, var(--bg-deep) 18%, transparent) 0%,
            color-mix(in srgb, var(--bg-deep) 54%, transparent) 42%,
            color-mix(in srgb, var(--bg-deep) 86%, transparent) 100%
        ),
        var(--hgbig);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    background-attachment: fixed;
}

/* Technisches Raster und dunkle Vignette */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(
            color-mix(in srgb, var(--paper) 2.6%, transparent) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            color-mix(in srgb, var(--paper) 2.6%, transparent) 1px,
            transparent 1px
        ),
        radial-gradient(
            circle at 50% 17%,
            transparent 0%,
            color-mix(in srgb, var(--bg-deep) 10%, transparent) 44%,
            color-mix(in srgb, var(--bg-deep) 62%, transparent) 100%
        );
    background-size:
        96px 96px,
        96px 96px,
        auto;
}

/* Die eigentliche Seite liegt über dem Hintergrund */
body #container {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    background: transparent;
}

/* Alte MyBB-Flächen dürfen keinen weißen Seitenblock erzeugen */
body #content,
body .c28-content-shell,
body .c28-page-tools {
    background: transparent !important;
}

body #content > .wrapper {
    background: transparent !important;
}

/* Verhindert weiße Restflächen durch leere Wrapper */
body #content {
    min-height: 0;
}

/* Fixed Background kann mobil ruckeln */
@media (max-width: 900px) {
    body {
        background-attachment: scroll;
    }
}

/* ---------------------------------------------------------
   Index shell
   --------------------------------------------------------- */

.page-index .complexion-index {
    width: min(calc(100% - 48px), var(--content-wide));
    margin: 0 auto;
    padding: clamp(24px, 4vw, 56px) 0 80px;
}

.c28-index-records {
    position: relative;
}

/* ---------------------------------------------------------
   Background aperture
   --------------------------------------------------------- */

.c28-index-window {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(210px, 0.32fr);
    align-items: end;
    min-height: clamp(390px, 50vw, 620px);
    margin-bottom: clamp(var(--space-xxl), 9vw, 132px);
    padding: clamp(24px, 4vw, 58px);
    overflow: hidden;
    border: 1px solid var(--hairline-strong);
    background:
        linear-gradient(
            90deg,
            color-mix(in srgb, var(--bg-deep) 18%, transparent) 0%,
            color-mix(in srgb, var(--bg-deep) 2%, transparent) 48%,
            color-mix(in srgb, var(--bg-deep) 36%, transparent) 100%
        );
}

.c28-index-window::before {
    content: "";
    position: absolute;
    inset: var(--space-m);
    z-index: 0;
    pointer-events: none;
    border: 1px solid color-mix(in srgb, var(--paper) 11%, transparent);
}

.c28-index-window::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 72%;
    z-index: 0;
    width: 1px;
    pointer-events: none;
    background: var(--hairline);
}

.c28-index-window__meta {
    position: absolute;
    top: var(--space-l);
    right: 32px;
    left: 32px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    color: var(--paper-muted);
    font-size: var(--txtxxsmall);
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.c28-index-window__brief {
    position: relative;
    z-index: 2;
    width: min(760px, 100%);
    padding: clamp(24px, 3vw, var(--space-xl));
    color: var(--paper);
    background: color-mix(in srgb, var(--bg-deep) 58%, transparent);
    border-top: 1px solid var(--hairline-strong);
    border-right: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);
    border-left: 3px solid var(--design);
    -webkit-backdrop-filter: blur(12px) saturate(0.82);
    backdrop-filter: blur(12px) saturate(0.82);
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .c28-index-window__brief {
        background: color-mix(in srgb, var(--bg-deep) 88%, transparent);
    }
}

.c28-index-window__eyebrow {
    display: block;
    margin-bottom: 14px;
    color: var(--design-light);
    font-size: var(--txtxsmall);
    font-weight: 600;
    letter-spacing: 0.17em;
    text-transform: uppercase;
}

.c28-index-window__title {
    margin: 0;
    padding: 0;
    color: var(--paper);
    border: 0;
    font-family: var(--akzenttext);
    font-size: clamp(42px, 5.6vw, 86px);
    font-weight: 300;
    line-height: 0.9;
    letter-spacing: -0.035em;
    text-transform: none;
}

.c28-index-window__copy {
    max-width: 620px;
    margin: 24px 0 0;
    color: var(--paper-muted);
    font-size: clamp(var(--txtbase), 1.25vw, 17px);
    line-height: 1.65;
}

.c28-index-window__links {
    display: flex;
    flex-wrap: wrap;
    gap: 1px;
    margin-top: 30px;
    padding: 1px;
    background: var(--hairline);
}

.c28-index-window__links a {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: var(--space-xs) 13px;
    color: var(--paper-muted);
    background: color-mix(in srgb, var(--bg-deep) 82%, transparent);
    font-size: var(--txtxsmall);
    font-weight: 600;
    letter-spacing: 0.10em;
    text-decoration: none;
    text-transform: uppercase;
}

.c28-index-window__links a::after {
    content: "↘";
    margin-left: 14px;
    color: var(--signal);
}

.c28-index-window__links a:hover,
.c28-index-window__links a:focus-visible {
    color: var(--bg-deep);
    background: var(--paper);
}

.c28-index-window__coordinate {
    position: relative;
    z-index: 2;
    align-self: end;
    justify-self: end;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding: 0 var(--space-xxs) var(--space-xxs) 30px;
}

.c28-index-window__coordinate strong {
    color: var(--design-light);
    font-family: var(--akzenttext);
    font-size: clamp(106px, 13vw, 205px);
    font-weight: 300;
    line-height: 0.68;
}

.c28-index-window__coordinate span {
    margin-top: 22px;
    color: var(--paper-muted);
    font-size: var(--txtxxsmall);
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

/* ---------------------------------------------------------
   Category translucency
   The image remains visible between records and very faintly
   through category headings, while forum content stays readable.
   --------------------------------------------------------- */

.page-index .category-header {
    background: color-mix(in srgb, var(--bg-deep) 80%, transparent);
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
}

.page-index .forum-card__lastpost {
    background: color-mix(in srgb, var(--paper) 2.2%, transparent);
}

/* ---------------------------------------------------------
   Closing panel
   --------------------------------------------------------- */

.c28-index-closing {
    position: relative;
    margin-top: clamp(38px, 6vw, 80px);
    padding: clamp(20px, 3vw, 34px);
    background: color-mix(in srgb, var(--bg-deep) 66%, transparent);
    border: 1px solid var(--hairline-strong);
    -webkit-backdrop-filter: blur(10px) saturate(0.78);
    backdrop-filter: blur(10px) saturate(0.78);
}

.c28-index-boardstats:empty {
    display: none;
}

.c28-index-closing .forum-legend {
    margin-top: 0;
    padding-bottom: 0;
    border-bottom: 0;
}

.c28-index-boardstats + .forum-legend {
    margin-top: 22px;
}

/* Keep legacy board-stat tables from bringing back white surfaces. */
.c28-index-boardstats table,
.c28-index-boardstats .tborder,
.c28-index-boardstats .trow1,
.c28-index-boardstats .trow2,
.c28-index-boardstats .thead,
.c28-index-boardstats .tcat {
    color: var(--txtcol);
    background: transparent;
    box-shadow: none;
}

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

@media (max-width: 900px) {
    body.themebg {
        background-attachment: scroll;
    }

    .c28-index-window {
        grid-template-columns: 1fr;
        min-height: 540px;
    }

    .c28-index-window::after {
        display: none;
    }

    .c28-index-window__coordinate {
        position: absolute;
        right: 38px;
        bottom: 36px;
        opacity: 0.42;
    }

    .c28-index-window__coordinate strong {
        font-size: 112px;
    }

    .c28-index-window__brief {
        width: min(680px, calc(100% - 90px));
    }
}

@media (max-width: 600px) {
    .page-index .complexion-index {
        width: min(calc(100% - 24px), var(--content-wide));
        padding-top: 14px;
    }

    .c28-index-window {
        min-height: 520px;
        margin-bottom: 72px;
        padding: var(--space-m);
    }

    .c28-index-window::before {
        inset: 9px;
    }

    .c28-index-window__meta {
        top: 17px;
        right: var(--space-m);
        left: var(--space-m);
    }

    .c28-index-window__meta span:last-child {
        display: none;
    }

    .c28-index-window__brief {
        width: 100%;
        padding: 22px;
    }

    .c28-index-window__title {
        font-size: clamp(38px, 12vw, 58px);
    }

    .c28-index-window__links {
        flex-direction: column;
    }

    .c28-index-window__coordinate {
        right: 24px;
        bottom: 23px;
    }

    .c28-index-window__coordinate span {
        display: none;
    }
}


/* =========================================================
   03. FORUM INDEX / CATEGORY GRID
   ========================================================= */

/* ---------------------------------------------------------
   Index shell
   --------------------------------------------------------- */

.forum-category,
.forum-card,
.category-header,
.forum-legend {
    border-radius: 0;
    box-shadow: none;
}

.forum-category {
    --category-color: var(--design);
    --category-number: "00";

    position: relative;
    margin: 0 0 clamp(54px, 7vw, 104px);
    border-top: 1px solid var(--hairline-strong);
}

.category-10 {
    --category-color: var(--design);
    --category-number: "01";
}

.category-14 {
    --category-color: var(--signal);
    --category-number: "02";
}

.category-18 {
    --category-color: var(--design-light);
    --category-number: "03";
}

.category-25 {
    --category-color: var(--liberants);
    --category-number: "04";
}

.category-29 {
    --category-color: var(--scions);
    --category-number: "05";
}

.category-33 {
    --category-color: var(--operatives);
    --category-number: "06";
}

/* ---------------------------------------------------------
   Category header
   --------------------------------------------------------- */

.category-header {
    display: grid;
    grid-template-columns: minmax(90px, 150px) minmax(0, 1fr) 34px;
    align-items: end;
    min-height: 138px;
    background: color-mix(in srgb, var(--bg-deep) 86%, transparent);
    border-right: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline-strong);
    border-left: 1px solid var(--hairline);
}

.category-header__index {
    position: relative;
    align-self: stretch;
    overflow: hidden;
    background: color-mix(in srgb, var(--category-color) 11%, transparent);
    border-right: 1px solid color-mix(in srgb, var(--category-color) 45%, transparent);
}

.category-header__index::before {
    content: var(--category-number);
    position: absolute;
    left: 16px;
    bottom: -0.11em;
    color: var(--category-color);
    font-family: var(--akzenttext);
    font-size: clamp(76px, 8vw, 128px);
    font-weight: 300;
    line-height: 0.76;
}

.category-header__content {
    padding: 24px clamp(20px, 3vw, var(--space-xl)) 26px;
}

.category-header__label,
.forum-card__eyebrow,
.lastpost-record__label,
.forum-subforums__label {
    display: block;
    color: var(--category-color);
    font-size: var(--txtxsmall);
    font-weight: 600;
    letter-spacing: 0.17em;
    text-transform: uppercase;
}

.category-header__title {
    margin: 7px 0 var(--space-xs);
    padding: 0;
    border: 0;
    font-size: clamp(34px, 4.4vw, 72px);
    line-height: 0.88;
    text-transform: none;
}

.category-header__title a {
    color: var(--paper);
    text-decoration: none;
}

.category-header__title a:hover {
    color: var(--category-color);
}

.category-header__description {
    max-width: 880px;
    color: var(--txtcol-soft);
    font-size: var(--txtm);
}

.category-header__toggle {
    align-self: stretch;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: var(--space-m);
    border-left: 1px solid var(--hairline);
}

.category-header__toggle .expander {
    width: 14px;
    height: 14px;
    cursor: pointer;
    opacity: 0.62;
    filter: grayscale(1) brightness(1.8);
}

.category-header__toggle .expander:hover {
    opacity: 1;
}

/* ---------------------------------------------------------
   Shared forum card
   --------------------------------------------------------- */

.forum-grid {
    display: grid;
    gap: 1px;
    background: var(--hairline-strong);
    border-right: 1px solid var(--hairline-strong);
    border-bottom: 1px solid var(--hairline-strong);
    border-left: 1px solid var(--hairline-strong);
}

.forum-card {
    --record-number: "00";
    --forum-image: var(--hgbig);
    --forum-position: center;
    --visual-inset: 14px;

    position: relative;
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr) 190px minmax(240px, 0.62fr);
    min-height: 214px;
    overflow: hidden;
    background: color-mix(in srgb, var(--bg-main) 96%, transparent) !important;
}

.forum-card.trow1,
.forum-card.trow2 {
    background: color-mix(in srgb, var(--bg-main) 96%, transparent) !important;
}

.forum-card__visual {
    position: relative;
    isolation: isolate;
    min-height: 100%;
    overflow: hidden;
    background: var(--bg-deep);
    border-right: 1px solid var(--hairline);
}

.forum-card__visual-link {
    position: absolute;
    inset: 0;
    display: block;
    overflow: hidden;
    color: inherit;
    text-decoration: none;
}

.forum-card__visual-link::before {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: 0;
    background-image:
        linear-gradient(color-mix(in srgb, var(--bg-deep) 34%, transparent), color-mix(in srgb, var(--bg-deep) 78%, transparent)),
        var(--forum-image);
    background-position: var(--forum-position);
    background-size: cover;
    transition:
        transform 380ms ease,
        filter 380ms ease,
        background-position 500ms ease;
}

.forum-card__visual-link::after {
    content: "";
    position: absolute;
    inset: var(--visual-inset);
    z-index: 2;
    border: 1px solid color-mix(in srgb, var(--category-color) 42%, transparent);
    pointer-events: none;
    transition:
        border-color 180ms ease,
        background-color 180ms ease;
}

.forum-card__visual-link:hover::before,
.forum-card__visual-link:focus-visible::before {
    transform: scale(1.065);
    filter: contrast(1.08) brightness(1.08);
    background-position: var(--forum-hover-position, var(--forum-position));
}

.forum-card__visual-link:hover::after,
.forum-card__visual-link:focus-visible::after {
    border-color: var(--category-color);
    background: color-mix(in srgb, var(--category-color) 3.5%, transparent);
}

.forum-card__visual-link:focus-visible {
    outline: 1px solid var(--signal);
    outline-offset: -1px;
}

.forum-card__record {
    position: absolute;
    left: 20px;
    bottom: 10px;
    color: var(--category-color);
    font-family: var(--akzenttext);
    font-size: 70px;
    font-weight: 300;
    line-height: 0.8;
    z-index: 1;
    pointer-events: none;
    transition: color 180ms ease;
}

.forum-card__record::before {
    content: var(--record-number);
}

.forum-card__visual-link:hover .forum-card__record,
.forum-card__visual-link:focus-visible .forum-card__record {
    color: var(--signal-light);
}

.forum-card__visual .forum_status {
    position: absolute;
    z-index: 4;
    top: calc(var(--visual-inset) + var(--space-xs));
    right: calc(var(--visual-inset) + var(--space-xs));
    width: 9px;
    height: 9px;
    cursor: pointer;
    background: var(--txtcol-soft);
    border: 1px solid color-mix(in srgb, var(--paper) 22%, transparent);
}

.forum-card__visual .forum_status:hover {
    outline: 1px solid var(--category-color);
    outline-offset: 3px;
}

.forum-card__visual .forum_on {
    background: var(--category-color);
}

.forum-card__content {
    min-width: 0;
    padding: clamp(24px, 3vw, 40px);
}

.forum-card__title {
    margin: 9px 0 13px;
    padding: 0;
    border: 0;
    color: var(--paper);
    font-size: clamp(26px, 2.6vw, 42px);
    line-height: 0.92;
    text-transform: none;
}

.forum-card__title a {
    color: inherit;
    text-decoration: none;
}

.forum-card__title a:hover {
    color: var(--category-color);
}

.forum-card__viewers:empty,
.forum-card__moderators:empty {
    display: none;
}

.forum-card__viewers,
.forum-card__moderators {
    margin-bottom: var(--space-xs);
    color: var(--category-color);
    font-size: var(--txtxsmall);
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.forum-card__description {
    max-width: 760px;
    color: var(--txtcol);
    font-size: var(--txtbase);
    line-height: 1.65;
}

.forum-card__stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: center;
    border-left: 1px solid var(--hairline);
}

.forum-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 112px;
    padding: var(--space-m) 10px;
}

.forum-stat + .forum-stat {
    border-left: 1px solid var(--hairline);
}

.forum-stat strong {
    color: var(--paper-muted);
    font-family: var(--akzenttext);
    font-size: 38px;
    font-weight: 300;
    line-height: 1;
}

.forum-stat span {
    margin-top: 9px;
    color: var(--txtcol-soft);
    font-size: var(--txtxxsmall);
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.forum-card__lastpost {
    display: flex;
    min-width: 0;
    padding: 30px;
    background: color-mix(in srgb, var(--paper) 1.8%, transparent);
    border-left: 1px solid var(--hairline);
}

.lastpost-record {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.lastpost-record__title {
    display: block;
    margin: 9px 0 13px;
    overflow: hidden;
    color: var(--paper);
    font-size: var(--txtbase);
    font-weight: 600;
    line-height: 1.35;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lastpost-record__title:hover {
    color: var(--category-color);
}

.lastpost-record__meta {
    display: flex;
    flex-direction: column;
    gap: 3px;
    color: var(--txtcol-soft);
    font-size: var(--txtxsmall);
    letter-spacing: 0.03em;
}

.lastpost-record__meta a {
    color: var(--category-color);
}

.lastpost-record__empty {
    margin-top: 10px;
    color: var(--txtcol-soft);
    font-size: var(--txtsmall);
    font-style: italic;
}

/* ---------------------------------------------------------
   Subforums
   --------------------------------------------------------- */

.forum-subforums {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-s);
    margin-top: 22px;
    padding-top: 13px;
    border-top: 1px solid var(--hairline);
}

.forum-subforums__links {
    display: flex;
    flex-wrap: wrap;
    gap: 7px 14px;
}

.subforum-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--paper-muted);
    font-size: var(--txtsmall);
}

.subforum-link a {
    color: inherit;
    text-decoration: none;
}

.subforum-link a:hover {
    color: var(--category-color);
}

.subforum-link img,
.subforum-link .forum_status {
    width: 6px;
    height: 6px;
}

/* ---------------------------------------------------------
   Record numbers and image crops
   --------------------------------------------------------- */

.forum-11 { --record-number: "01"; --forum-position: 17% 28%; }
.forum-12 { --record-number: "02"; --forum-position: 66% 18%; }
.forum-13 { --record-number: "03"; --forum-position: 80% 72%; }

.forum-15 { --record-number: "01"; --forum-position: 12% 64%; }
.forum-16 { --record-number: "02"; --forum-position: 71% 42%; }
.forum-17 { --record-number: "03"; --forum-position: 84% 80%; }

.forum-19 { --record-number: "01"; --forum-position: 50% 18%; }
.forum-20 { --record-number: "02"; --forum-position: 18% 48%; }
.forum-21 { --record-number: "03"; --forum-position: 44% 72%; }
.forum-22 { --record-number: "04"; --forum-position: 76% 58%; }
.forum-23 { --record-number: "05"; --forum-position: 88% 22%; }
.forum-24 { --record-number: "06"; --forum-position: 55% 86%; }

.forum-26 { --record-number: "01"; --forum-position: 10% 72%; }
.forum-27 { --record-number: "02"; --forum-position: 75% 72%; }
.forum-28 { --record-number: "03"; --forum-position: 90% 16%; }

.forum-30 { --record-number: "01"; --forum-position: 16% 35%; }
.forum-31 { --record-number: "02"; --forum-position: 53% 36%; }
.forum-32 { --record-number: "03"; --forum-position: 86% 36%; }

.forum-34 { --record-number: "01"; }
.forum-35 { --record-number: "02"; }
.forum-36 { --record-number: "03"; }
.forum-37 { --record-number: "04"; }
.forum-38 { --record-number: "05"; }
.forum-39 { --record-number: "06"; }

/* ---------------------------------------------------------
   Category 10: The Basis
   One large record, two equal records below
   --------------------------------------------------------- */

.category-10 .forum-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.category-10 .forum-11 {
    grid-column: 1 / -1;
    grid-template-columns: minmax(210px, 0.72fr) minmax(340px, 1.45fr) 200px minmax(250px, 0.72fr);
    min-height: 320px;
}

.category-10 .forum-11 .forum-card__record {
    font-size: clamp(104px, 11vw, 178px);
}

.category-10 .forum-12,
.category-10 .forum-13 {
    grid-template-columns: 126px minmax(0, 1fr);
    grid-template-areas:
        "visual content"
        "visual stats"
        "last last";
}

.category-10 .forum-12 .forum-card__visual,
.category-10 .forum-13 .forum-card__visual {
    grid-area: visual;
}

.category-10 .forum-12 .forum-card__content,
.category-10 .forum-13 .forum-card__content {
    grid-area: content;
}

.category-10 .forum-12 .forum-card__stats,
.category-10 .forum-13 .forum-card__stats {
    grid-area: stats;
    border-top: 1px solid var(--hairline);
    border-left: 0;
}

.category-10 .forum-12 .forum-card__lastpost,
.category-10 .forum-13 .forum-card__lastpost {
    grid-area: last;
    border-top: 1px solid var(--hairline);
    border-left: 0;
}

/* ---------------------------------------------------------
   Category 14: Character ledger / dossier rows
   --------------------------------------------------------- */

.category-14 .forum-grid {
    grid-template-columns: 1fr;
}

.category-14 .forum-card {
    --visual-inset: 24px;
    grid-template-columns: 132px minmax(300px, 1fr) 210px minmax(260px, 0.62fr);
    min-height: 206px;
}

.category-14 .forum-card__visual-link::before {
    background-image:
        linear-gradient(color-mix(in srgb, var(--bg-deep) 18%, transparent), color-mix(in srgb, var(--bg-deep) 72%, transparent)),
        var(--forum-image);
}

.category-14 .forum-card__visual-link::after {
    border-color: color-mix(in srgb, var(--category-color) 58%, transparent);
}

/* ---------------------------------------------------------
   Category 18: Inplay
   London and sideplay full width
   --------------------------------------------------------- */

.category-18 .forum-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.category-18 .forum-19,
.category-18 .forum-24 {
    grid-column: 1 / -1;
}

.category-18 .forum-19 {
    min-height: 310px;
    grid-template-columns: minmax(220px, 0.8fr) minmax(360px, 1.5fr) 200px minmax(270px, 0.75fr);
}

.category-18 .forum-24,
.category-18 .forum-24.trow1,
.category-18 .forum-24.trow2 {
    min-height: 184px;
    grid-template-columns: 150px minmax(0, 1fr) 190px minmax(250px, 0.62fr);
    background:
        linear-gradient(
            90deg,
            color-mix(in srgb, var(--category-color) 7.5%, transparent),
            color-mix(in srgb, var(--bg-main) 96%, transparent) 35%
        ) !important;
    border-top: 1px solid color-mix(in srgb, var(--category-color) 48%, transparent);
}

.category-18 .forum-24 .forum-card__title a {
    color: var(--paper);
}

.category-18 .forum-24 .forum-card__title a:hover {
    color: var(--category-color);
}

.category-18 .forum-24 .forum-card__eyebrow {
    font-size: 0;
}

.category-18 .forum-24 .forum-card__eyebrow::after {
    content: "Parallel record";
    font-size: var(--txtxsmall);
}

.category-18 .forum-20,
.category-18 .forum-21,
.category-18 .forum-22,
.category-18 .forum-23 {
    grid-template-columns: 122px minmax(0, 1fr);
    grid-template-areas:
        "visual content"
        "stats stats"
        "last last";
}

.category-18 .forum-20 .forum-card__visual,
.category-18 .forum-21 .forum-card__visual,
.category-18 .forum-22 .forum-card__visual,
.category-18 .forum-23 .forum-card__visual {
    grid-area: visual;
}

.category-18 .forum-20 .forum-card__content,
.category-18 .forum-21 .forum-card__content,
.category-18 .forum-22 .forum-card__content,
.category-18 .forum-23 .forum-card__content {
    grid-area: content;
}

.category-18 .forum-20 .forum-card__stats,
.category-18 .forum-21 .forum-card__stats,
.category-18 .forum-22 .forum-card__stats,
.category-18 .forum-23 .forum-card__stats {
    grid-area: stats;
    border-top: 1px solid var(--hairline);
    border-left: 0;
}

.category-18 .forum-20 .forum-card__lastpost,
.category-18 .forum-21 .forum-card__lastpost,
.category-18 .forum-22 .forum-card__lastpost,
.category-18 .forum-23 .forum-card__lastpost {
    grid-area: last;
    border-top: 1px solid var(--hairline);
    border-left: 0;
}

/* ---------------------------------------------------------
   Categories 25 and 29: three-column compact records
   --------------------------------------------------------- */

.category-25 .forum-grid,
.category-29 .forum-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.category-25 .forum-card,
.category-29 .forum-card {
    grid-template-columns: 1fr;
    grid-template-areas:
        "visual"
        "content"
        "stats"
        "last";
}

.category-25 .forum-card__visual,
.category-29 .forum-card__visual {
    grid-area: visual;
    min-height: 136px;
    border-right: 0;
    border-bottom: 1px solid var(--hairline);
}

.category-25 .forum-card__content,
.category-29 .forum-card__content {
    grid-area: content;
    min-height: 224px;
}

.category-25 .forum-card__stats,
.category-29 .forum-card__stats {
    grid-area: stats;
    border-top: 1px solid var(--hairline);
    border-left: 0;
}

.category-25 .forum-card__lastpost,
.category-29 .forum-card__lastpost {
    grid-area: last;
    min-height: 150px;
    border-top: 1px solid var(--hairline);
    border-left: 0;
}

/* ---------------------------------------------------------
   Category 33: compact archive register
   --------------------------------------------------------- */

.category-33 .forum-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.category-33 .forum-card {
    --visual-inset: 12px;
    grid-template-columns: 86px minmax(0, 1fr) minmax(200px, 0.55fr);
    min-height: 136px;
}

.category-33 .forum-card__visual {
    min-height: 136px;
}

.category-33 .forum-card__record {
    left: 15px;
    font-size: 46px;
}

.category-33 .forum-card__content {
    padding: 24px;
}

.category-33 .forum-card__title {
    font-size: clamp(22px, 2vw, 31px);
}

.category-33 .forum-card__description,
.category-33 .forum-card__stats {
    display: none;
}

.category-33 .forum-card__lastpost {
    padding: 22px;
}

/* ---------------------------------------------------------
   Legend
   --------------------------------------------------------- */

.forum-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-s) var(--space-l);
    margin-top: calc(-1 * var(--space-xl));
    padding: var(--space-m) 0;
    border-top: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);
}

.forum-legend__item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    color: var(--txtcol-soft);
    font-size: var(--txtxsmall);
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.forum-legend__item .forum_status {
    width: 7px;
    height: 7px;
    background: var(--txtcol-soft);
}

.forum-legend__item .forum_on {
    background: var(--design);
}

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

@media (max-width: 1260px) {
    .forum-card,
    .category-10 .forum-11,
    .category-14 .forum-card,
    .category-18 .forum-19,
    .category-18 .forum-24 {
        grid-template-columns: 130px minmax(0, 1fr) 190px;
        grid-template-areas:
            "visual content stats"
            "visual last last";
    }

    .forum-card__visual {
        grid-area: visual;
    }

    .forum-card__content {
        grid-area: content;
    }

    .forum-card__stats {
        grid-area: stats;
    }

    .forum-card__lastpost {
        grid-area: last;
        border-top: 1px solid var(--hairline);
    }

    .category-33 .forum-card {
        grid-template-columns: 86px minmax(0, 1fr);
        grid-template-areas: "visual content" "last last";
    }
}

@media (max-width: 980px) {
    .complexion-index {
        width: min(calc(100% - 28px), var(--content-wide));
    }

    .category-header {
        grid-template-columns: 92px minmax(0, 1fr) 30px;
    }

    .category-10 .forum-grid,
    .category-18 .forum-grid,
    .category-25 .forum-grid,
    .category-29 .forum-grid,
    .category-33 .forum-grid {
        grid-template-columns: 1fr;
    }

    .category-10 .forum-11,
    .category-10 .forum-12,
    .category-10 .forum-13,
    .category-18 .forum-19,
    .category-18 .forum-20,
    .category-18 .forum-21,
    .category-18 .forum-22,
    .category-18 .forum-23,
    .category-18 .forum-24 {
        grid-column: auto;
    }

    .category-25 .forum-card__content,
    .category-29 .forum-card__content {
        min-height: 0;
    }
}

@media (max-width: 720px) {
    .complexion-index {
        width: min(calc(100% - 20px), var(--content-wide));
        padding-top: 20px;
    }

    .forum-category {
        margin-bottom: 54px;
    }

    .category-header {
        grid-template-columns: 64px minmax(0, 1fr) 28px;
        min-height: 112px;
    }

    .category-header__index::before {
        left: var(--space-xs);
        font-size: 68px;
    }

    .category-header__content {
        padding: var(--space-m) 16px 20px;
    }

    .category-header__title {
        font-size: clamp(28px, 9vw, 46px);
    }

    .forum-card,
    .category-10 .forum-11,
    .category-10 .forum-12,
    .category-10 .forum-13,
    .category-14 .forum-card,
    .category-18 .forum-19,
    .category-18 .forum-20,
    .category-18 .forum-21,
    .category-18 .forum-22,
    .category-18 .forum-23,
    .category-18 .forum-24,
    .category-25 .forum-card,
    .category-29 .forum-card,
    .category-33 .forum-card {
        grid-template-columns: 1fr;
        grid-template-areas:
            "visual"
            "content"
            "stats"
            "last";
    }

    .forum-card__visual,
    .category-33 .forum-card__visual {
        grid-area: visual;
        min-height: 126px;
        border-right: 0;
        border-bottom: 1px solid var(--hairline);
    }

    .forum-card__content {
        grid-area: content;
        padding: 24px 20px;
    }

    .forum-card__stats {
        grid-area: stats;
        border-top: 1px solid var(--hairline);
        border-left: 0;
    }

    .forum-card__lastpost {
        grid-area: last;
        min-height: 0;
        padding: 22px 20px;
        border-top: 1px solid var(--hairline);
        border-left: 0;
    }

    .category-33 .forum-card__description,
    .category-33 .forum-card__stats {
        display: initial;
    }

    .category-33 .forum-card__stats {
        display: grid;
    }

    .forum-subforums {
        grid-template-columns: 1fr;
        gap: 7px;
    }
}