/* ============================================================
   The Jediism Way - Main Stylesheet
   ============================================================ */

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

:root {
    --bg: #faf7f2;
    --bg-dark: #1a1815;
    --surface: #ffffff;
    --surface-elevated: #fdfaf5;
    --ink: #1a1815;
    --ink-soft: #4a4640;
    --ink-mute: #8a857c;
    --line: #e8e2d6;
    --gold: #c9a14a;
    --gold-soft: #d4b569;
    --green: #3d5a3d;
    --green-deep: #2a4129;
    --burgundy: #6b2c2c;
    --burgundy-soft: #8a3d3d;
    --cream: #f4ede0;
    --radius-button: 999px;
}

/* Podcast and journal applications */
.podcast-hero,
.journal-public-hero {
    background: #1f1b16;
    color: #fffaf0;
    padding: clamp(3.5rem, 8vw, 6rem) 1.5rem;
}

.podcast-hero-inner,
.journal-public-hero > div,
.podcast-page,
.podcast-detail-shell,
.journal-shell,
.journal-public-feed,
.journal-public-grid,
.journal-entry-card {
    width: min(1120px, calc(100% - 2rem));
    margin: 0 auto;
}

.podcast-hero h1,
.journal-public-hero h1 {
    margin: 0.35rem 0;
    font-family: var(--font-heading);
    font-size: clamp(2.5rem, 7vw, 5rem);
    line-height: 0.95;
}

.podcast-page,
.journal-page,
.journal-public-feed,
.journal-entry-page,
.podcast-detail {
    padding: clamp(2rem, 5vw, 4rem) 0;
}

.podcast-feature,
.podcast-card,
.journal-editor-card,
.journal-list-card,
.journal-public-card,
.journal-entry-card,
.podcast-player-card,
.podcast-notes {
    background: #fffdfa;
    border: 1px solid rgba(203, 169, 86, 0.28);
    box-shadow: 0 18px 50px rgba(31, 27, 22, 0.08);
}

.podcast-feature {
    display: grid;
    grid-template-columns: minmax(220px, 360px) minmax(0, 1fr);
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: center;
    padding: clamp(1rem, 3vw, 2rem);
    border-radius: 24px;
    margin-bottom: 2rem;
}

.podcast-feature-art,
.podcast-card-art,
.podcast-audio-cover {
    aspect-ratio: 16 / 10;
    background: linear-gradient(135deg, #211d18, #7b3937);
    border-radius: 18px;
    overflow: hidden;
    display: grid;
    place-items: center;
    color: #d4ac4b;
    font-weight: 800;
    letter-spacing: 0.18em;
}

.podcast-feature-art img,
.podcast-card-art img,
.podcast-audio-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.podcast-type {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.45rem 0.8rem;
    background: #f5edda;
    color: #783634;
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.14em;
}

.podcast-feature h2,
.podcast-card h3,
.journal-public-card h2,
.podcast-player-copy h1,
.journal-entry-card h1 {
    font-family: var(--font-heading);
    line-height: 1.05;
}

.podcast-feature h2 {
    font-size: clamp(2rem, 4vw, 3.5rem);
}

.podcast-grid,
.journal-public-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
}

.journal-public-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 380px));
    justify-content: center;
    align-items: stretch;
}

.podcast-card,
.journal-public-card {
    border-radius: 18px;
    padding: 1rem;
}

.journal-public-card {
    display: flex;
    flex-direction: column;
    min-height: 285px;
    padding: 1.1rem;
    background:
        radial-gradient(circle at top right, rgba(201, 161, 74, 0.13), transparent 34%),
        #fffdfa;
    transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
}

.journal-public-card:hover {
    border-color: rgba(201, 161, 74, 0.55);
    box-shadow: 0 22px 52px rgba(31, 27, 22, 0.11);
    transform: translateY(-2px);
}

.journal-public-card-top,
.journal-public-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.journal-public-card-top {
    margin-bottom: 0.8rem;
}

.journal-public-card-top time {
    color: var(--ink-mute);
    font-size: 0.8rem;
    font-weight: 850;
    white-space: nowrap;
}

.journal-public-card h2 {
    margin: 0;
    font-size: clamp(1.65rem, 4vw, 2.25rem);
}

.journal-public-card h2 a {
    color: var(--ink);
}

.journal-public-card p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    min-height: 4.65em;
    margin: 0.75rem 0 0;
    color: var(--ink-soft);
    line-height: 1.55;
}

.journal-public-card-foot {
    margin-top: auto;
    padding-top: 1rem;
}

.podcast-card-meta,
.journal-public-meta,
.journal-entry-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    color: #8a8379;
    font-size: 0.82rem;
    font-weight: 700;
}

.podcast-discuss-btn {
    margin-top: 1rem;
}

.podcast-filter-bar,
.podcast-tag-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem;
}

.podcast-filter-bar {
    margin-bottom: 1.25rem;
    padding: 0.8rem;
    border: 1px solid #e6dccd;
    border-radius: 18px;
    background: #fffdfa;
}

.podcast-filter-bar a,
.podcast-tag-row a {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border-radius: 999px;
    border: 1px solid #e0d5c3;
    background: #fbf6ec;
    color: var(--ink-soft);
    padding: 0.45rem 0.75rem;
    font-size: 0.78rem;
    font-weight: 900;
    text-decoration: none;
}

.podcast-filter-bar a.active,
.podcast-filter-bar a:hover,
.podcast-tag-row a:hover {
    border-color: var(--gold);
    background: var(--ink);
    color: #fffaf0;
}

.podcast-filter-bar a.tag {
    background: #fff;
}

.podcast-filter-bar small {
    display: inline-grid;
    place-items: center;
    min-width: 1.35rem;
    height: 1.35rem;
    border-radius: 999px;
    background: rgba(201, 161, 74, 0.18);
}

.podcast-tag-row {
    margin: 0.75rem 0 1rem;
}

.podcast-tag-row.compact {
    margin: 0.65rem 0 0;
}

.podcast-tag-row.compact a {
    padding: 0.32rem 0.55rem;
    font-size: 0.7rem;
}

/* Site history timeline */
.history-hero {
    background:
        radial-gradient(circle at 12% 20%, rgba(201, 161, 74, 0.28), transparent 28%),
        linear-gradient(135deg, #1d1914 0%, #342b20 58%, #6b2c2c 100%);
    color: #fffaf0;
    padding: clamp(4rem, 8vw, 6.5rem) 1.5rem;
}

.history-hero-inner,
.history-page {
    width: min(1120px, calc(100% - 2rem));
    margin: 0 auto;
}

.history-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 320px);
    gap: clamp(2rem, 6vw, 4rem);
    align-items: end;
}

.history-kicker {
    margin: 0 0 0.85rem;
    color: var(--gold-soft);
    font-size: 0.78rem;
    font-weight: 950;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.history-hero h1 {
    max-width: 780px;
    margin: 0;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(3rem, 8vw, 6.4rem);
    line-height: 0.92;
}

.history-hero p:not(.history-kicker) {
    max-width: 720px;
    margin: 1.2rem 0 0;
    color: rgba(255, 250, 240, 0.78);
    font-size: clamp(1rem, 2vw, 1.2rem);
    line-height: 1.65;
}

.history-stat-card {
    display: grid;
    gap: 0.35rem;
    padding: 1.4rem;
    border: 1px solid rgba(201, 161, 74, 0.36);
    border-radius: 22px;
    background: rgba(255, 250, 240, 0.08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 18px 46px rgba(0, 0, 0, 0.18);
}

.history-stat-card span,
.history-stat-card small {
    color: rgba(255, 250, 240, 0.72);
    font-size: 0.78rem;
    font-weight: 850;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.history-stat-card strong {
    color: var(--gold-soft);
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 4rem;
    line-height: 0.9;
}

.history-page {
    padding: clamp(2.5rem, 6vw, 5rem) 0;
}

.history-timeline {
    position: relative;
    display: grid;
    gap: 2rem;
}

.history-timeline::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(201, 161, 74, 0.48), transparent);
}

.history-entry {
    position: relative;
    display: grid;
    grid-template-columns: minmax(240px, 0.8fr) minmax(0, 1fr);
    gap: clamp(1.1rem, 4vw, 2.4rem);
    align-items: center;
}

.history-entry.is-reversed {
    grid-template-columns: minmax(0, 1fr) minmax(240px, 0.8fr);
}

.history-entry.is-reversed .history-entry-media {
    grid-column: 2;
}

.history-entry.is-reversed .history-entry-copy {
    grid-column: 1;
    grid-row: 1;
}

.history-entry-media,
.history-entry-copy,
.history-closing {
    border: 1px solid rgba(232, 226, 214, 0.94);
    border-radius: 24px;
    background: #fffdfa;
    box-shadow: 0 18px 50px rgba(31, 27, 22, 0.075);
}

.history-entry-media {
    overflow: hidden;
}

.history-entry-media img,
.history-photo-placeholder {
    display: grid;
    width: 100%;
    aspect-ratio: 4 / 3;
    place-items: center;
}

.history-entry-media img {
    object-fit: cover;
}

.history-photo-placeholder {
    padding: 1.25rem;
    background:
        linear-gradient(135deg, rgba(31, 27, 22, 0.82), rgba(107, 44, 44, 0.7)),
        var(--ink);
    color: #fffaf0;
    text-align: center;
}

.history-photo-placeholder span {
    color: var(--gold-soft);
    font-size: 0.72rem;
    font-weight: 950;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.history-photo-placeholder strong {
    display: block;
    margin-top: 0.35rem;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(2rem, 5vw, 3.4rem);
    line-height: 1;
}

.history-entry-media p {
    margin: 0;
    padding: 0.85rem 1rem;
    border-top: 1px solid var(--line);
    color: var(--ink-mute);
    font-size: 0.82rem;
    line-height: 1.45;
}

.history-entry-copy {
    padding: clamp(1.35rem, 3vw, 2rem);
}

.history-entry-copy > span {
    display: inline-flex;
    margin-bottom: 0.75rem;
    border: 1px solid rgba(201, 161, 74, 0.34);
    border-radius: 999px;
    background: #fbf3e4;
    color: var(--burgundy);
    padding: 0.38rem 0.7rem;
    font-size: 0.72rem;
    font-weight: 950;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.history-entry-copy h2,
.history-closing h2 {
    margin: 0;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(2rem, 4vw, 3.2rem);
    line-height: 0.98;
}

.history-entry-copy p,
.history-closing p:not(.history-kicker) {
    margin: 1rem 0 0;
    color: var(--ink-soft);
    font-size: 1rem;
    line-height: 1.75;
}

.history-closing {
    margin-top: clamp(2.5rem, 6vw, 5rem);
    padding: clamp(1.5rem, 4vw, 3rem);
    background:
        radial-gradient(circle at top, rgba(201, 161, 74, 0.16), transparent 38%),
        #fffdfa;
    text-align: center;
}

.history-closing p:not(.history-kicker) {
    max-width: 820px;
    margin-right: auto;
    margin-left: auto;
}

.history-closing .btn {
    margin-top: 1.4rem;
}

@media (max-width: 800px) {
    .history-hero-inner,
    .history-entry,
    .history-entry.is-reversed {
        grid-template-columns: 1fr;
    }

    .history-entry.is-reversed .history-entry-media,
    .history-entry.is-reversed .history-entry-copy {
        grid-column: auto;
        grid-row: auto;
    }

    .history-timeline::before {
        left: 1rem;
    }
}

/* Jediism structure page */
.structure-hero {
    background:
        radial-gradient(circle at 78% 18%, rgba(201, 161, 74, 0.24), transparent 28%),
        linear-gradient(135deg, #181512 0%, #2f261d 58%, #4b2525 100%);
    color: #fffaf0;
    padding: clamp(4rem, 8vw, 6.2rem) 1.5rem;
}

.structure-hero-inner,
.structure-page {
    width: min(1120px, calc(100% - 2rem));
    margin: 0 auto;
}

.structure-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(230px, 340px);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: end;
}

.structure-kicker {
    margin: 0 0 0.75rem;
    color: var(--gold-soft);
    font-size: 0.76rem;
    font-weight: 950;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.structure-hero h1 {
    max-width: 760px;
    margin: 0;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(3rem, 8vw, 6rem);
    line-height: 0.94;
}

.structure-hero p:not(.structure-kicker) {
    max-width: 760px;
    margin: 1.1rem 0 0;
    color: rgba(255, 250, 240, 0.78);
    font-size: clamp(1rem, 2vw, 1.18rem);
    line-height: 1.65;
}

.structure-hero-card {
    padding: 1.35rem;
    border: 1px solid rgba(201, 161, 74, 0.36);
    border-radius: 24px;
    background: rgba(255, 250, 240, 0.08);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 18px 46px rgba(0,0,0,0.18);
}

.structure-hero-card span,
.structure-hero-card small {
    display: block;
    color: rgba(255, 250, 240, 0.72);
    font-size: 0.75rem;
    font-weight: 850;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.structure-hero-card strong {
    display: block;
    margin: 0.5rem 0;
    color: var(--gold-soft);
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(2.4rem, 5vw, 3.6rem);
    line-height: 0.94;
}

.structure-hero-hierarchy .structure-hero-card {
    background:
        linear-gradient(135deg, rgba(255, 250, 240, 0.13), rgba(201, 161, 74, 0.08)),
        rgba(255, 250, 240, 0.06);
}

.structure-page {
    padding: clamp(2.5rem, 6vw, 5rem) 0;
}

.structure-map {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: clamp(2rem, 5vw, 4rem);
}

.structure-map article,
.structure-level-card,
.structure-position-card,
.structure-note {
    border: 1px solid rgba(232, 226, 214, 0.94);
    border-radius: 24px;
    background: #fffdfa;
    box-shadow: 0 18px 50px rgba(31, 27, 22, 0.075);
}

.structure-map article {
    padding: clamp(1.25rem, 3vw, 2rem);
}

.structure-map span,
.structure-position-card span {
    display: inline-flex;
    border: 1px solid rgba(201, 161, 74, 0.28);
    border-radius: 999px;
    background: #fbf3e4;
    color: var(--burgundy);
    padding: 0.32rem 0.62rem;
    font-size: 0.68rem;
    font-weight: 950;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.structure-map h2,
.structure-section-head h2,
.structure-note h2 {
    margin: 0;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(2.1rem, 5vw, 3.4rem);
    line-height: 0.98;
}

.structure-map h2 {
    margin-top: 0.8rem;
}

.structure-map p,
.structure-note p:not(.structure-kicker) {
    margin: 0.85rem 0 0;
    color: var(--ink-soft);
    line-height: 1.7;
}

.structure-section {
    margin-top: clamp(2.4rem, 5vw, 4rem);
}

.structure-section-head {
    margin-bottom: 1.2rem;
}

.structure-section-head-centered {
    max-width: 760px;
    margin-right: auto;
    margin-bottom: 1.6rem;
    margin-left: auto;
    text-align: center;
}

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

.structure-path-rail {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1.8rem;
}

.structure-path-rail::before,
.structure-path-rail::after {
    content: "";
    width: min(10vw, 120px);
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(201, 161, 74, 0.6));
}

.structure-path-rail::after {
    background: linear-gradient(90deg, rgba(201, 161, 74, 0.6), transparent);
}

.structure-path-rail span {
    display: inline-grid;
    place-items: center;
    width: 2.15rem;
    height: 2.15rem;
    border: 1px solid rgba(201, 161, 74, 0.42);
    border-radius: 999px;
    background: #fffdfa;
    color: var(--burgundy);
    font-size: 0.72rem;
    font-weight: 950;
    box-shadow: 0 12px 28px rgba(31, 27, 22, 0.06);
}

.structure-timeline-featured {
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.structure-level-card,
.structure-position-card {
    padding: 1.2rem;
}

.structure-level-card {
    position: relative;
    overflow: hidden;
    min-height: 100%;
    padding: clamp(1.2rem, 3vw, 1.55rem);
}

.structure-level-card::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--gold), var(--burgundy));
}

.structure-level-top {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.9rem;
}

.structure-step {
    display: inline-grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 999px;
    background: var(--ink);
    color: #fffaf0;
    font-weight: 950;
}

.structure-level-card small {
    display: inline-flex;
    margin-left: 0;
    border: 1px solid rgba(201, 161, 74, 0.34);
    border-radius: 999px;
    background: #fbf3e4;
    color: var(--burgundy);
    padding: 0.25rem 0.55rem;
    font-size: 0.7rem;
    font-weight: 950;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.structure-level-card h3,
.structure-position-card h3 {
    margin: 0.2rem 0 0.55rem;
    color: var(--ink);
    font-size: 1.25rem;
}

.structure-level-card p,
.structure-position-card p {
    margin: 0;
    color: var(--ink-soft);
    line-height: 1.55;
}

.structure-level-card div,
.structure-position-card small {
    display: block;
    margin-top: 0.85rem;
    color: var(--ink-mute);
    font-size: 0.9rem;
    line-height: 1.6;
}

.structure-position-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.structure-position-card {
    display: grid;
    align-content: start;
    gap: 0.55rem;
}

.structure-note {
    margin-top: clamp(2.5rem, 6vw, 5rem);
    padding: clamp(1.5rem, 4vw, 3rem);
    background:
        radial-gradient(circle at top right, rgba(201, 161, 74, 0.16), transparent 38%),
        #fffdfa;
    text-align: center;
}

.structure-note p:not(.structure-kicker) {
    max-width: 820px;
    margin-right: auto;
    margin-left: auto;
}

.structure-cta-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 1.4rem;
}

@media (max-width: 980px) {
    .structure-timeline,
    .structure-position-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .structure-hero-inner,
    .structure-map,
    .structure-timeline,
    .structure-position-grid {
        grid-template-columns: 1fr;
    }
}

/* Inner peace page */
.inner-peace-hero {
    background:
        radial-gradient(circle at 14% 20%, rgba(201, 161, 74, 0.22), transparent 28%),
        radial-gradient(circle at 88% 18%, rgba(61, 90, 61, 0.24), transparent 30%),
        linear-gradient(135deg, #191714 0%, #28251f 60%, #3d3326 100%);
    color: #fffaf0;
    padding: clamp(4rem, 8vw, 6.2rem) 1.5rem;
}

.inner-peace-hero-inner,
.inner-peace-page {
    width: min(1120px, calc(100% - 2rem));
    margin: 0 auto;
}

.inner-peace-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(230px, 340px);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: end;
}

.inner-peace-kicker {
    margin: 0 0 0.75rem;
    color: var(--gold-soft);
    font-size: 0.76rem;
    font-weight: 950;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.inner-peace-hero h1 {
    max-width: 760px;
    margin: 0;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(3rem, 8vw, 6rem);
    line-height: 0.94;
}

.inner-peace-hero p:not(.inner-peace-kicker) {
    max-width: 680px;
    margin: 1.1rem 0 0;
    color: rgba(255, 250, 240, 0.78);
    font-size: clamp(1rem, 2vw, 1.18rem);
    line-height: 1.65;
}

.inner-peace-quiet-card {
    padding: 1.35rem;
    border: 1px solid rgba(201, 161, 74, 0.36);
    border-radius: 24px;
    background: rgba(255, 250, 240, 0.08);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 18px 46px rgba(0,0,0,0.18);
}

.inner-peace-quiet-card span,
.inner-peace-quiet-card small {
    display: block;
    color: rgba(255, 250, 240, 0.72);
    font-size: 0.75rem;
    font-weight: 850;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.inner-peace-quiet-card strong {
    display: block;
    margin: 0.5rem 0;
    color: var(--gold-soft);
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(2.2rem, 5vw, 3.4rem);
    line-height: 0.94;
}

.inner-peace-page {
    padding: clamp(2.5rem, 6vw, 5rem) 0;
}

.inner-peace-intro {
    max-width: 820px;
    margin: 0 auto clamp(2rem, 5vw, 3.5rem);
    text-align: center;
}

.inner-peace-intro p {
    margin: 0;
    color: var(--ink-soft);
    font-size: clamp(1.05rem, 2vw, 1.28rem);
    line-height: 1.75;
}

.inner-peace-practices {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.85rem;
}

.inner-peace-card,
.inner-peace-reflection {
    border: 1px solid rgba(232, 226, 214, 0.94);
    border-radius: 24px;
    background: #fffdfa;
    box-shadow: 0 18px 50px rgba(31, 27, 22, 0.075);
}

.inner-peace-card {
    position: relative;
    overflow: hidden;
    padding: 1.15rem;
}

.inner-peace-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: linear-gradient(90deg, var(--gold), rgba(61, 90, 61, 0.78));
}

.inner-peace-card span {
    display: inline-grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    margin-bottom: 0.95rem;
    border-radius: 999px;
    background: var(--ink);
    color: #fffaf0;
    font-weight: 950;
}

.inner-peace-card h2 {
    margin: 0 0 0.6rem;
    color: var(--ink);
    font-size: 1.12rem;
    line-height: 1.15;
}

.inner-peace-card p {
    margin: 0;
    color: var(--ink-soft);
    line-height: 1.55;
}

.inner-peace-card small {
    display: block;
    margin-top: 0.9rem;
    color: var(--ink-mute);
    font-size: 0.9rem;
    line-height: 1.6;
}

.inner-peace-reflection {
    display: grid;
    grid-template-columns: minmax(220px, 0.55fr) minmax(0, 1fr);
    gap: clamp(1rem, 4vw, 2rem);
    align-items: center;
    margin-top: clamp(2rem, 5vw, 4rem);
    padding: clamp(1.4rem, 4vw, 2.6rem);
    background:
        radial-gradient(circle at top right, rgba(201, 161, 74, 0.14), transparent 38%),
        #fffdfa;
}

.inner-peace-reflection h2 {
    margin: 0;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(2.1rem, 5vw, 3.4rem);
    line-height: 0.98;
}

.inner-peace-reflection > p {
    margin: 0;
    color: var(--ink-soft);
    line-height: 1.7;
}

.inner-peace-actions {
    grid-column: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

@media (max-width: 1100px) {
    .inner-peace-practices {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .inner-peace-hero-inner,
    .inner-peace-reflection {
        grid-template-columns: 1fr;
    }

    .inner-peace-practices {
        grid-template-columns: 1fr;
    }

    .inner-peace-actions {
        grid-column: auto;
    }
}

.podcast-player-card {
    border-radius: 24px;
    overflow: hidden;
}

.podcast-player-media iframe,
.podcast-player-media video {
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
    display: block;
    background: #111;
}

.podcast-player-media audio {
    width: calc(100% - 2rem);
    margin: 1rem;
}

.podcast-player-copy,
.podcast-notes,
.journal-entry-card {
    padding: clamp(1.25rem, 4vw, 2.5rem);
}

.journal-header {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: clamp(1rem, 3vw, 2rem);
    margin-bottom: 1.5rem;
    padding: clamp(1.2rem, 3vw, 2rem);
    border: 1px solid rgba(201, 161, 74, 0.28);
    border-radius: 24px;
    background:
        radial-gradient(circle at top right, rgba(201, 161, 74, 0.14), transparent 34%),
        linear-gradient(135deg, #fffdfa 0%, #fbf5ea 100%);
    box-shadow: 0 18px 55px rgba(31, 27, 22, 0.08);
}

.journal-header-copy {
    max-width: 760px;
}

.journal-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0 0 0.75rem;
    border: 1px solid rgba(201, 161, 74, 0.34);
    border-radius: 999px;
    background: rgba(201, 161, 74, 0.11);
    color: var(--burgundy);
    padding: 0.42rem 0.7rem;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.journal-kicker::before {
    content: "";
    width: 0.52rem;
    height: 0.52rem;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 0 4px rgba(201, 161, 74, 0.16);
}

.journal-header h1 {
    margin: 0;
    color: var(--ink);
    font-family: var(--font-heading);
    font-size: clamp(2.5rem, 6vw, 4.75rem);
    line-height: 0.95;
}

.journal-header-copy > p:not(.journal-kicker) {
    max-width: 680px;
    margin: 0.9rem 0 0;
    color: var(--ink-soft);
    font-size: clamp(1rem, 1.7vw, 1.18rem);
    line-height: 1.55;
}

.journal-privacy-note {
    display: grid;
    gap: 0.25rem;
    max-width: 680px;
    margin-top: 1rem;
    border-left: 4px solid var(--gold);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.74);
    padding: 0.85rem 1rem;
}

.journal-privacy-note strong {
    color: var(--ink);
    font-size: 0.92rem;
}

.journal-privacy-note span {
    color: var(--ink-soft);
    font-size: 0.9rem;
    line-height: 1.45;
}

.journal-header > .btn {
    align-self: flex-start;
    white-space: nowrap;
}

.journal-dashboard-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(130px, 1fr)) auto;
    gap: 0.75rem;
    align-items: stretch;
    margin-bottom: 1rem;
}

.journal-dashboard-stat,
.journal-start-card {
    border: 1px solid rgba(225, 216, 200, 0.95);
    border-radius: 18px;
    background: rgba(255, 253, 248, 0.92);
    box-shadow: 0 14px 35px rgba(31, 27, 22, 0.06);
}

.journal-dashboard-stat {
    display: grid;
    align-content: center;
    min-height: 74px;
    padding: 0.85rem 1rem;
}

.journal-dashboard-stat strong {
    color: var(--ink);
    font-size: 1.65rem;
    line-height: 1;
}

.journal-dashboard-stat span,
.journal-editor-head span,
.journal-start-card span {
    color: var(--burgundy);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.journal-dashboard-row > .btn {
    align-self: center;
    min-height: 46px;
    padding: 0.7rem 1.25rem;
}

.journal-dashboard-action {
    box-shadow: 0 10px 24px rgba(201, 161, 74, 0.22);
}

.journal-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
    gap: 1rem;
}

.journal-editor-card,
.journal-list-card {
    border-radius: 20px;
    padding: clamp(1rem, 3vw, 1.5rem);
}

.journal-editor-head,
.journal-list-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.journal-editor-head h2,
.journal-start-card h2,
.journal-list-head h2 {
    margin: 0.15rem 0 0;
    color: var(--ink);
    font-family: var(--font-heading);
    font-size: clamp(1.55rem, 3vw, 2.35rem);
    line-height: 1.02;
}

.journal-list-head h2 {
    font-family: inherit;
    font-size: 1.05rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    line-height: 1.2;
    text-transform: uppercase;
}

.journal-list-head a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0.45rem 0.8rem;
    border: 1px solid #e1d8c8;
    border-radius: 999px;
    color: var(--burgundy);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.journal-start-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.2rem;
    padding: clamp(1.1rem, 3vw, 1.5rem);
}

.journal-start-card p {
    max-width: 620px;
    margin: 0.6rem 0 0;
    color: var(--ink-soft);
}

.journal-start-card .btn {
    white-space: nowrap;
}

.journal-library-card {
    border: 1px solid rgba(225, 216, 200, 0.95);
    border-radius: 22px;
    background: rgba(255, 253, 248, 0.94);
    box-shadow: 0 18px 50px rgba(31, 27, 22, 0.07);
    padding: clamp(1rem, 3vw, 1.5rem);
}

.journal-library-head {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 1rem;
    margin-bottom: 1.15rem;
}

.journal-library-head span,
.journal-search-summary,
.journal-empty-state span {
    color: var(--burgundy);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.journal-library-head h2,
.journal-empty-state h2 {
    margin: 0.15rem 0 0;
    color: var(--ink);
    font-family: var(--font-heading);
    font-size: clamp(1.9rem, 4vw, 3rem);
    line-height: 1;
}

.journal-search-form {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: min(100%, 470px);
}

.journal-search-form input {
    width: 100%;
    min-height: 44px;
    border: 1px solid #e1d8c8;
    border-radius: 999px;
    background: #fff;
    padding: 0.65rem 1rem;
    color: var(--ink);
    font: inherit;
}

.journal-search-form input:focus {
    outline: 2px solid rgba(201, 161, 74, 0.25);
    border-color: var(--gold);
}

.journal-search-summary {
    margin: 0 0 1rem;
    color: var(--ink-mute);
}

.journal-entry-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.journal-entry-tile {
    display: flex;
    flex-direction: column;
    min-height: 245px;
    border: 1px solid #e8dfd1;
    border-radius: 20px;
    background:
        radial-gradient(circle at top right, rgba(201, 161, 74, 0.12), transparent 30%),
        #fff;
    padding: 1rem;
    box-shadow: 0 14px 34px rgba(31, 27, 22, 0.06);
    transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
}

.journal-entry-tile:hover {
    border-color: rgba(201, 161, 74, 0.55);
    box-shadow: 0 20px 42px rgba(31, 27, 22, 0.09);
    transform: translateY(-2px);
}

.journal-entry-tile-top,
.journal-entry-meta-row,
.journal-entry-tile-actions,
.journal-pagination {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.journal-entry-tile-top {
    justify-content: space-between;
    margin-bottom: 0.65rem;
}

.journal-entry-tile-top time {
    color: var(--ink-mute);
    font-size: 0.82rem;
    font-weight: 800;
}

.journal-entry-tile h3 {
    margin: 0;
    color: var(--ink);
    font-family: var(--font-heading);
    font-size: clamp(1.45rem, 3vw, 2rem);
    line-height: 1.04;
}

.journal-entry-tile p {
    margin: 0.75rem 0 0;
    color: var(--ink-soft);
    line-height: 1.55;
}

.journal-entry-tile .journal-entry-excerpt {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    min-height: 4.65em;
}

.journal-entry-meta-row {
    margin-top: auto;
    padding-top: 1rem;
}

.journal-entry-meta-row span {
    max-width: 100%;
    border: 1px solid #e8dfd1;
    border-radius: 999px;
    background: #fbf6ec;
    color: #6f675d;
    padding: 0.36rem 0.65rem;
    font-size: 0.76rem;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.journal-entry-tile-actions {
    margin-top: 1rem;
}

.journal-empty-state {
    display: grid;
    place-items: center;
    gap: 0.65rem;
    min-height: 280px;
    border: 1px dashed #d9ccba;
    border-radius: 20px;
    background: linear-gradient(180deg, #fffdf9, #fbf6ec);
    padding: 2rem;
    text-align: center;
}

.journal-empty-state p {
    max-width: 520px;
    margin: 0;
    color: var(--ink-soft);
}

.journal-pagination {
    justify-content: center;
    margin-top: 1.25rem;
}

.journal-pagination span {
    color: var(--ink-mute);
    font-size: 0.85rem;
    font-weight: 900;
}

.journal-editor-card label {
    display: grid;
    gap: 0.4rem;
    margin-bottom: 1rem;
    color: #4d4841;
    font-weight: 800;
}

.journal-editor-card input,
.journal-editor-card textarea {
    width: 100%;
    border: 1px solid #e1d8c8;
    border-radius: 14px;
    padding: 0.9rem 1rem;
    background: #fff;
    font: inherit;
}

.journal-two {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem;
}

.journal-list-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    margin-bottom: 0.6rem;
    padding: 0.9rem;
    border: 1px solid #eee5d8;
    border-radius: 16px;
    background: #fffdfa;
    transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s;
}

.journal-list-item:hover,
.journal-list-item.is-active {
    border-color: rgba(201, 161, 74, 0.5);
    box-shadow: 0 12px 28px rgba(31, 27, 22, 0.06);
    transform: translateY(-1px);
}

.journal-list-item small {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem;
    color: #8a8379;
    margin-top: 0.25rem;
}

.journal-list-item strong {
    color: var(--ink);
    font-size: 1rem;
    line-height: 1.25;
}

.journal-list-item p {
    margin: 0.45rem 0 0;
    color: var(--ink-soft);
    font-size: 0.9rem;
    line-height: 1.45;
}

.journal-entry-status {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    border: 1px solid rgba(201, 161, 74, 0.35);
    border-radius: 999px;
    background: #fbf6ec;
    color: var(--burgundy);
    padding: 0.2rem 0.5rem;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.journal-entry-status.is-private {
    color: var(--green);
    border-color: rgba(61, 90, 61, 0.25);
    background: rgba(61, 90, 61, 0.08);
}

.journal-list-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.65rem;
    padding-top: 0.25rem;
    font-weight: 800;
}

.journal-list-actions a,
.journal-list-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    border: 1px solid #eadfce;
    border-radius: 999px;
    background: #fff;
    color: var(--burgundy);
    padding: 0.35rem 0.65rem;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.journal-list-actions form {
    margin: 0;
}

.journal-list-actions button {
    color: #7b3937;
    cursor: pointer;
}

.journal-editor-head .btn,
.journal-list-head a,
.journal-list-actions a,
.journal-list-actions button {
    transition: color 0.18s, border-color 0.18s, background 0.18s;
}

.btn-sm {
    padding: 0.48rem 0.9rem;
    font-size: 0.68rem;
}

.journal-editor-card .rich-editor-wrap {
    margin-bottom: 1rem;
}

.journal-photo-dropzone {
    display: grid !important;
    place-items: center;
    gap: 0.35rem !important;
    min-height: 145px;
    margin: 0 0 1rem !important;
    border: 1.5px dashed #d8ccba;
    border-radius: 18px;
    background: linear-gradient(180deg, #fffdf9, #fbf6ec);
    color: #4d4841 !important;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    text-align: center;
    transition: border-color 0.18s, background 0.18s, transform 0.18s;
}

.journal-photo-dropzone:hover,
.journal-photo-dropzone.is-dragging {
    border-color: var(--gold);
    background: #fff8e8;
    transform: translateY(-1px);
}

.journal-photo-dropzone input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.journal-photo-icon {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(201, 161, 74, 0.13);
    color: var(--burgundy);
}

.journal-photo-dropzone strong {
    font-size: 1.05rem;
}

.journal-photo-dropzone small {
    color: var(--ink-mute);
    font-weight: 700;
}

.journal-photo-preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 0.65rem;
    margin-bottom: 1rem;
}

.journal-photo-preview-grid img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 12px;
    border: 1px solid #e3d9c8;
}

.journal-public-photos {
    margin-top: 1.5rem;
}

.journal-publish-card {
    display: grid;
    grid-template-columns: minmax(190px, 0.8fr) minmax(230px, 0.8fr) minmax(190px, 1fr);
    gap: 1rem;
    align-items: center;
    padding: 0.85rem;
    border-radius: 18px;
    border: 1px solid #e5dccf;
    background: #fffdf8;
}

.journal-publish-card > div:first-child strong,
.journal-publish-card > div:first-child span {
    display: block;
}

.journal-publish-card > div:first-child strong {
    color: var(--ink);
    font-size: 0.92rem;
}

.journal-publish-card > div:first-child span {
    margin-top: 0.2rem;
    color: var(--ink-mute);
    font-size: 0.78rem;
    line-height: 1.35;
}

.journal-visibility-toggle {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.25rem;
    padding: 0.25rem;
    border: 1px solid #ded4c4;
    border-radius: 999px;
    background: #f8f2e8;
}

.journal-visibility-toggle label {
    margin: 0 !important;
    display: block !important;
}

.journal-visibility-toggle input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.journal-visibility-toggle span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    border-radius: 999px;
    color: var(--ink-soft);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition: background 0.18s, color 0.18s, box-shadow 0.18s;
}

.journal-visibility-toggle input:checked + span {
    background: var(--ink);
    color: #fffaf0;
    box-shadow: 0 8px 20px rgba(26, 24, 21, 0.12);
}

.journal-publish-card .btn {
    width: 100%;
    min-height: 50px;
}

.journal-public-author {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    color: #7b3937;
    font-weight: 900;
}

.journal-public-author img {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
}

@media (max-width: 760px) {
    .podcast-feature,
    .journal-layout,
    .journal-header {
        display: block;
        border-radius: 18px;
    }

    .journal-dashboard-row {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .journal-dashboard-row > .btn {
        grid-column: 1 / -1;
        min-height: 44px;
    }

    .journal-header .btn {
        margin-top: 1rem;
        width: 100%;
    }

    .journal-list-card {
        margin-top: 1rem;
    }

    .journal-library-head,
    .journal-search-form {
        display: block;
    }

    .journal-search-form {
        margin-top: 1rem;
    }

    .journal-search-form .btn {
        width: 100%;
        margin-top: 0.55rem;
    }

    .journal-entry-grid {
        grid-template-columns: 1fr;
    }

    .journal-public-card-top,
    .journal-public-card-foot {
        align-items: flex-start;
        flex-direction: column;
    }

    .journal-public-card-foot .btn {
        width: 100%;
    }

    .journal-two,
    .journal-publish-card {
        grid-template-columns: 1fr;
    }

    .journal-start-card,
    .journal-editor-head,
    .journal-list-item {
        display: block;
    }

    .journal-start-card .btn,
    .journal-editor-head .btn {
        margin-top: 1rem;
        width: 100%;
    }

    .journal-list-actions {
        margin-top: 0.7rem;
        flex-wrap: wrap;
    }
}

/* ===== Forums ===== */
.forum-hero {
    background: linear-gradient(135deg, #1a1815 0%, #30251f 58%, #6b2c2c 100%);
    color: var(--cream);
    padding: 4rem 0 3.25rem;
}
.forum-hero-inner {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 2rem;
}
.forum-hero h1,
.forum-titlebar h1 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(2.6rem, 6vw, 5rem);
    line-height: 0.95;
    margin: 0.2rem 0 0.8rem;
}
.forum-topic-form-head {
    display: grid;
    gap: 0.2rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid rgba(232, 226, 214, 0.72);
}
.forum-topic-form-head .eyebrow {
    margin: 0;
}
.forum-topic-form-head h1 {
    margin: 0;
    color: var(--ink);
    font-family: inherit;
    font-size: clamp(1.45rem, 2vw, 1.9rem);
    line-height: 1.15;
    letter-spacing: 0;
}
.forum-hero p { color: rgba(244, 237, 224, 0.82); max-width: 760px; font-size: 1.04rem; }
.forum-page { padding: 2.5rem 0 4rem; }
.forum-page > .container,
.forum-hero > .container {
    width: min(1240px, calc(100% - 3rem));
    margin-inline: auto;
}
.forum-page .forum-shell {
    max-width: 1180px;
    margin-inline: auto;
}
.forum-page .topic-titlebar,
.forum-page .forum-post-stack,
.forum-page .quick-reply {
    max-width: 1120px;
    width: 100%;
    margin-inline: auto;
}
.forum-shell,
.forum-category-stack,
.forum-post-stack { display: grid; gap: 1.25rem; }
.forum-index-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
    gap: 1.25rem;
    align-items: start;
}
.forum-presence-sidebar {
    display: grid;
    gap: 1rem;
    position: sticky;
    top: 1rem;
}
.forum-presence-card {
    background:
        radial-gradient(circle at top right, rgba(201, 161, 74, 0.12), transparent 34%),
        var(--surface);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 1rem;
    box-shadow: 0 12px 30px rgba(26, 24, 21, 0.065);
}
.forum-presence-card.is-cantina {
    background:
        linear-gradient(135deg, rgba(26, 24, 21, 0.94), rgba(52, 43, 32, 0.94)),
        var(--ink);
    color: var(--cream);
    border-color: rgba(201, 161, 74, 0.34);
}
.forum-presence-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}
.forum-presence-head span {
    color: var(--burgundy);
    font-size: 0.68rem;
    font-weight: 950;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.forum-presence-card.is-cantina .forum-presence-head span {
    color: var(--gold-soft);
}
.forum-presence-head h2 {
    margin: 0;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.38rem;
    line-height: 1;
}
.forum-presence-card p {
    margin: 0;
    color: var(--ink-soft);
    line-height: 1.5;
    font-size: 0.9rem;
}
.forum-presence-card.is-cantina p {
    color: rgba(244, 237, 224, 0.78);
}
.forum-sidebar-member {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 0.65rem;
    align-items: center;
    padding: 0.55rem;
    border-radius: 12px;
    background: rgba(250, 247, 242, 0.72);
    border: 1px solid rgba(232, 226, 214, 0.65);
    color: var(--ink);
    text-decoration: none;
}
.forum-sidebar-member img {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(244, 237, 224, 0.9);
    box-shadow: 0 6px 14px rgba(26, 24, 21, 0.14);
}
.forum-sidebar-member span,
.forum-sidebar-total {
    display: grid;
    min-width: 0;
}
.forum-sidebar-member strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.92rem;
}
.forum-sidebar-member small,
.forum-sidebar-total span,
.forum-sidebar-stat-grid span {
    color: var(--ink-mute);
    font-size: 0.72rem;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.forum-sidebar-total {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(232, 226, 214, 0.72);
}
.forum-sidebar-total strong {
    color: var(--burgundy);
    font-size: 1.55rem;
    line-height: 1;
}
.forum-sidebar-stat-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
}
.forum-sidebar-stat-grid div {
    display: grid;
    gap: 0.15rem;
    min-width: 0;
    padding: 0.7rem;
    border-radius: 12px;
    background: rgba(250, 247, 242, 0.72);
    border: 1px solid rgba(232, 226, 214, 0.65);
}
.forum-sidebar-stat-grid strong {
    color: var(--burgundy);
    font-size: 1.5rem;
    line-height: 1;
}
.forum-presence-users {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}
.forum-presence-users a,
.forum-presence-list img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
}
.forum-presence-users img,
.forum-presence-list img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: inherit;
    border: 2px solid rgba(244, 237, 224, 0.9);
    box-shadow: 0 6px 14px rgba(26, 24, 21, 0.14);
}
.forum-presence-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.85rem;
    min-height: 36px;
    padding: 0.45rem 0.85rem;
    border-radius: 999px;
    background: var(--gold);
    color: var(--ink);
    font-size: 0.72rem;
    font-weight: 950;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
}
.forum-presence-link:hover {
    background: var(--gold-soft);
    color: var(--ink);
}
.forum-presence-list,
.forum-presence-topics {
    display: grid;
    gap: 0.55rem;
}
.forum-presence-list a,
.forum-presence-topics a {
    display: grid;
    text-decoration: none;
    color: var(--ink);
}
.forum-presence-list a {
    grid-template-columns: auto 36px minmax(0, 1fr);
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem;
    border-radius: 12px;
    background: rgba(250, 247, 242, 0.72);
    border: 1px solid rgba(232, 226, 214, 0.65);
}
.forum-presence-list.is-compact a {
    grid-template-columns: 34px minmax(0, 1fr) auto;
}
.forum-presence-list.is-compact img {
    width: 34px;
    height: 34px;
}
.forum-presence-list strong,
.forum-presence-topics strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.9rem;
}
.forum-presence-list small,
.forum-presence-topics small {
    color: var(--ink-mute);
    font-size: 0.74rem;
    font-weight: 800;
    white-space: nowrap;
}
.forum-presence-topics a {
    gap: 0.18rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid rgba(232, 226, 214, 0.72);
}
.forum-presence-topics a:last-child {
    border-bottom: 0;
}
.forum-category-card,
.forum-panel,
.forum-topic-form,
.forum-empty,
.quick-reply {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: 0 12px 36px rgba(26, 24, 21, 0.07);
}
.forum-category-card header,
.forum-panel > h2,
.forum-list-toolbar {
    padding: 1.2rem 1.5rem;
    border-bottom: 1px solid var(--line);
}
.forum-category-card h2,
.forum-panel h2,
.forum-empty h2,
.forum-empty h3 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.8rem;
    margin: 0;
}
.forum-category-card header p,
.forum-titlebar p,
.forum-empty p { color: var(--ink-soft); margin: 0.25rem 0 0; }
.forum-row-list,
.topic-list { display: grid; }
.forum-row {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) minmax(96px, 0.12fr) minmax(250px, 0.38fr);
    gap: 1.15rem;
    align-items: center;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--line);
}
.forum-row:last-child,
.topic-row:last-child { border-bottom: 0; }
.forum-row-icon {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(145deg, var(--surface-elevated), #f4ede0);
    color: var(--burgundy);
    border: 1px solid var(--line);
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.15rem;
    font-weight: 900;
    text-transform: uppercase;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.55), 0 8px 20px rgba(26, 24, 21, 0.06);
    overflow: hidden;
}
.forum-row-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.forum-row-icon.is-read {
    opacity: 0.48;
    filter: saturate(0.75);
}
.forum-row-icon.is-unread {
    opacity: 1;
    background: linear-gradient(145deg, var(--ink), #342f28);
    color: var(--gold-soft);
    border-color: rgba(201, 161, 74, 0.55);
    box-shadow: inset 0 0 0 1px rgba(244,237,224,0.08), 0 12px 26px rgba(26, 24, 21, 0.16);
}
.forum-row-icon.is-unread img {
    opacity: 1;
    filter: none;
}
.forum-row.has-unread .forum-row-main h3 a {
    color: var(--ink);
    font-weight: 900;
}
.forum-new-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.35rem;
    padding: 0.18rem 0.48rem;
    border-radius: 999px;
    background: var(--gold);
    color: var(--ink);
    font-size: 0.68rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: 0 5px 12px rgba(201, 161, 74, 0.22);
}
.forum-row-main h3,
.topic-main h3 { margin: 0; font-size: 1.05rem; }
.forum-row-main a,
.topic-main a,
.forum-row-latest a { color: var(--ink); text-decoration: none; }
.forum-row-main a:hover,
.topic-main a:hover,
.forum-row-latest a:hover { color: var(--burgundy); }
.forum-row-main p { color: var(--ink-soft); margin: 0.25rem 0 0; font-size: 0.93rem; }
.forum-subforum-links { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.65rem; }
.forum-subforum-links a {
    background: var(--surface-elevated);
    border: 1px solid var(--line);
    border-radius: var(--radius-button);
    padding: 0.22rem 0.65rem;
    font-size: 0.76rem;
    color: var(--burgundy);
}
.forum-row-stats,
.topic-counts {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    color: var(--ink-soft);
    font-size: 0.78rem;
    white-space: nowrap;
}
.forum-row-stats strong,
.topic-counts strong { color: var(--ink); font-size: 1rem; letter-spacing: 0; }
.forum-row-stats span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-button);
    background: var(--surface-elevated);
    padding: 0.34rem 0.72rem;
    font-weight: 800;
}
.forum-row-stats {
    flex-direction: column;
    align-items: stretch;
}
.forum-row-stats span {
    width: 100%;
}
.forum-row-stats span:first-child {
    color: var(--burgundy);
}
.forum-row-stats span:last-child {
    color: var(--green);
}
.forum-row-latest {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 0.65rem;
    align-items: center;
    color: var(--ink-mute);
    font-size: 0.9rem;
}
.forum-row-latest > span {
    grid-column: 1 / -1;
}
.forum-row-latest img {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--cream);
    box-shadow: 0 4px 10px rgba(26,24,21,0.1);
}
.forum-row-latest small,
.topic-main small,
.topic-latest span { color: var(--ink-mute); }
.forum-row-latest-copy {
    display: grid;
    gap: 0.18rem;
    min-width: 0;
}
.forum-row-latest-title {
    display: block;
    font-weight: 900;
    line-height: 1.25;
    overflow-wrap: anywhere;
}
.forum-row-latest-copy small {
    display: block;
    gap: 0.08rem;
    line-height: 1.35;
}
.forum-row-latest-copy small a {
    color: var(--burgundy);
    font-weight: 800;
}
.forum-titlebar {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 1.25rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 1.5rem;
    box-shadow: 0 12px 36px rgba(26, 24, 21, 0.07);
}
.forum-titlebar h1 { font-size: clamp(2.2rem, 5vw, 4rem); }
.forum-list-toolbar { display: flex; align-items: center; justify-content: space-between; }
.forum-list-toolbar span { color: var(--ink-mute); font-size: 0.86rem; }
.topic-row {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 100px 180px;
    gap: 1rem;
    align-items: center;
    padding: 1.1rem 1.5rem;
    border-bottom: 1px solid var(--line);
}
.topic-avatar { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; }
.topic-pin {
    display: inline-flex;
    border-radius: var(--radius-button);
    background: rgba(201, 161, 74, 0.16);
    color: var(--burgundy);
    padding: 0.16rem 0.5rem;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-right: 0.35rem;
}
.topic-latest { display: grid; color: var(--green); font-size: 0.9rem; }
.forum-empty { padding: 2rem; text-align: center; }
.forum-empty h1 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(2rem, 5vw, 4rem);
    line-height: 1;
    margin: 0 0 1rem;
}
.forum-empty.small { border: 0; box-shadow: none; border-radius: 0; }
.forum-date-gap { color: var(--ink-soft); font-weight: 700; margin: 0.25rem 0 0.1rem 18%; }
.forum-post-card {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 12px 36px rgba(26, 24, 21, 0.06);
}
.forum-post-author {
    display: grid;
    align-content: start;
    justify-items: center;
    gap: 0.45rem;
    padding: 1.5rem;
    border-right: 1px solid var(--line);
    background: var(--surface-elevated);
    text-align: center;
}
.forum-post-author img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; }
.forum-post-author strong { font-size: 1.1rem; }
.forum-post-author span { color: var(--green); font-weight: 700; font-size: 0.9rem; }
.forum-post-author small { color: var(--ink-mute); }
.forum-post-body {
    min-height: 220px;
    padding: 1.5rem;
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 1.1rem;
}
.forum-post-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--ink-mute);
    font-weight: 700;
}
.forum-post-meta em {
    background: rgba(201, 161, 74, 0.18);
    color: var(--burgundy);
    border-radius: var(--radius-button);
    padding: 0.16rem 0.55rem;
    font-style: normal;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.forum-post-content { color: var(--ink-soft); font-size: 1.02rem; }
.forum-post-content blockquote,
.forum-post-content p { margin-bottom: 1rem; }
.forum-post-card-fast .forum-post-author-side small,
.forum-post-fast-note {
    color: var(--green-deep);
    font-weight: 850;
}
.forum-quote-btn {
    justify-self: start;
    border: 0;
    background: transparent;
    color: var(--burgundy);
    font-weight: 800;
    cursor: pointer;
    padding: 0.4rem 0;
}
.quick-reply {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 0.9rem;
    align-items: start;
    padding: 1rem;
    overflow: visible;
}
.quick-reply > img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.quick-reply-box {
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
    overflow: visible;
}
.quick-reply-placeholder {
    width: 100%;
    min-height: 52px;
    border: 0;
    background: #fff;
    color: var(--ink-soft);
    text-align: left;
    padding: 0 1rem;
    font-weight: 700;
    cursor: text;
}
.quick-reply-editor { display: none; padding: 0.75rem; }
.quick-reply.expanded .quick-reply-placeholder { display: none; }
.quick-reply.expanded .quick-reply-editor { display: grid; gap: 0.75rem; }
.quick-reply.expanded .quick-reply-box {
    padding-bottom: 0.15rem;
}
.quick-reply textarea,
.forum-topic-form textarea,
.forum-topic-form input {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 0.9rem 1rem;
    font: inherit;
    background: #fff;
}
.forum-topic-form { display: grid; gap: 1.1rem; padding: 1.5rem; }
.forum-topic-form .rich-editor-wrap,
.quick-reply .rich-editor-wrap {
    margin-top: 0.55rem;
    display: grid;
    gap: 0;
}
.forum-topic-form .tox-tinymce,
.quick-reply .tox-tinymce {
    border-radius: 14px !important;
}
.forum-topic-form .ql-editor,
.quick-reply .ql-editor {
    font-size: 1.04rem;
    line-height: 1.65;
}
.forum-topic-form .ql-editor.ql-blank::before,
.quick-reply .ql-editor.ql-blank::before {
    font-size: 1.04rem;
}
.forum-topic-form .editor-status,
.quick-reply .editor-status {
    position: static;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    padding: 0.65rem 0.2rem 0;
    margin: 0;
    clear: both;
}
.quick-reply .form-actions {
    margin-top: 0.65rem;
    align-items: center;
    position: relative;
    z-index: 1;
}
.forum-attachment-drop {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.9rem;
    align-items: start;
    background: #e9eef6;
    border: 1px solid #d7dfeb;
    border-radius: 12px;
    padding: 1rem;
    color: #4d5a75;
    transition: background 0.18s, border-color 0.18s, box-shadow 0.18s;
}
.forum-attachment-drop.compact {
    margin-top: 0.3rem;
}
.forum-attachment-drop.dragging {
    background: #f3e7c7;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(201, 161, 74, 0.16);
}
.forum-attachment-icon,
.forum-attachment-folder {
    width: 24px;
    height: 24px;
    color: #687897;
    line-height: 1;
}
.forum-attachment-icon svg,
.forum-attachment-folder svg {
    width: 100%;
    height: 100%;
    display: block;
}
.forum-attachment-drop strong {
    display: block;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.2rem;
    line-height: 1.25;
    color: var(--ink);
}
.forum-attachment-drop button {
    border: 0;
    padding: 0;
    background: transparent;
    color: var(--ink);
    text-decoration: underline;
    font: inherit;
    font-weight: inherit;
    cursor: pointer;
}
.forum-attachment-drop small {
    display: block;
    margin-top: 0.25rem;
    color: #64718c;
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1.35;
}
.forum-attachment-list {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-top: 0.65rem;
}
.forum-attachment-list span {
    display: inline-flex;
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-radius: var(--radius-button);
    background: rgba(255,255,255,0.72);
    border: 1px solid rgba(104, 120, 151, 0.28);
    padding: 0.24rem 0.65rem;
    font-size: 0.8rem;
    color: #4d5a75;
}
.forum-attachment-display {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.75rem;
    margin-top: 1rem;
}
.forum-attachment-display a {
    display: grid;
    gap: 0.4rem;
    align-content: start;
    min-height: 94px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface-elevated);
    padding: 0.6rem;
    color: var(--ink);
    text-decoration: none;
}
.forum-attachment-display a.image {
    padding: 0;
    overflow: hidden;
}
.forum-attachment-display img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}
.forum-attachment-display span {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: var(--ink);
    color: var(--gold);
    font-size: 0.76rem;
    font-weight: 900;
}
.forum-attachment-display small {
    padding: 0 0.6rem 0.6rem;
    overflow-wrap: anywhere;
    color: var(--ink-soft);
}
.forum-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0;
    cursor: pointer;
    color: #4d5a75;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1;
}
.forum-toggle input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.forum-toggle-track {
    width: 58px;
    height: 30px;
    border-radius: 999px;
    background: #b8c4d7;
    border: 2px solid #8d9bb2;
    position: relative;
    transition: background 0.18s, border-color 0.18s;
    flex: 0 0 auto;
}
.forum-toggle-track::after {
    content: "";
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #fff;
    position: absolute;
    top: 1px;
    left: 1px;
    box-shadow: 0 1px 3px rgba(26, 24, 21, 0.2);
    transition: transform 0.18s;
}
.forum-toggle input:checked + .forum-toggle-track {
    background: var(--gold);
    border-color: #b68e39;
}
.forum-toggle input:checked + .forum-toggle-track::after {
    transform: translateX(28px);
}
.forum-toggle input:focus-visible + .forum-toggle-track {
    outline: 2px solid var(--burgundy);
    outline-offset: 3px;
}

@media (max-width: 900px) {
    .forum-page > .container,
    .forum-hero > .container {
        width: min(100% - 1.25rem, 1240px);
    }
    .forum-hero-inner,
    .forum-titlebar {
        align-items: start;
        flex-direction: column;
    }
    .forum-row,
    .topic-row {
        grid-template-columns: 42px minmax(0, 1fr);
    }
    .forum-row-stats,
    .forum-row-latest,
    .topic-counts,
    .topic-latest {
        grid-column: 2;
        justify-items: start;
    }
    .forum-post-card { grid-template-columns: 1fr; }
    .forum-post-author {
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }
}

/* ===== Forum Topic — Modernized ===== */
.topic-hero {
    background:
        radial-gradient(circle at 88% -10%, rgba(201,161,74,0.28), transparent 55%),
        radial-gradient(circle at 0% 110%, rgba(107,44,44,0.55), transparent 60%),
        linear-gradient(135deg, #1a1815 0%, #30251f 58%, #4a2424 100%);
    color: var(--cream);
    padding: 3rem 0 2.5rem;
    position: relative;
    overflow: hidden;
}
.topic-hero::after {
    content: "";
    position: absolute;
    inset: auto 0 -1px 0;
    height: 30px;
    background: linear-gradient(to bottom, transparent, var(--bg));
    pointer-events: none;
}
.topic-hero-inner {
    width: min(1240px, calc(100% - 3rem));
    margin-inline: auto;
    max-width: 1180px;
    display: grid;
    gap: 1rem;
}
.topic-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    letter-spacing: 0.02em;
    color: rgba(244,237,224,0.65);
    text-transform: uppercase;
    font-weight: 700;
}
.topic-breadcrumb a {
    color: var(--gold-soft);
    text-decoration: none;
    transition: color 0.15s;
}
.topic-breadcrumb a:hover { color: var(--cream); }
.topic-breadcrumb span[aria-hidden] { color: rgba(244,237,224,0.35); }
.topic-breadcrumb .muted { color: rgba(244,237,224,0.55); font-weight: 600; }
.topic-hero h1 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(2rem, 4.6vw, 3.4rem);
    line-height: 1.05;
    margin: 0;
    color: var(--cream);
    max-width: 960px;
}
.topic-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-top: 0.25rem;
}
.topic-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(244,237,224,0.08);
    border: 1px solid rgba(244,237,224,0.18);
    color: rgba(244,237,224,0.85);
    border-radius: var(--radius-button);
    padding: 0.34rem 0.8rem;
    font-size: 0.8rem;
    font-weight: 700;
    backdrop-filter: blur(4px);
}
.topic-chip strong {
    color: var(--gold-soft);
    font-weight: 900;
    font-size: 0.95rem;
}
.topic-chip-locked {
    background: rgba(107,44,44,0.45);
    border-color: rgba(201,161,74,0.4);
    color: var(--cream);
}
.topic-chip-pinned {
    background: rgba(201,161,74,0.18);
    border-color: rgba(201,161,74,0.5);
    color: var(--gold-soft);
}
.topic-hero-actions { margin-top: 0.4rem; }

/* Pull post stack up under the hero */
.topic-hero + .forum-page { padding-top: 2rem; }

/* Date gap — modernized as centered separator */
.forum-date-gap {
    margin: 0.75rem 0 0.25rem;
    text-align: center;
    position: relative;
    color: var(--ink-mute);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 800;
}
.forum-date-gap::before,
.forum-date-gap::after {
    content: "";
    position: absolute;
    top: 50%;
    width: calc(50% - 5rem);
    height: 1px;
    background: linear-gradient(to right, transparent, var(--line), transparent);
}
.forum-date-gap::before { left: 0; }
.forum-date-gap::after { right: 0; }
.forum-date-gap span {
    background: var(--bg);
    padding: 0 0.85rem;
}

/* Post card — refined */
.forum-post-card {
    border-radius: 18px;
    transition: box-shadow 0.2s, transform 0.2s;
    scroll-margin-top: 1.5rem;
}
.forum-post-card:hover {
    box-shadow: 0 18px 44px rgba(26, 24, 21, 0.1);
}
.forum-post-card.is-author {
    border-color: rgba(201, 161, 74, 0.45);
    box-shadow: 0 14px 36px rgba(201, 161, 74, 0.1), 0 0 0 1px rgba(201, 161, 74, 0.18) inset;
}
.forum-post-author {
    background: linear-gradient(170deg, var(--surface-elevated), #f4ede0);
    padding: 1.75rem 1.25rem;
}
.forum-post-avatar-wrap {
    position: relative;
    padding: 4px;
    border-radius: 50%;
    background: linear-gradient(140deg, var(--gold), var(--burgundy));
    box-shadow: 0 8px 20px rgba(107, 44, 44, 0.18);
}
.forum-post-card.is-author .forum-post-avatar-wrap {
    background: linear-gradient(140deg, var(--gold), var(--gold-soft));
}
.forum-post-author img {
    width: 88px;
    height: 88px;
    display: block;
    border: 3px solid var(--surface);
}
.forum-post-online-dot {
    position: absolute;
    right: 0.3rem;
    bottom: 0.3rem;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: #22e06f;
    border: 2px solid var(--surface);
    box-shadow: 0 0 0 3px rgba(34, 224, 111, 0.24), 0 4px 10px rgba(0,0,0,0.18);
}
.forum-post-author strong {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.25rem;
    line-height: 1.1;
    color: var(--ink);
    margin-top: 0.4rem;
}
.forum-post-role {
    background: var(--green);
    color: var(--cream);
    border-radius: var(--radius-button);
    padding: 0.18rem 0.7rem;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.forum-post-author small {
    color: var(--ink-mute);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.forum-post-meta {
    padding-bottom: 0.85rem;
    border-bottom: 1px solid var(--line);
    font-size: 0.86rem;
}
.forum-post-meta-left {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
}
.forum-post-date { color: var(--ink-mute); font-weight: 600; }
.forum-post-permalink {
    color: var(--ink-mute);
    text-decoration: none;
    font-weight: 800;
    font-size: 0.82rem;
    padding: 0.2rem 0.55rem;
    border-radius: var(--radius-button);
    border: 1px solid var(--line);
    background: var(--surface-elevated);
    transition: color 0.15s, border-color 0.15s;
}
.forum-post-permalink:hover {
    color: var(--burgundy);
    border-color: rgba(107,44,44,0.35);
}
.forum-post-content {
    color: var(--ink);
    font-size: 1.02rem;
    line-height: 1.7;
}
.forum-post-content blockquote {
    margin: 0 0 1rem;
    padding: 0.9rem 1.1rem;
    background: var(--surface-elevated);
    border-left: 3px solid var(--gold);
    border-radius: 0 12px 12px 0;
    color: var(--ink-soft);
    font-size: 0.96rem;
}
.forum-post-content blockquote strong { color: var(--burgundy); }
.forum-post-actions {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.25rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--line);
    flex-wrap: wrap;
}
.forum-post-actions .forum-quote-btn { margin-left: auto; }
.forum-quote-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: 1px solid var(--line);
    background: var(--surface-elevated);
    color: var(--ink-soft);
    border-radius: var(--radius-button);
    padding: 0.4rem 0.95rem;
    font-size: 0.82rem;
    font-weight: 800;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
    justify-self: end;
}
.forum-quote-btn svg { width: 14px; height: 14px; }
.forum-quote-btn:hover {
    color: var(--burgundy);
    border-color: rgba(107,44,44,0.35);
    background: #fff;
}
.forum-edit-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: 1px solid var(--line);
    background: var(--surface-elevated);
    color: var(--ink-soft);
    border-radius: var(--radius-button);
    padding: 0.4rem 0.95rem;
    font-size: 0.82rem;
    font-weight: 800;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.forum-edit-toggle:hover {
    color: var(--burgundy);
    border-color: rgba(107,44,44,0.35);
    background: #fff;
}

.forum-lock-notice,
.forum-signin-cta {
    padding: 1.5rem 1.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    flex-wrap: wrap;
}
.forum-lock-notice h2,
.forum-signin-cta h2 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.6rem;
    margin: 0;
}
.forum-lock-notice p,
.forum-signin-cta p { color: var(--ink-soft); margin: 0.25rem 0 0; }

@media (max-width: 720px) {
    .topic-hero { padding: 2.25rem 0 2rem; }
    .forum-date-gap::before,
    .forum-date-gap::after { display: none; }
    .forum-post-author { padding: 1.25rem; }
    .forum-post-author img { width: 64px; height: 64px; }
}

/* ===== Forum View — Topic List (Invision-style, Jediism palette) ===== */
.forum-view-page { padding-top: 1.75rem; }
.forum-view-hero {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 1.75rem 1.85rem 1.75rem 2.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    box-shadow: 0 12px 36px rgba(26, 24, 21, 0.07);
    overflow: hidden;
}
.forum-view-hero::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 6px;
    background: linear-gradient(to bottom, var(--gold), var(--green));
}
.forum-view-hero-body { flex: 1; min-width: 0; }
.forum-view-hero h1 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(2rem, 4.2vw, 3rem);
    line-height: 1.05;
    margin: 0 0 0.45rem;
    color: var(--ink);
}
.forum-view-hero p {
    color: var(--ink-soft);
    margin: 0;
    font-size: 1rem;
    max-width: 820px;
}
.forum-view-hero-actions {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    flex-wrap: wrap;
}
.forum-follow-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--surface-elevated);
    border: 1px solid var(--line);
    color: var(--ink);
    border-radius: var(--radius-button);
    padding: 0.6rem 1.1rem;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.forum-follow-btn svg { width: 16px; height: 16px; color: var(--burgundy); }
.forum-follow-btn:hover {
    background: #fff;
    border-color: var(--gold);
    color: var(--burgundy);
}

/* Toolbar — pagination + sort */
.forum-toolbar {
    margin-top: 1.5rem;
    background: var(--surface-elevated);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 0.55rem 0.85rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.forum-toolbar-pages {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.forum-page-num,
.forum-page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 0.6rem;
    border-radius: 8px;
    font-weight: 800;
    font-size: 0.88rem;
    color: var(--ink-soft);
    text-decoration: none;
    background: transparent;
    border: 1px solid transparent;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.forum-page-num:hover,
.forum-page-link:hover {
    background: var(--surface);
    border-color: var(--line);
    color: var(--burgundy);
}
.forum-page-num.is-active {
    background: var(--ink);
    color: var(--gold-soft);
    border-color: var(--ink);
}
.forum-page-link { text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.78rem; }
.forum-page-jump { letter-spacing: 0; font-size: 0.95rem; }
.forum-toolbar-pageof {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-left: 0.5rem;
    color: var(--ink-soft);
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
}
.forum-toolbar-sort {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--ink-soft);
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 800;
    cursor: pointer;
    padding: 0.35rem 0.6rem;
}
.forum-toolbar-sort svg { width: 12px; height: 12px; }
.forum-toolbar-bottom { margin-top: 1rem; }

/* Topic list */
.forum-topic-list-wrap {
    margin-top: 1rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: 0 12px 36px rgba(26, 24, 21, 0.06);
    overflow: hidden;
}
.forum-topic-list { display: grid; }
.forum-topic-row {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) 110px 150px;
    align-items: center;
    gap: 1.35rem;
    padding: 1.35rem 1.5rem;
    border-bottom: 1px solid var(--line);
    position: relative;
    transition: background 0.12s, box-shadow 0.12s;
}
.forum-view-page.is-admin .forum-topic-row {
    grid-template-columns: 56px minmax(0, 1fr) 110px 150px 32px;
}
.forum-topic-row.is-hidden {
    background: repeating-linear-gradient(135deg, rgba(107,44,44,0.05) 0 12px, transparent 12px 24px);
    opacity: 0.85;
}
.forum-topic-row.is-hidden .forum-topic-title { color: var(--ink-mute); font-style: italic; }
.forum-topic-flag-hidden { background: rgba(107,44,44,0.16); color: var(--burgundy); }
.forum-topic-flag-hidden svg { width: 13px; height: 13px; }

/* Admin checkbox */
.forum-topic-checkbox {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    width: 22px;
    height: 22px;
    position: relative;
}
.forum-topic-checkbox input {
    position: absolute;
    opacity: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}
.forum-topic-checkbox span {
    width: 20px;
    height: 20px;
    border: 1.5px solid var(--line);
    border-radius: 5px;
    background: var(--surface);
    display: grid;
    place-items: center;
    color: transparent;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.forum-topic-checkbox span svg { width: 13px; height: 13px; }
.forum-topic-checkbox:hover span { border-color: var(--gold); }
.forum-topic-checkbox input:checked + span {
    background: var(--burgundy);
    border-color: var(--burgundy);
    color: var(--cream);
}
.forum-topic-checkbox input:focus-visible + span {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

/* Floating admin action bar */
.forum-admin-bar[hidden],
.forum-admin-act[hidden] { display: none !important; }
.forum-admin-bar {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 1.25rem;
    z-index: 80;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(255, 255, 255, 0.98);
    color: var(--ink);
    border: 1px solid rgba(201, 161, 74, 0.42);
    border-radius: 999px;
    padding: 0.5rem 0.75rem 0.5rem 1.1rem;
    box-shadow: 0 18px 50px rgba(26, 24, 21, 0.22), 0 0 0 5px rgba(255, 255, 255, 0.58);
    backdrop-filter: blur(10px);
    animation: forumAdminBarIn 0.18s ease-out;
}
@keyframes forumAdminBarIn {
    from { opacity: 0; transform: translate(-50%, 8px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}
.forum-admin-bar-count {
    color: var(--ink-soft);
    font-size: 0.85rem;
    font-weight: 600;
    padding-right: 0.6rem;
    border-right: 1px solid var(--line);
    margin-right: 0.3rem;
    white-space: nowrap;
}
.forum-admin-bar-count strong { color: var(--burgundy); font-weight: 900; }
.forum-admin-act {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: var(--surface-elevated);
    border: 1px solid var(--line);
    color: var(--ink);
    border-radius: 999px;
    padding: 0.45rem 0.8rem;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}
.forum-admin-act svg { width: 16px; height: 16px; }
.forum-admin-act:hover {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--gold-soft);
}
.forum-admin-act.danger {
    color: var(--burgundy);
    border-color: rgba(107, 44, 44, 0.28);
}
.forum-admin-act.danger:hover {
    background: var(--burgundy);
    border-color: var(--burgundy);
    color: #fff;
}
.forum-admin-bar-close {
    background: var(--cream);
    border: 1px solid var(--line);
    color: var(--ink-soft);
    font-size: 1.4rem;
    line-height: 1;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    margin-left: 0.2rem;
    transition: background 0.12s, color 0.12s;
}
.forum-admin-bar-close:hover {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--cream);
}

@media (max-width: 720px) {
    .forum-admin-bar {
        flex-wrap: wrap;
        max-width: calc(100% - 1.5rem);
        justify-content: center;
        border-radius: 18px;
    }
    .forum-admin-act span { display: none; }
}
.forum-topic-row:last-child { border-bottom: 0; }
.forum-topic-row:hover { background: var(--surface-elevated); }
.forum-topic-row.is-unread {
    background:
        linear-gradient(90deg, rgba(201,161,74,0.18), rgba(255,255,255,0.96) 46%),
        var(--surface);
    box-shadow: inset 6px 0 0 var(--gold);
}
.forum-topic-row.is-unread:hover {
    background:
        linear-gradient(90deg, rgba(201,161,74,0.23), rgba(253,250,245,0.98) 50%),
        var(--surface-elevated);
}
.forum-topic-row.is-unread .forum-topic-title {
    color: var(--ink);
    font-weight: 900;
}
.forum-topic-row.is-unread .forum-topic-title::after {
    content: '';
    display: inline-block;
    width: 0.42rem;
    height: 0.42rem;
    margin-left: 0.45rem;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 0 4px rgba(201, 161, 74, 0.17);
    vertical-align: 0.12em;
}
.forum-topic-row.is-pinned {
    background: linear-gradient(to right, rgba(201,161,74,0.07), transparent 40%);
}
.forum-topic-row.is-pinned.is-unread {
    background:
        linear-gradient(90deg, rgba(201,161,74,0.24), rgba(201,161,74,0.08) 42%, rgba(255,255,255,0.98) 74%),
        var(--surface);
}
.forum-topic-avatar-stack {
    position: relative;
    width: 46px;
    min-height: 44px;
}
.forum-topic-row.is-unread .forum-topic-avatar-stack::after {
    content: '';
    position: absolute;
    right: 2px;
    top: 1px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--gold);
    border: 2px solid var(--surface);
    box-shadow: 0 0 0 3px rgba(201, 161, 74, 0.18);
    z-index: 3;
}
.forum-topic-avatar {
    position: absolute;
    left: 0;
    top: 6px;
    display: block;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--green);
    border: 2px solid var(--surface);
    box-shadow: 0 4px 10px rgba(26,24,21,0.1);
}
.forum-topic-avatar.is-last {
    left: 18px;
    top: 22px;
    width: 26px;
    height: 26px;
    z-index: 2;
}
.forum-topic-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.forum-topic-main { min-width: 0; }
.forum-topic-title-line {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.forum-topic-title {
    color: var(--ink);
    text-decoration: none;
    font-weight: 800;
    font-size: 1.08rem;
    line-height: 1.3;
}
.forum-topic-title:hover { color: var(--burgundy); }
.forum-topic-star {
    color: #b5b4b4;
    font-size: 0.9rem;
    line-height: 1;
}
.forum-topic-replychip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: var(--surface-elevated);
    border: 1px solid var(--line);
    color: var(--ink-soft);
    border-radius: 6px;
    padding: 0.12rem 0.5rem;
    font-size: 0.78rem;
    font-weight: 800;
}
.forum-topic-replychip svg { width: 12px; height: 12px; color: var(--ink-mute); }
.forum-topic-flag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
}
.forum-topic-flag-pin { background: rgba(107,44,44,0.12); color: var(--burgundy); }
.forum-topic-flag-pin svg { width: 12px; height: 12px; transform: rotate(35deg); }
.forum-topic-flag-lock { background: rgba(61,90,61,0.14); color: var(--green-deep); }
.forum-topic-flag-lock svg { width: 13px; height: 13px; }
.forum-topic-byline {
    margin-top: 0.2rem;
    color: var(--ink-mute);
    font-size: 0.86rem;
}
.forum-topic-byline span { color: var(--ink-soft); font-weight: 600; }

.forum-topic-stats {
    display: grid;
    gap: 0.15rem;
    text-align: right;
    color: var(--ink-mute);
    font-size: 0.86rem;
    line-height: 1.35;
    white-space: nowrap;
}

.forum-topic-last {
    display: grid;
    gap: 0.1rem;
    color: var(--ink-mute);
    font-size: 0.86rem;
    line-height: 1.35;
    text-align: right;
    min-width: 140px;
}
.forum-topic-last strong { color: var(--burgundy); font-weight: 800; font-size: 0.92rem; }

.forum-topic-unread-pill {
    display: inline-flex;
    align-items: center;
    min-height: 1.55rem;
    padding: 0.2rem 0.58rem;
    border-radius: 999px;
    background: var(--ink);
    color: var(--gold-soft);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: 0 6px 14px rgba(26, 24, 21, 0.12);
}

@media (max-width: 900px) {
    .forum-topic-row,
    .forum-view-page.is-admin .forum-topic-row {
        grid-template-columns: 46px minmax(0, 1fr) 28px;
        row-gap: 0.5rem;
    }
    .forum-topic-checkbox { grid-row: 1; grid-column: 3; }
    .forum-topic-stats,
    .forum-topic-last {
        grid-column: 2;
        text-align: left;
        justify-content: flex-start;
        min-width: 0;
    }
    .forum-topic-stats { display: flex; gap: 0.85rem; }
    .forum-topic-last { display: flex; gap: 0.4rem; align-items: baseline; }
    .forum-view-hero {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ===== Username links + group badges ===== */
.username-link {
    color: var(--username-color, var(--ink));
    text-decoration: none;
    font-weight: inherit;
    transition: opacity 0.12s, text-decoration-color 0.12s;
}
.username-link:hover {
    text-decoration: underline;
    text-decoration-color: var(--username-color, var(--burgundy));
    text-underline-offset: 3px;
}

.group-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    justify-content: inherit;
    align-items: center;
}
.group-badge {
    display: inline-block;
    background: var(--group-color, var(--green));
    color: #fff;
    border-radius: var(--radius-button);
    padding: 0.22rem 0.7rem;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1.25;
    white-space: normal;
    text-align: center;
    max-width: 100%;
    word-break: break-word;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
    text-shadow: 0 1px 1px rgba(0,0,0,0.18);
}
.group-badges-sm .group-badge {
    font-size: 0.66rem;
    padding: 0.16rem 0.55rem;
}

/* Forum post author panel — let role badges grow + wrap so long names like "Administrator" aren't clipped */
.forum-post-author .group-badges {
    flex-direction: column;
    align-items: center;
    width: auto;
    gap: 0.3rem;
    margin: 0.2rem 0 0.1rem;
}
.forum-post-author .group-badge {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.32rem 0.65rem 0.32rem 0.85rem;
    max-width: min(100%, 150px);
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--group-color, var(--green)) 22%, #fff 78%), color-mix(in srgb, var(--group-color, var(--green)) 8%, #fff 92%));
    border: 1px solid color-mix(in srgb, var(--group-color, var(--green)) 45%, transparent);
    color: color-mix(in srgb, var(--group-color, var(--green)) 75%, #1a1815 25%);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    border-radius: 999px;
    text-shadow: none;
    box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 1px 3px rgba(26,24,21,0.04);
    line-height: 1.2;
    word-break: normal;
    overflow-wrap: anywhere;
}
.forum-post-author .group-badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--group-color, var(--green));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--group-color, var(--green)) 25%, transparent);
    flex-shrink: 0;
}
.forum-vow-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    max-width: min(100%, 150px);
    margin: 0.15rem 0 0.1rem;
    padding: 0.34rem 0.7rem;
    border-radius: 999px;
    border: 1px solid #d9c894;
    background: #fff9e8;
    color: #6b5520;
    text-decoration: none;
    font-size: 0.68rem;
    line-height: 1.15;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    box-shadow: 0 1px 0 rgba(255,255,255,0.7) inset, 0 1px 3px rgba(26,24,21,0.04);
}
.forum-vow-badge span {
    display: grid;
    place-items: center;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--gold);
    color: var(--ink);
    font-size: 0.68rem;
    line-height: 1;
}
.forum-vow-badge:hover {
    color: var(--burgundy);
    border-color: var(--gold);
}
.jedi-position-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
}
.jedi-position-badges-profile {
    margin-top: 0.55rem;
}
.jedi-position-badges-forum {
    flex-direction: column;
    margin: 0.2rem 0 0.15rem;
}
.jedi-position-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.32rem;
    max-width: min(100%, 170px);
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    border: 1px solid rgba(107,44,44,0.28);
    background: linear-gradient(135deg, #fff8e7, #f2e4c6);
    color: #6b2c2c;
    font-size: 0.68rem;
    line-height: 1.15;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    text-align: center;
    box-shadow: 0 1px 0 rgba(255,255,255,0.7) inset, 0 1px 4px rgba(26,24,21,0.08);
}
.jedi-position-badge::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 0 2px rgba(201,161,74,0.22);
    flex-shrink: 0;
}
.forum-post-signature {
    display: grid;
    gap: 0.75rem;
    margin-top: 1.1rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--line);
}
.forum-post-signature-position {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.forum-post-signature-position > span {
    color: var(--ink-mute);
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}
.forum-post-signature-text {
    color: var(--ink-soft);
    font-size: 0.93rem;
    line-height: 1.55;
}
.forum-post-signature-text p {
    margin: 0;
}
.forum-post-signature .jedi-position-badges-forum {
    flex-direction: row;
    margin: 0;
}
.forum-post-author-main,
.forum-post-author-side {
    display: contents;
}
.forum-post-author-positions {
    display: none;
}
.forum-post-edited {
    color: var(--ink-mute);
    font-size: 0.78rem;
}
.forum-post-meta-right {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.forum-post-hidden-badge {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background: var(--accent-warning, #f59e0b);
    color: #1a1815;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.forum-post-card.forum-post-hidden {
    opacity: 0.55;
}
.forum-post-card.forum-post-hidden .forum-post-content {
    border-left: 3px solid var(--accent-warning, #f59e0b);
    padding-left: 0.75rem;
}
.forum-post-mod-menu {
    position: relative;
    display: inline-block;
}
.forum-post-mod-toggle {
    background: transparent;
    border: 1px solid transparent;
    color: var(--ink-muted, #6b6b6b);
    padding: 2px 6px;
    border-radius: 6px;
    cursor: pointer;
    line-height: 0;
}
.forum-post-mod-toggle:hover,
.forum-post-mod-toggle[aria-expanded="true"] {
    background: var(--surface-elevated, rgba(0,0,0,0.05));
    color: var(--ink, #1a1815);
}
.forum-post-mod-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 160px;
    background: var(--surface, #fff);
    border: 1px solid var(--line, #e5e5e5);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    z-index: 50;
    padding: 4px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.forum-post-mod-dropdown[hidden] { display: none; }
.forum-post-mod-item {
    background: transparent;
    border: 0;
    text-align: left;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    cursor: pointer;
    font: inherit;
    color: var(--ink, #1a1815);
}
.forum-post-mod-item:hover { background: var(--surface-elevated, rgba(0,0,0,0.05)); }
.forum-post-mod-item.is-danger { color: #b1363b; }
.forum-post-mod-item.is-danger:hover { background: rgba(177, 54, 59, 0.08); }

.forum-post-edit-form {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    margin-top: 1rem;
    padding: 1rem 1rem 1.25rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-elevated);
    isolation: isolate;
}
.forum-post-edit-form[hidden] {
    display: none;
}
.forum-post-edit-form label,
.forum-post-edit-field {
    display: grid;
    gap: 0.35rem;
    color: var(--ink);
    font-weight: 800;
}
.forum-post-edit-label {
    font-weight: 800;
    color: var(--ink);
}
.forum-post-edit-form textarea {
    width: 100%;
    min-height: 150px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0.75rem;
    background: var(--surface);
    color: var(--ink);
    font: inherit;
}
.forum-post-edit-form .rich-editor-wrap {
    margin: 0;
    display: block;
    position: relative;
    z-index: 0;
}
.forum-post-edit-form .rich-editor-wrap.rich-editor-compact .rich-editor-host,
.forum-post-edit-form .rich-editor-wrap.rich-editor-compact .ql-container {
    /* Cap the visible editor height so very long content scrolls inside the editor
       instead of pushing the Cancel / Save Edit buttons off the form. */
    max-height: 60vh;
    overflow-y: auto;
}
.forum-post-edit-form .rich-editor-wrap.rich-editor-compact .ql-toolbar {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}
.forum-post-edit-form .rich-editor-wrap.rich-editor-compact .ql-container {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}
.forum-post-edit-form .form-actions {
    flex: 0 0 auto;
    position: relative;
    z-index: 2;
    margin: 0;
    padding: 0.75rem 0 0;
    border-top: 1px solid var(--line);
    background: var(--surface-elevated);
    align-items: center;
}
/* Older browsers without color-mix fallback */
@supports not (color: color-mix(in srgb, red, blue)) {
    .forum-post-author .group-badge {
        background: rgba(255,255,255,0.85);
        border-color: var(--group-color, var(--green));
        color: var(--group-color, var(--green));
    }
}
.forum-post-author strong { color: var(--ink); font-weight: 800; }
.forum-post-author strong .username-link { color: var(--username-color, var(--ink)); }
.forum-post-role { /* legacy class kept; allow wrapping */
    background: var(--green);
    color: #fff;
    border-radius: var(--radius-button);
    padding: 0.22rem 0.75rem;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1.25;
    white-space: normal;
    text-align: center;
    max-width: 100%;
    word-break: break-word;
}

html { scroll-behavior: smooth; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--bg);
    color: var(--ink);
    line-height: 1.6;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.hp-field {
    position: absolute !important;
    left: -10000px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 1.5rem;
    flex-wrap: wrap;
}

.notification-menu {
    position: relative;
}

.notification-toggle {
    width: 38px;
    height: 38px;
    border: 1px solid var(--line);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-button);
    position: relative;
    color: var(--burgundy);
    background: var(--surface);
    text-decoration: none;
    transition: background 0.18s, color 0.18s, border-color 0.18s, box-shadow 0.18s;
}

.notification-toggle:hover,
.notification-menu:focus-within .notification-toggle,
.notification-menu:hover .notification-toggle {
    background: var(--surface-elevated);
    color: var(--gold);
    border-color: var(--gold);
    box-shadow: 0 1px 6px rgba(184, 137, 63, 0.18);
}

.bell-icon {
    font-size: 0.85rem;
}

.notification-count {
    position: absolute;
    top: -7px;
    right: -7px;
    background: var(--burgundy);
    color: #fff;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    font-size: 0.68rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.notification-count[hidden] {
    display: none;
}

.notification-dropdown {
    position: absolute;
    right: 0;
    top: calc(100% + 12px);
    width: 280px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 9px;
    box-shadow: 0 10px 28px rgba(26, 24, 21, 0.12), 0 2px 6px rgba(26, 24, 21, 0.05);
    display: none;
    z-index: 260;
    padding: 0.25rem 0;
    overflow: visible;
}

.notification-menu:hover .notification-dropdown,
.notification-menu:focus-within .notification-dropdown {
    display: block;
    animation: user-dropdown-in 0.18s ease-out;
}

.notification-dropdown::before {
    content: '';
    position: absolute;
    top: -14px;
    left: 0;
    right: 0;
    height: 14px;
    background: transparent;
}

.notification-dropdown::after {
    content: '';
    position: absolute;
    top: -7px;
    right: 12px;
    width: 14px;
    height: 14px;
    background: var(--surface);
    border-top: 1px solid var(--line);
    border-left: 1px solid var(--line);
    transform: rotate(45deg);
    z-index: -1;
}

.notification-heading,
.notification-empty {
    padding: 0.55rem 0.75rem;
    color: var(--ink);
    background: var(--cream);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--line);
}

.notification-dropdown a,
.notification-list-page a,
.activity-row,
.search-result-row {
    display: flex;
    gap: 0.75rem;
    padding: 0.8rem 1rem;
    border-bottom: 1px solid var(--line);
    color: var(--ink);
}

.notification-dropdown a {
    flex-direction: column;
    gap: 0.16rem;
    margin: 0 0.25rem;
    border-bottom: 0;
    border-left: 2px solid transparent;
    border-radius: 7px;
    font-size: 0.78rem;
    line-height: 1.28;
    text-decoration: none;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.notification-dropdown a:hover {
    background: var(--cream);
    color: var(--burgundy);
}

.notification-dropdown a.unread {
    background: rgba(184, 137, 63, 0.09);
    border-left: 2px solid var(--gold);
}

.notification-dropdown small,
.notification-list-page small,
.activity-row small,
.search-result-row small {
    color: var(--ink-mute);
}

.notification-dropdown small {
    font-size: 0.68rem;
    line-height: 1.25;
}

.notifications-page-header {
    background: linear-gradient(180deg, #f7f1e7 0%, #faf7f2 100%) !important;
    border-bottom: 1px solid rgba(222, 213, 196, 0.85);
    padding: 2rem 0 1.5rem !important;
}

.notifications-page-header .page-title {
    color: var(--ink);
    margin-bottom: 0.4rem;
}

.notifications-eyebrow {
    width: fit-content;
    margin: 0 0 0.65rem;
    padding: 0.28rem 0.62rem;
    border: 1px solid rgba(184, 137, 63, 0.34);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    color: var(--burgundy);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.notifications-summary {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    width: fit-content;
    margin: 0 0 0.35rem;
    padding: 0.45rem 0.8rem 0.45rem 0.5rem;
    border: 1px solid rgba(222, 213, 196, 0.95);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.76);
    box-shadow: 0 8px 20px rgba(26, 24, 21, 0.05);
}

.notifications-summary span {
    display: grid;
    place-items: center;
    min-width: 2rem;
    height: 2rem;
    padding: 0 0.42rem;
    border-radius: 999px;
    background: var(--ink);
    color: var(--gold-soft);
    font-size: 0.88rem;
    font-weight: 900;
    line-height: 1;
}

.notifications-summary strong {
    color: var(--ink-soft);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    line-height: 1;
    text-transform: uppercase;
}

.notifications-page {
    padding-top: 2rem;
}

.notifications-card {
    padding: 0.35rem;
    border: 1px solid rgba(222, 213, 196, 0.92);
    box-shadow: 0 14px 36px rgba(26, 24, 21, 0.07), 0 2px 8px rgba(26, 24, 21, 0.04);
}

.notifications-empty-state {
    padding: 2rem;
    text-align: center;
}

.notifications-empty-state strong {
    display: block;
    color: var(--ink);
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.55rem;
    font-weight: 700;
    margin-bottom: 0.35rem;
}

.search-result-thumb {
    width: 58px;
    height: 42px;
    object-fit: cover;
    border-radius: 10px;
    flex: 0 0 auto;
}

.notification-list-page a,
.activity-row {
    justify-content: space-between;
    align-items: center;
}

.notification-list-page a {
    gap: 1rem;
    margin: 0;
    padding: 0.95rem 1rem;
    border-bottom: 1px solid rgba(222, 213, 196, 0.72);
    border-radius: 8px;
    background: transparent;
    text-decoration: none;
    transition: background 0.15s, color 0.15s, transform 0.15s;
}

.notification-list-page a:last-child {
    border-bottom: 0;
}

.notification-list-page a:hover {
    background: #faf7f2;
    color: var(--burgundy);
    transform: translateX(2px);
}

.notification-list-page strong {
    color: var(--ink);
    font-size: 0.95rem;
    line-height: 1.4;
    font-weight: 700;
}

.notification-list-page small {
    flex: 0 0 auto;
    color: #7b746b;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

@media (max-width: 620px) {
    .notifications-page-header {
        padding: 1.35rem 0 1.1rem !important;
    }

    .notification-list-page a {
        display: grid;
        align-items: start;
        gap: 0.35rem;
        padding: 0.9rem;
        transform: none;
    }

    .notification-list-page a:hover {
        transform: none;
    }

    .notification-list-page small {
        justify-self: start;
    }
}

.search-page-form,
.member-filters {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

.search-page-form input,
.member-filters select {
    border: 1px solid var(--line);
    background: var(--surface);
    border-radius: 4px;
    padding: 0.75rem;
}

.search-page-form input {
    min-width: 280px;
    flex: 1;
}

.member-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}

.member-card {
    background: var(--surface);
    border: 1px solid var(--line);
    padding: 1rem;
    border-radius: 4px;
    display: grid;
    gap: 0.25rem;
    color: var(--ink);
}

.member-card .user-avatar {
    width: 58px;
    height: 58px;
}
.member-avatar-wrap {
    position: relative;
    display: inline-block;
    width: 58px;
    height: 58px;
}
.member-avatar-wrap .online-dot {
    width: 14px;
    height: 14px;
    right: -1px;
    bottom: -1px;
}

.member-stats {
    display: flex;
    gap: 0.5rem;
    color: var(--ink-mute);
    font-size: 0.8rem;
}

.activity-list {
    display: grid;
}

.rich-editor-extra-tools {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.5rem;
}

.gallery-picker-modal {
    position: fixed;
    inset: 0;
    background: rgba(26, 24, 21, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 500;
    padding: 1rem;
}

.gallery-picker-panel {
    background: var(--surface);
    border: 1px solid var(--line);
    width: min(760px, 100%);
    max-height: 82vh;
    overflow: auto;
    padding: 1.25rem;
    position: relative;
}

.gallery-picker-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 34px;
    height: 34px;
    border: 1px solid var(--line);
    background: var(--surface-elevated);
    cursor: pointer;
}

.gallery-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 0.75rem;
    margin-top: 1rem;
}

.gallery-picker-item {
    border: 1px solid var(--line);
    background: var(--surface-elevated);
    padding: 0;
    text-align: left;
    cursor: pointer;
}

.gallery-picker-item img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
}

.gallery-picker-item span {
    display: block;
    padding: 0.5rem;
    font-size: 0.8rem;
    color: var(--ink-soft);
}

.mention-wrap {
    position: relative;
    flex: 1;
}

.mention-wrap textarea {
    width: 100%;
}

.mention-suggestions {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: 0 16px 32px rgba(0,0,0,0.12);
    z-index: 50;
}

.mention-suggestions button {
    width: 100%;
    border: 0;
    background: transparent;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.75rem;
    text-align: left;
    cursor: pointer;
}

.mention-suggestions button:hover {
    background: var(--surface-elevated);
}

.mention-suggestions img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
}

.mention-suggestions small {
    display: block;
    color: var(--ink-mute);
}

.report-form {
    margin-top: 1rem;
}

a { color: var(--burgundy); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--gold); }

/* ===== TOP BAR ===== */
.topbar {
    background: var(--bg-dark);
    color: var(--cream);
    padding: 0.5rem 2rem;
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 500;
}
.topbar span { color: var(--gold-soft); }

.topbar-inner {
    max-width: 1280px;
    min-height: 34px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(180px, 1fr) auto minmax(180px, 1fr);
    align-items: center;
    gap: 1rem;
}

.topbar-tagline {
    text-align: center;
    white-space: nowrap;
}

.topbar-search {
    justify-self: end;
    width: min(260px, 100%);
}

.topbar-search input {
    width: 100%;
    border: 1px solid rgba(244, 237, 224, 0.25);
    border-radius: 4px;
    padding: 0.42rem 0.65rem;
    background: rgba(255, 255, 255, 0.08);
    color: var(--cream);
    font-size: 0.82rem;
    letter-spacing: 0;
    text-transform: none;
}

.topbar-search input::placeholder {
    color: rgba(244, 237, 224, 0.62);
}

.topbar-search input:focus {
    outline: 2px solid var(--gold);
    outline-offset: 1px;
    border-color: transparent;
    background: rgba(255, 255, 255, 0.12);
}

/* ===== HEADER ===== */
header.site-header {
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    padding: 0;
    min-height: 139px;
    box-sizing: border-box;
    overflow: visible;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.95);
}

.header-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 2rem;
    width: 100%;
    height: 87px;
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.logo {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.75rem;
    text-decoration: none;
    height: 87px;
}

.logo img { height: 79px; width: 79px; object-fit: contain; display: block; align-self: center; margin: 0; padding: 0; }

.logo-text {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 2.75rem;
    font-weight: 500;
    color: var(--ink);
    letter-spacing: 0.01em;
    line-height: 1;
    display: flex;
    align-items: center;
}

.nav {
    display: flex;
    gap: clamp(1.5rem, 4vw, 4.75rem);
    justify-content: center;
    align-items: stretch;
    height: 100%;
}
.mobile-nav-panel {
    display: none;
}
.mobile-nav-list {
    display: none;
}

.nav-row {
    width: 100%;
    height: 52px;
    border-top: 1px solid rgba(222, 213, 198, 0.72);
    border-bottom: 1px solid rgba(184, 137, 63, 0.22);
    background: linear-gradient(180deg, #faf7f0 0%, #f3eadb 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.72);
}

.nav-row .nav {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 2rem;
}

.nav-item {
    position: relative;
    display: flex;
    align-items: center;
}

.nav-item > a {
    position: relative;
    color: var(--ink-soft);
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    padding: 0 0.24rem;
    min-height: 100%;
    display: inline-flex;
    align-items: center;
    line-height: 1;
    white-space: nowrap;
    border-radius: 999px;
    transition: color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

@media (hover: hover) and (pointer: fine) and (min-width: 901px) {
    .nav-item > a::before {
        content: "";
        position: absolute;
        left: 0.22rem;
        right: 0.22rem;
        bottom: 0.55rem;
        height: 2px;
        border-radius: 999px;
        background: linear-gradient(90deg, transparent, var(--gold), transparent);
        opacity: 0;
        transform: scaleX(0.45);
        transition: opacity 0.18s ease, transform 0.18s ease;
    }

    .nav-item:hover > a {
        color: var(--burgundy);
    }

    .nav-item:hover > a::before,
    .nav-item.active > a::before {
        opacity: 1;
        transform: scaleX(1);
    }
}

/* ===== SITE ANNOUNCEMENT ===== */
.site-announcement {
    width: 100%;
    border-bottom: 1px solid rgba(222, 213, 198, 0.82);
    background: #15120e;
    color: var(--cream);
    box-shadow: 0 10px 24px rgba(26, 24, 21, 0.08);
}

.site-announcement-inner {
    max-width: 1280px;
    margin: 0 auto;
    min-height: 62px;
    padding: 0.75rem 2rem;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.9rem;
    align-items: center;
}

.site-announcement-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255,255,255,0.14);
    border: 1px solid rgba(255,255,255,0.18);
    color: currentColor;
    flex: 0 0 auto;
}

.site-announcement-icon svg {
    width: 21px;
    height: 21px;
}

.site-announcement-copy {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    min-width: 0;
}

.site-announcement-copy strong + span {
    display: inline-flex;
    align-items: center;
    position: relative;
    min-height: 1.55em;
    padding-left: 1rem;
}

.site-announcement-copy strong + span::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 2px;
    height: 1.35em;
    transform: translateY(-50%);
    border-radius: 999px;
    background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.74), transparent);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.18);
}

.site-announcement-copy strong {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.24rem;
    line-height: 1;
    font-weight: 700;
    white-space: nowrap;
    transform: translateY(-0.01em);
}

.site-announcement-copy span {
    color: rgba(255,255,255,0.82);
    font-size: 0.95rem;
    line-height: 1.2;
}

.site-announcement-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0.45rem 0.9rem;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.32);
    background: rgba(255,255,255,0.14);
    color: inherit;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
}

.site-announcement-link:hover {
    background: rgba(255,255,255,0.22);
    color: inherit;
}

.site-announcement-gold {
    background:
        radial-gradient(circle at 12% 20%, rgba(255,255,255,0.36), transparent 24%),
        linear-gradient(135deg, #2b2114 0%, #9f7428 48%, #d6b45c 100%);
}

.site-announcement-dark {
    background:
        radial-gradient(circle at 15% 20%, rgba(201,161,74,0.22), transparent 24%),
        linear-gradient(135deg, #13110e 0%, #24201a 100%);
}

.site-announcement-green {
    background:
        radial-gradient(circle at 12% 20%, rgba(255,255,255,0.2), transparent 24%),
        linear-gradient(135deg, #182416 0%, #3d5a3d 100%);
}

.site-announcement-burgundy {
    background:
        radial-gradient(circle at 12% 20%, rgba(255,255,255,0.2), transparent 24%),
        linear-gradient(135deg, #251111 0%, #6b2c2c 100%);
}

.nav-item > a:hover, .nav-item.active > a { color: var(--burgundy); }

.nav-item.active > a::after {
    content: none;
}

.nav-item.has-children > a::after {
    content: ' ›';
    color: var(--gold);
    font-weight: 400;
}

/* Dropdown */
.nav-item.has-children { padding-bottom: 0; }

.dropdown {
    position: absolute;
    top: 100%;
    left: -1rem;
    transform: translateY(8px);
    background: var(--surface);
    border: 1px solid var(--line);
    border-top: 2px solid var(--gold);
    min-width: 240px;
    padding: 0.5rem 0;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s;
    box-shadow: 0 8px 24px rgba(26, 24, 21, 0.1);
    z-index: 1000;
}

.nav-item:hover .dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown a {
    display: block;
    padding: 0.65rem 1.25rem;
    font-size: 0.85rem;
    line-height: 1.3;
    color: var(--ink);
    font-weight: 500;
    border-left: 2px solid transparent;
    transition: all 0.2s;
    white-space: nowrap;
    text-transform: none;
    letter-spacing: 0;
}

.dropdown a:hover {
    background: var(--cream);
    border-left-color: var(--gold);
    color: var(--burgundy);
    padding-left: 1.5rem;
}

/* ===== MEGA MENU ===== */
.nav-item .caret {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 0.8rem;
    height: 0.8rem;
    margin-left: 0.22rem;
    color: var(--gold);
    font-size: 0;
    transition: transform 0.2s, color 0.2s;
}

.nav-item .caret::before {
    content: "";
    width: 0.42rem;
    height: 0.42rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
}

.nav-item.has-children > a::after { content: none; }
.nav-item:hover .caret {
    color: var(--burgundy);
    transform: rotate(180deg);
}

.nav-item.has-mega { position: static; }
.mega-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    width: min(var(--mega-width, 780px), calc(100vw - 3rem));
    background: var(--surface);
    border: 1px solid var(--line);
    border-top: 3px solid var(--gold);
    box-shadow: 0 12px 32px rgba(26, 24, 21, 0.12);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
    z-index: 1000;
    padding: 1.45rem 1.5rem;
}

.nav-item.has-mega:hover .mega-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.mega-inner {
    display: grid;
    grid-template-columns: repeat(var(--mega-cols, 3), minmax(0, 1fr));
    justify-content: center;
    gap: 1.15rem 1.1rem;
}

.mega-feature-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin: -0.35rem auto 1.25rem;
    width: min(100%, 520px);
    border: 1px solid rgba(201, 161, 74, 0.35);
    border-radius: 999px;
    background: linear-gradient(135deg, #fffdfa, #fbf3e4);
    color: var(--ink);
    padding: 0.72rem 1.1rem;
    box-shadow: 0 12px 28px rgba(31, 27, 22, 0.06);
    text-transform: none;
    letter-spacing: 0;
}

.mega-feature-link strong {
    color: var(--burgundy);
    font-weight: 900;
}

.mega-feature-link span {
    color: var(--ink-mute);
    font-size: 0.8rem;
    font-weight: 750;
}

.mega-col-title {
    display: block;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--burgundy);
    text-decoration: none;
    padding-bottom: 0.6rem;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid var(--line);
    letter-spacing: 0;
    text-transform: none;
    line-height: 1.2;
    transition: color 0.15s;
}
.mega-col-title:hover { color: var(--gold); }

.mega-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}
.mega-links a {
    display: block;
    padding: 0.4rem 0.5rem 0.4rem 0;
    font-size: 0.88rem;
    color: var(--ink);
    text-decoration: none;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    border-left: 2px solid transparent;
    padding-left: 0.6rem;
    margin-left: -0.6rem;
    transition: all 0.15s;
    line-height: 1.35;
}
.mega-links a:hover {
    background: var(--cream);
    border-left-color: var(--gold);
    color: var(--burgundy);
}

.header-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    height: 100%;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.65rem 1.4rem;
    border: none;
    border-radius: var(--radius-button);
    font-weight: 600;
    cursor: pointer;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    transition: all 0.25s;
    font-family: inherit;
    text-decoration: none;
    text-align: center;
    line-height: 1.2;
}

.btn-primary { background: var(--ink); color: var(--cream); }
.btn-primary:hover { background: var(--burgundy); color: var(--cream); }

.btn-outline { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.btn-outline:hover { background: var(--ink); color: var(--cream); }

.btn-gold { background: var(--gold); color: var(--ink); }
.btn-gold:hover { background: var(--gold-soft); color: var(--ink); }

/* ===== HERO ===== */
.hero {
    background: linear-gradient(135deg, var(--bg-dark) 0%, #2a2520 100%);
    color: var(--cream);
    padding: 6rem 2rem 7rem;
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 60%;
    height: 100%;
    background: radial-gradient(circle at 75% 30%, rgba(201, 161, 74, 0.18), transparent 60%);
    pointer-events: none;
}

.hero-container {
    max-width: 1280px;
    margin: 0 auto;
    position: relative;
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 4rem;
    align-items: center;
}

.hero-eyebrow {
    color: var(--gold);
    font-size: 0.78rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
    font-weight: 600;
}

.hero-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(2.5rem, 5vw, 4.75rem);
    line-height: 1.05;
    font-weight: 500;
    margin-bottom: 1.5rem;
    letter-spacing: -0.015em;
}

.hero-title em {
    font-style: italic;
    color: var(--gold-soft);
    font-weight: 400;
}

.hero-subtitle {
    font-size: 1.05rem;
    color: rgba(244, 237, 224, 0.72);
    max-width: 520px;
    margin-bottom: 2.5rem;
    line-height: 1.75;
}

.hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; }

.hero .btn-primary { background: var(--gold); color: var(--ink); }
.hero .btn-primary:hover { background: var(--gold-soft); }

.hero .btn-outline { color: var(--cream); border-color: rgba(244, 237, 224, 0.3); }
.hero .btn-outline:hover { background: var(--cream); color: var(--ink); border-color: var(--cream); }

.hero-quote-card {
    background: rgba(244, 237, 224, 0.04);
    border: 1px solid rgba(201, 161, 74, 0.2);
    padding: 2.5rem;
    position: relative;
}

.hero-quote-card::before {
    content: none;
}

.hero-quote {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.3rem;
    line-height: 1.55;
    font-style: italic;
    color: var(--cream);
    margin-bottom: 1.25rem;
}

.hero-quote-author {
    font-size: 0.75rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--gold);
    font-weight: 600;
}

/* ===== PAGE HEADER (interior pages) ===== */
.page-header {
    background: linear-gradient(135deg, var(--bg-dark) 0%, #2a2520 100%);
    color: var(--cream);
    padding: 5rem 2rem 4rem;
    position: relative;
    overflow: hidden;
}

.page-header::before {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 50%;
    height: 100%;
    background: radial-gradient(circle at 70% 30%, rgba(201, 161, 74, 0.12), transparent 60%);
    pointer-events: none;
}

.page-header-container {
    max-width: 980px;
    margin: 0 auto;
    position: relative;
}

.page-breadcrumb {
    color: var(--gold);
    font-size: 0.72rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    margin-bottom: 1rem;
    font-weight: 600;
}

.page-breadcrumb a { color: var(--gold); }
.page-breadcrumb a:hover { color: var(--gold-soft); }

.content-back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    width: fit-content;
    margin-bottom: 1rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(255,255,255,0.82);
    color: var(--burgundy);
    padding: 0.45rem 0.85rem;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    text-decoration: none;
    box-shadow: 0 8px 22px rgba(26,24,21,0.05);
}
.content-back-link:hover {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--cream);
}

.page-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(2.25rem, 4vw, 3.75rem);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.01em;
    margin-bottom: 1.25rem;
}

.page-subtitle {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 1.3rem;
    color: rgba(244, 237, 224, 0.72);
    line-height: 1.5;
    max-width: 720px;
}

/* ===== MAIN CONTENT ===== */
main { min-height: 60vh; }

.section {
    padding: 5rem 2rem;
}

.section.alt { background: var(--cream); }

.section-container {
    max-width: 1280px;
    margin: 0 auto;
}

.section-narrow {
    max-width: 780px;
    margin: 0 auto;
}

.section-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 3rem;
    border-bottom: 1px solid var(--line);
    padding-bottom: 2rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.section-eyebrow {
    color: var(--burgundy);
    font-size: 0.72rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
    font-weight: 700;
}

.section-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 2.5rem;
    font-weight: 500;
    color: var(--ink);
    line-height: 1.1;
    letter-spacing: -0.01em;
}

.section-link {
    color: var(--ink);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    border-bottom: 1px solid var(--gold);
    padding-bottom: 4px;
}

.section-link:hover { color: var(--burgundy); }

/* ===== ARTICLE CONTENT ===== */
.page-content-shell {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 2rem;
}

.page-content-shell.has-sidebar {
    display: grid;
    grid-template-columns: minmax(0, 760px) minmax(260px, 330px);
    gap: clamp(2rem, 4vw, 4rem);
    align-items: start;
}

.article {
    max-width: 760px;
    margin: 0 auto;
    padding: 4rem 2rem 5rem;
    font-size: 1.075rem;
    color: var(--ink-soft);
    line-height: 1.85;
}

.page-content-shell.has-sidebar .article {
    max-width: none;
    margin: 0;
    padding-left: 0;
    padding-right: 0;
}

.home-content-sidebar .article,
.home-content-sidebar .page-sidebar {
    padding-top: 0;
    padding-bottom: 0;
}

.article p { margin-bottom: 1.5rem; }

.article p.lead {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.55rem;
    line-height: 1.5;
    color: var(--ink);
    font-weight: 500;
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--line);
}

.article h2, .article h3 {
    font-family: 'Cormorant Garamond', serif;
    color: var(--ink);
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.article h2 { font-size: 2rem; }
.article h3 { font-size: 1.5rem; color: var(--burgundy); }

.article h3::before {
    content: '';
    display: block;
    width: 40px;
    height: 2px;
    background: var(--gold);
    margin-bottom: 0.75rem;
}

.article ul, .article ol {
    margin: 1.5rem 0 1.5rem 1.5rem;
}

.article li {
    margin-bottom: 0.75rem;
    padding-left: 0.5rem;
}

.article ul li::marker { color: var(--gold); content: '✦  '; }

.article strong { color: var(--ink); font-weight: 600; }
.article em { font-style: italic; }

.article blockquote {
    margin: 2rem 0;
    padding: 1.5rem 2rem;
    background: var(--cream);
    border-left: 3px solid var(--gold);
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 1.25rem;
    line-height: 1.5;
    color: var(--ink);
}

.article blockquote p:last-child { margin-bottom: 0; }

.article hr {
    border: none;
    border-top: 1px solid var(--line);
    margin: 3rem 0;
    text-align: center;
}

.article hr::after {
    content: '✦';
    background: var(--bg);
    padding: 0 1rem;
    color: var(--gold);
    position: relative;
    top: -0.7em;
    font-size: 1.1rem;
}

.article a { color: var(--burgundy); border-bottom: 1px solid var(--gold); padding-bottom: 1px; }
.article a:hover { color: var(--gold); }

.page-content-shell.has-section-index {
    display: grid;
    grid-template-columns: minmax(0, 760px) minmax(280px, 360px);
    gap: clamp(2rem, 4vw, 4rem);
    align-items: start;
}

.page-content-shell.has-section-index .article {
    max-width: none;
    margin: 0;
    padding-left: 0;
    padding-right: 0;
}

.section-index-panel {
    position: sticky;
    top: calc(139px + 1rem);
    margin-top: 2.5rem;
    padding: 1.2rem;
    background: rgba(255,255,255,0.78);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 18px 38px rgba(26, 24, 21, 0.06);
}

.section-index-inline .section-index-panel {
    position: static;
    margin: 0 0 2rem;
}

.section-index-kicker {
    display: block;
    color: var(--burgundy);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    margin-bottom: 0.35rem;
}

.section-index-panel h2 {
    margin: 0 0 1rem;
    font-family: 'Cormorant Garamond', serif;
    color: var(--ink);
    font-size: 1.7rem;
    font-weight: 600;
}

.section-index-list {
    display: grid;
    gap: 0.45rem;
}

.section-index-link {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.9rem;
    align-items: center;
    padding: 0.85rem 0;
    color: var(--ink);
    border-top: 1px solid var(--line);
}

.article .section-index-link {
    border-bottom: 0;
    padding-bottom: 0.85rem;
}

.section-index-link:hover {
    color: var(--burgundy);
}

.section-index-link.active {
    color: var(--burgundy);
}

.section-index-link strong {
    display: block;
    color: inherit;
    font-size: 0.96rem;
    font-weight: 650;
    line-height: 1.25;
}

.section-index-link small {
    display: block;
    margin-top: 0.28rem;
    color: var(--ink-soft);
    font-size: 0.78rem;
    line-height: 1.45;
}

.section-index-arrow {
    color: var(--gold);
    font-size: 1.15rem;
    line-height: 1;
}

.page-sidebar {
    position: sticky;
    top: calc(139px + 1rem);
    display: grid;
    gap: 1rem;
    padding: 2.5rem 0 5rem;
}

.page-sidebar-kicker {
    color: var(--burgundy);
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 800;
}

.page-sidebar-card {
    background: rgba(255,255,255,0.72);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 1.15rem;
    box-shadow: 0 16px 36px rgba(26,24,21,0.05);
}

.page-sidebar-card h3 {
    font-family: 'Cormorant Garamond', serif;
    color: var(--ink);
    font-size: 1.25rem;
    line-height: 1.15;
    font-weight: 700;
    margin-bottom: 0.8rem;
}

.page-sidebar-card p {
    color: var(--ink-soft);
    font-size: 0.95rem;
    line-height: 1.65;
    margin-bottom: 1rem;
}

.page-sidebar-callout {
    background: var(--ink);
    border-color: rgba(201, 161, 74, 0.38);
}

.page-sidebar-callout h3,
.page-sidebar-callout p {
    color: var(--cream);
}

.page-sidebar-today {
    overflow: hidden;
    padding: 0;
    border-radius: 18px;
    background:
        radial-gradient(circle at top right, rgba(201, 161, 74, 0.2), transparent 36%),
        var(--surface);
}

.page-sidebar-today-head {
    padding: 1.15rem 1.15rem 0.95rem;
    border-bottom: 1px solid rgba(232, 226, 214, 0.85);
}

.page-sidebar-today-head span,
.page-sidebar-today-type {
    color: var(--burgundy);
    font-size: 0.66rem;
    font-weight: 950;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.page-sidebar-today-head h3 {
    margin: 0.25rem 0 0;
}

.page-sidebar-today-list {
    display: grid;
}

.page-sidebar-today-list a {
    display: grid;
    gap: 0.24rem;
    padding: 0.82rem 1.15rem;
    border-bottom: 1px solid rgba(232, 226, 214, 0.72);
    color: var(--ink);
}

.page-sidebar-today-list a:last-child {
    border-bottom: 0;
}

.page-sidebar-today-list a:hover {
    background: rgba(250, 247, 242, 0.72);
    color: var(--burgundy);
}

.page-sidebar-today-list strong {
    font-size: 0.94rem;
    line-height: 1.28;
}

.page-sidebar-today-list small {
    color: var(--ink-mute);
    font-size: 0.75rem;
    font-weight: 800;
}

.page-sidebar-list {
    display: grid;
    gap: 0.55rem;
}

.page-sidebar-list a {
    display: grid;
    gap: 0.2rem;
    padding: 0.65rem 0;
    color: var(--ink);
    border-bottom: 1px solid var(--line);
}

.page-sidebar-list a:last-child {
    border-bottom: 0;
}

.page-sidebar-list a:hover {
    color: var(--burgundy);
}

.page-sidebar-list small {
    color: var(--ink-mute);
    font-size: 0.78rem;
    line-height: 1.35;
}

.page-sidebar-rich-list {
    display: grid;
    gap: 0.75rem;
}

.page-sidebar-entry {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 0.75rem;
    align-items: center;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--line);
    color: var(--ink);
}

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

.page-sidebar-entry:hover {
    color: var(--burgundy);
}

.page-sidebar-entry img {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid rgba(201, 161, 74, 0.42);
}

.page-sidebar-entry strong {
    display: block;
    font-size: 0.92rem;
    line-height: 1.25;
    font-weight: 700;
}

.page-sidebar-entry small {
    display: block;
    color: var(--ink-mute);
    font-size: 0.76rem;
    line-height: 1.35;
    margin-top: 0.2rem;
}

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

.page-sidebar-photo-grid a {
    display: block;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 6px;
    background: var(--cream);
    border: 1px solid var(--line);
}

.page-sidebar-photo-grid img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.2s ease, filter 0.2s ease;
}

.page-sidebar-photo-grid a:hover img {
    transform: scale(1.06);
    filter: saturate(1.08);
}

.page-sidebar-button {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-button);
    background: var(--gold);
    color: var(--ink);
    padding: 0.65rem 1rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.page-sidebar-button:hover {
    background: var(--cream);
    color: var(--ink);
}

/* ===== HOME-SPECIFIC SECTIONS ===== */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.home-path-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.35rem;
}

.feature {
    position: relative;
    overflow: hidden;
    padding: 1.65rem;
    background:
        radial-gradient(circle at top right, rgba(201, 161, 74, 0.12), transparent 32%),
        var(--surface);
    border: 1px solid rgba(232, 226, 214, 0.92);
    border-radius: 22px;
    box-shadow: 0 14px 34px rgba(26, 24, 21, 0.055);
    transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s;
}

.feature:hover {
    border-color: var(--gold);
    transform: translateY(-2px);
    box-shadow: 0 18px 42px rgba(26, 24, 21, 0.09);
}

.feature-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    min-height: 2.5rem;
    border-radius: 999px;
    background: rgba(201, 161, 74, 0.12);
    border: 1px solid rgba(201, 161, 74, 0.24);
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.45rem;
    color: var(--gold);
    font-weight: 600;
    margin-bottom: 1rem;
}

.feature h3 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.4rem;
    margin-bottom: 0.75rem;
    color: var(--ink);
    font-weight: 600;
}

.feature p {
    font-size: 0.95rem;
    color: var(--ink-soft);
    line-height: 1.6;
}

@media (max-width: 980px) {
    .home-path-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .home-path-grid {
        grid-template-columns: 1fr;
    }
}

/* ===== CTA BANNER ===== */
.cta-banner {
    background: var(--bg-dark);
    color: var(--cream);
    padding: 5rem 2rem;
    text-align: center;
}

.cta-banner h2 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 2.5rem;
    margin-bottom: 1rem;
    font-weight: 500;
}

.cta-banner p {
    color: rgba(244, 237, 224, 0.7);
    margin-bottom: 2rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.cta-banner .btn-primary { background: var(--gold); color: var(--ink); }
.cta-banner .btn-primary:hover { background: var(--gold-soft); }

/* ===== FOOTER ===== */
footer.site-footer {
    background: var(--bg-dark);
    color: var(--cream);
    padding: 4rem 2rem 2rem;
}

.footer-container {
    max-width: 1280px;
    margin: 0 auto;
}

.footer-grid {
    display: grid;
    grid-template-columns: minmax(220px, 1.6fr) repeat(4, minmax(135px, 1fr));
    gap: 2.25rem;
    padding-bottom: 3rem;
    border-bottom: 1px solid rgba(244, 237, 224, 0.1);
}

.footer-brand {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--cream);
}

.footer-tagline {
    color: rgba(244, 237, 224, 0.6);
    font-size: 0.9rem;
    line-height: 1.7;
    max-width: 320px;
}

.footer-col h4 {
    font-size: 0.72rem;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 0.25em;
    margin-bottom: 1.25rem;
    font-weight: 700;
}

.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 0.6rem; }

.footer-col a {
    color: rgba(244, 237, 224, 0.7);
    font-size: 0.9rem;
}

.footer-col a:hover { color: var(--gold); }

.footer-bottom {
    padding-top: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.78rem;
    color: rgba(244, 237, 224, 0.4);
    flex-wrap: wrap;
    gap: 1rem;
}

/* ===== MOBILE NAV TOGGLE ===== */
.mobile-toggle {
    display: none;
    background: none;
    border: 1px solid var(--line);
    width: 40px;
    height: 40px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
}

.mobile-toggle span {
    display: block;
    width: 18px;
    height: 2px;
    background: var(--ink);
    position: relative;
}

.mobile-toggle span::before, .mobile-toggle span::after {
    content: '';
    position: absolute;
    left: 0;
    width: 18px;
    height: 2px;
    background: var(--ink);
}

.mobile-toggle span::before { top: -6px; }
.mobile-toggle span::after { top: 6px; }

/* ===== RESPONSIVE ===== */
@media (max-width: 968px) {
    .hero-container { grid-template-columns: 1fr; gap: 2rem; }
    .page-content-shell.has-sidebar {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .page-content-shell.has-section-index {
        display: flex;
        flex-direction: column-reverse;
        gap: 0;
    }
    .page-content-shell.has-section-index .article {
        padding: 2.5rem 0 2rem;
    }
    .section-index-panel {
        position: static;
        margin: 2.5rem 0 0;
    }
    .page-sidebar {
        position: static;
        padding-top: 0;
    }
    .nav, .header-right .btn { display: none; }
    header.site-header { min-height: 87px; }
    .nav-row {
        height: 0;
        border: 0;
        background: transparent;
    }
    .mobile-toggle { display: flex; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .section-head { flex-direction: column; align-items: flex-start; }
    .header-container { grid-template-columns: auto 1fr auto; }
    .topbar-inner {
        grid-template-columns: 1fr auto;
    }
    .topbar-spacer {
        display: none;
    }
    .topbar-tagline {
        text-align: left;
    }
    .topbar-search {
        width: 210px;
    }

    .nav-row .nav.open {
        display: flex !important;
        position: fixed;
        top: 87px;
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--surface);
        flex-direction: column;
        padding: 2rem;
        gap: 0;
        z-index: 99;
        overflow-y: auto;
    }
    .nav.open .nav-item { width: 100%; border-bottom: 1px solid var(--line); }
    .nav.open .nav-item > a { padding: 1rem 0; display: block; font-size: 0.95rem; }
    .nav.open .dropdown {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: none;
        background: var(--cream);
        padding: 0;
    }
    .nav.open .dropdown a { padding: 0.7rem 1.5rem; }

    .nav.open .mega-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: none;
        background: var(--cream);
        padding: 0.75rem 1rem 1rem;
        width: 100%;
    }
    .nav.open .mega-inner {
        display: block;
    }
    .nav.open .mega-col { margin-bottom: 1rem; }
    .nav.open .mega-col-title {
        font-size: 1rem;
        padding: 0.6rem 0;
        margin-bottom: 0.25rem;
        border-bottom: 1px solid var(--line);
    }
    .nav.open .mega-links a { padding: 0.55rem 0 0.55rem 0.75rem; }
}

@media (max-width: 600px) {
    .topbar {
        padding: 0.45rem 1rem;
    }
    .topbar-inner {
        grid-template-columns: 1fr;
        gap: 0.45rem;
    }
    .topbar-tagline {
        text-align: center;
        font-size: 0.68rem;
        white-space: normal;
    }
    .topbar-search {
        width: 100%;
    }
    .hero { padding: 3.5rem 1.5rem 4rem; }
    .page-header { padding: 3rem 1.5rem; }
    .section { padding: 3rem 1.5rem; }
    .article { padding: 2.5rem 1.5rem 3rem; }
    .page-content-shell { padding: 0 1.5rem; }
    .page-content-shell.has-sidebar .article { padding: 2.5rem 0 2rem; }
    .page-sidebar { padding-bottom: 3rem; }
    .footer-grid { grid-template-columns: 1fr; }
    .logo-text { font-size: 1.15rem; }
    .logo-text small { display: none; }
}

/* ===== USER MENU ===== */
.user-menu { position: relative; }
.user-toggle {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    border-radius: 50%;
}
.user-avatar {
    width: 40px; height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--gold);
    display: block;
}
.user-dropdown {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    background: var(--surface);
    border: 1px solid var(--line);
    border-top: 2px solid var(--gold);
    min-width: 200px;
    padding: 0.5rem 0;
    box-shadow: 0 8px 24px rgba(26, 24, 21, 0.1);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: all 0.2s;
    z-index: 1000;
}
.user-menu:hover .user-dropdown,
.user-menu:focus-within .user-dropdown {
    opacity: 1; visibility: visible; transform: translateY(0);
}
.user-dropdown a {
    display: block;
    padding: 0.7rem 1.1rem;
    color: var(--ink);
    text-decoration: none;
    font-size: 0.88rem;
    border-left: 2px solid transparent;
    transition: all 0.15s;
}
.user-dropdown a strong { display: block; font-size: 0.95rem; }
.user-dropdown a small { color: var(--muted, #888); font-size: 0.78rem; }
.user-dropdown a:hover { background: var(--cream); border-left-color: var(--gold); color: var(--burgundy); }

/* ===== AUTH PAGES ===== */
.auth-section {
    max-width: 1100px;
    margin: 0 auto;
    padding: 4rem 1.5rem 6rem;
    display: flex;
    justify-content: center;
}
.auth-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-top: 3px solid var(--gold);
    padding: 2.5rem 2.5rem 2rem;
    max-width: 480px;
    width: 100%;
    box-shadow: 0 8px 24px rgba(26, 24, 21, 0.06);
}
.auth-card.wide { max-width: 720px; }
.auth-card h1 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 2rem;
    margin: 0 0 0.5rem;
    color: var(--ink);
}
.auth-sub { color: #666; margin: 0 0 1.5rem; }
.auth-error {
    background: #f8e9e9;
    border-left: 3px solid var(--burgundy);
    padding: 0.7rem 1rem;
    margin-bottom: 1rem;
    color: var(--burgundy);
    font-size: 0.88rem;
}
.auth-notice {
    background: #edf5ed;
    border-left: 3px solid var(--green);
    padding: 0.7rem 1rem;
    margin-bottom: 1rem;
    color: var(--green);
    font-size: 0.88rem;
}
.auth-form label {
    display: block;
    margin-bottom: 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.auth-form input[type=text],
.auth-form input[type=email],
.auth-form input[type=password],
.auth-form input[type=url],
.auth-form textarea {
    display: block;
    width: 100%;
    margin-top: 0.35rem;
    padding: 0.65rem 0.8rem;
    border: 1px solid var(--line);
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--ink);
    background: #fff;
    border-radius: 2px;
}
.auth-form input:focus, .auth-form textarea:focus { outline: none; border-color: var(--gold); }
.auth-form small {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.75rem;
    color: #888;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}
.auth-form .btn { margin-top: 0.5rem; width: 100%; }
.auth-alt { margin-top: 1.25rem; text-align: center; font-size: 0.9rem; color: #666; }
.auth-alt a { color: var(--burgundy); text-decoration: none; font-weight: 600; }
.auth-alt a:hover { color: var(--gold); }

.auth-form .policy-consent {
    display: grid;
    grid-template-columns: 18px 1fr;
    gap: 0.65rem;
    align-items: start;
    padding: 0.85rem;
    border: 1px solid var(--line);
    background: rgba(213, 169, 78, 0.08);
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.55;
}

.auth-form .policy-consent input {
    width: 18px;
    height: 18px;
    margin-top: 0.15rem;
}

.auth-form .policy-consent a {
    color: var(--burgundy);
    font-weight: 700;
}

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.pw-fieldset { border: 1px dashed var(--line); padding: 1rem 1.25rem 0.25rem; margin: 1rem 0; }
.pw-fieldset legend { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em; color: #666; padding: 0 0.5rem; }
.form-actions { display: flex; gap: 0.75rem; margin-top: 1rem; }
.form-actions .btn { width: auto; margin-top: 0; }
.checkbox { display: flex; gap: 0.5rem; align-items: center; margin-top: 0.5rem; text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 0.85rem; }

.avatar-edit {
    display: flex;
    gap: 1.25rem;
    align-items: center;
    background: var(--cream);
    padding: 1rem;
    margin-bottom: 1rem;
    border-radius: 2px;
}
.avatar-preview {
    width: 90px; height: 90px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--gold);
    flex-shrink: 0;
}

/* ===== PROFILE PAGE ===== */
.profile-page {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 1.5rem 4rem;
}

.profile-cover {
    height: 280px;
    margin: 1.5rem 0 0;
    background: linear-gradient(135deg, #2d2a25 0%, #4a3f30 50%, #6b2c2c 100%);
    background-size: cover;
    background-position: center;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    position: relative;
}
.profile-cover-edit {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.78rem 1rem;
    border-radius: 14px;
    background: rgba(26, 33, 27, 0.82);
    color: #fff;
    text-decoration: none;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 10px 24px rgba(0,0,0,0.22);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: transform 0.18s, background 0.18s;
}
.profile-cover-edit:hover {
    background: rgba(20, 28, 22, 0.9);
    transform: translateY(-1px);
}
.profile-cover-edit svg { flex-shrink: 0; }
.profile-cover-edit-caret { opacity: 0.78; }

.profile-id-bar {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 6px;
    margin-top: -50px;
    position: relative;
    z-index: 2;
    box-shadow: 0 4px 14px rgba(26,24,21,0.06);
}
.profile-id-inner {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    gap: 1.5rem;
    align-items: center;
    padding: 1rem 1.5rem 1rem 1.5rem;
}
.profile-avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid var(--surface);
    background: var(--surface);
    box-shadow: 0 4px 14px rgba(26,24,21,0.18);
    margin-top: -45px;
}
.profile-id-name h1 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.9rem;
    margin: 0;
    color: var(--ink);
    line-height: 1.1;
}
.profile-role {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--burgundy);
    margin-top: 0.25rem;
}
.profile-id-groups { margin-top: 0.4rem; }
.profile-id-name .profile-id-groups {
    justify-content: flex-start;
}
.profile-id-meta {
    display: flex;
    gap: 1.6rem;
    align-items: center;
    border-left: 1px solid var(--line);
    padding-left: 2rem;
}
.profile-id-meta .meta-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #555;
}
.profile-id-meta .meta-value {
    font-size: 0.92rem;
    color: var(--ink);
    margin-top: 0.15rem;
}

/* badge pill (used in profile + admin) */
.badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: var(--badge-color, var(--gold));
    color: #fff;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    border-radius: 2px;
}
.profile-badges { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* below-bar layout */
.profile-layout {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 1.5rem;
    margin-top: 1.5rem;
    align-items: start;
}
.profile-side-cards { display: flex; flex-direction: column; gap: 1.25rem; }
.profile-main-col   { display: flex; flex-direction: column; gap: 1.25rem; }

.profile-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 1.4rem 1.5rem;
    box-shadow: 0 2px 6px rgba(26,24,21,0.04);
}
.profile-card h4 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.25rem;
    color: var(--ink);
    margin: 0 0 0.85rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--line);
    font-weight: 600;
}
.profile-card .muted { color: #888; font-style: italic; }
.profile-card p { margin: 0 0 0.75rem; line-height: 1.6; }

.card-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid #f0ebde;
    font-size: 0.92rem;
}
.card-row:last-child { border-bottom: none; }
.card-row .card-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #888;
}
.card-row a { color: var(--burgundy); text-decoration: none; word-break: break-word; }
.card-row a:hover { color: var(--gold); }

.profile-activity-placeholder { min-height: 200px; }

@media (max-width: 900px) {
    .profile-layout { grid-template-columns: 1fr; }
    .profile-id-inner {
        grid-template-columns: auto 1fr;
        grid-auto-rows: auto;
    }
    .profile-id-meta {
        grid-column: 1 / -1;
        border-left: none;
        padding-left: 0;
        border-top: 1px solid var(--line);
        padding-top: 1rem;
        flex-wrap: wrap;
    }
.profile-id-actions { grid-column: 1 / -1; }
    .profile-cover { height: 200px; }
    .profile-avatar { width: 100px; height: 100px; margin-top: -40px; }
}
@media (max-width: 700px) {
    .profile-cover-edit {
        top: 0.85rem;
        right: 0.85rem;
        padding: 0.68rem 0.82rem;
        font-size: 1.05rem;
        border-radius: 12px;
    }
    .form-row { grid-template-columns: 1fr; }
    .avatar-edit { flex-direction: column; text-align: center; }
    .profile-id-meta { gap: 1.5rem; }
    .profile-edit-heading {
        align-items: flex-start;
        flex-direction: column;
    }
    .profile-edit-grid { grid-template-columns: 1fr; }
    .profile-edit-side { position: static; }
    .cover-edit-tools { grid-template-columns: 1fr; }
    .profile-edit-actions {
        position: static;
        flex-direction: column-reverse;
    }
    .profile-edit-actions .btn { width: 100%; }
}

/* cover image edit area */
.cover-edit {
    height: 200px;
    background: linear-gradient(135deg, #2d2a25 0%, #6b2c2c 100%);
    background-size: cover;
    background-position: center;
    border-radius: 6px;
    margin-bottom: 1rem;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--line);
}
.cover-edit-controls {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    background: rgba(26,24,21,0.65);
    color: #fff;
    padding: 0.7rem 1rem;
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
}
.cover-edit-controls .btn { margin: 0; cursor: pointer; }
.cover-edit-controls small { color: rgba(255,255,255,0.75); font-size: 0.75rem; text-transform: none; letter-spacing: 0; font-weight: 400; }
.cover-edit-controls .checkbox { color: #fff; }

/* Modern profile edit */
.profile-edit-page {
    padding: 3rem 1.5rem 5rem;
}
.profile-edit-shell {
    max-width: 1180px;
    margin: 0 auto;
}
.profile-edit-heading {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-end;
    margin-bottom: 1.5rem;
}
.profile-edit-heading h1 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(2.1rem, 4vw, 3.4rem);
    line-height: 1;
    margin: 0.15rem 0 0.35rem;
    color: var(--ink);
}
.profile-edit-heading p {
    color: var(--ink-soft);
    margin: 0;
}
.profile-edit-grid {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
}
.profile-edit-side {
    position: sticky;
    top: 112px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.profile-edit-avatar-card,
.profile-edit-panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(26,24,21,0.06);
}
.profile-edit-avatar-card {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.75rem;
}
.profile-edit-avatar-card .avatar-preview {
    width: 112px;
    height: 112px;
    border-width: 3px;
}
.profile-edit-avatar-card small,
.profile-edit-panel-head p,
.cover-edit-tools small {
    color: var(--ink-mute);
    font-size: 0.85rem;
    line-height: 1.45;
}
.profile-edit-main {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.profile-edit-panel {
    padding: 1.35rem;
}
.profile-edit-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}
.profile-edit-panel-head h2 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.55rem;
    line-height: 1.1;
    margin: 0;
    color: var(--ink);
}
.profile-edit-panel-head p { margin: 0.25rem 0 0; }
.cover-edit-preview {
    min-height: 260px;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: linear-gradient(135deg, #2d2a25 0%, #6b2c2c 100%);
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.78);
    overflow: hidden;
}
.cover-edit-tools {
    display: grid;
    grid-template-columns: auto auto minmax(220px, 1fr);
    gap: 0.9rem;
    align-items: center;
    margin-top: 1rem;
}
.cover-position-control {
    display: grid;
    gap: 0.4rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-soft);
}
.cover-position-control input[type="range"] {
    width: 100%;
    accent-color: var(--gold);
}
.profile-edit-form label {
    display: block;
    margin: 0 0 1rem;
    font-weight: 700;
    font-size: 0.78rem;
    color: var(--ink-soft);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.profile-edit-form label.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    color: inherit;
}
.profile-edit-form input[type="text"],
.profile-edit-form input[type="email"],
.profile-edit-form input[type="url"],
.profile-edit-form input[type="password"],
.profile-edit-form input[type="number"],
.profile-edit-form input[type="date"],
.profile-edit-form input[type="color"],
.profile-edit-form select,
.profile-edit-form textarea {
    width: 100%;
    margin-top: 0.38rem;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface-elevated);
    padding: 0.75rem 0.9rem;
    color: var(--ink);
    font: inherit;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}
.profile-edit-form textarea {
    resize: vertical;
    line-height: 1.55;
}
.profile-edit-form input:focus,
.profile-edit-form select:focus,
.profile-edit-form textarea:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(201,161,74,0.16);
    background: #fff;
}
.profile-edit-form .checkbox {
    margin: 0;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ink-soft);
}
.profile-edit-form .checkbox input { width: auto; margin: 0; }
.profile-edit-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding-top: 0.5rem;
}
.security-pill {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.3rem 0.7rem;
    background: var(--surface-elevated);
    color: var(--ink-mute);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.security-pill.enabled {
    background: rgba(80, 130, 83, 0.12);
    color: #356d3a;
}
.two-factor-setup {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface-elevated);
    margin-bottom: 1rem;
}
.two-factor-qr-card {
    display: grid;
    justify-items: center;
    gap: 0.55rem;
    padding: 0.75rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
}
.two-factor-qr {
    width: 156px;
    height: 156px;
    display: grid;
    place-items: center;
}
.two-factor-qr img,
.two-factor-qr canvas {
    width: 156px;
    height: 156px;
}
.two-factor-qr-card span {
    color: var(--ink-mute);
    font-size: 0.78rem;
    text-align: center;
    line-height: 1.35;
}
.two-factor-setup code {
    display: block;
    margin: 0.4rem 0;
    color: var(--burgundy);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    white-space: normal;
}
.two-factor-setup small {
    display: block;
    color: var(--ink-mute);
    line-height: 1.5;
}
.two-factor-form {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) max-content;
    gap: 1rem;
    align-items: center;
}
.two-factor-form label {
    margin: 0;
}
.two-factor-form input {
    margin-top: 0.45rem;
}
.two-factor-form .btn {
    align-self: end;
    min-height: 54px;
    min-width: 190px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
@media (max-width: 760px) {
    .two-factor-setup,
    .two-factor-form {
        grid-template-columns: 1fr;
    }
    .two-factor-setup .btn,
    .two-factor-form .btn {
        width: 100%;
    }
}

.user-dropdown a.admin-link {
    color: var(--burgundy);
    font-weight: 600;
    border-top: 1px solid var(--line);
    margin-top: 0.35rem;
    padding-top: 0.7rem;
}

/* custom profile field list in main column */
.profile-fields {
    margin: 1.5rem 0 0;
    border-top: 1px solid var(--line);
    padding-top: 1.25rem;
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: 1.25rem;
    row-gap: 0.5rem;
}
.profile-fields dt {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #888;
    align-self: center;
}
.profile-fields dd {
    margin: 0;
    color: var(--ink);
}
.profile-fields dd a { color: var(--burgundy); }
.profile-fields dd a:hover { color: var(--gold); }

/* select in member forms */
.auth-form select {
    display: block;
    width: 100%;
    margin-top: 0.35rem;
    padding: 0.65rem 0.8rem;
    border: 1px solid var(--line);
    background: #fff;
    font-family: inherit;
    font-size: 0.95rem;
    color: var(--ink);
    text-transform: none;
    letter-spacing: 0;
    border-radius: 2px;
}
.auth-form select:focus { outline: none; border-color: var(--gold); }

/* radio + checkbox custom-field rendering on edit form */
.pf-options { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.4rem; }
.pf-opt {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 0.55rem;
    margin: 0 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-weight: 500 !important;
    font-size: 0.9rem !important;
    cursor: pointer;
}
.pf-opt input[type=radio],
.pf-opt input[type=checkbox] { width: auto; margin: 0; accent-color: var(--gold); }
.pf-swatch {
    display: inline-block;
    width: 0.9em; height: 0.9em;
    border: 1px solid var(--line);
    border-radius: 2px;
    vertical-align: middle;
    margin-right: 0.25rem;
}


/* ============================================================
   GALLERY FEATURE — modern redesign
   ============================================================ */

/* Profile sub-bar (under cover ID bar) */
.profile-subbar {
    background: white;
    border-bottom: 1px solid var(--line, #e8e2d6);
    box-shadow: 0 1px 0 rgba(0,0,0,0.02);
}
.profile-subbar-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
    align-items: center;
}
.profile-subbar-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.95rem 1rem;
    text-decoration: none;
    color: var(--ink, #1a1815);
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    transition: color 0.18s;
}
.profile-subbar-link::after {
    content: '';
    position: absolute;
    left: 1rem; right: 1rem; bottom: 0;
    height: 2px;
    background: var(--gold, #b8893f);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s ease;
}
.profile-subbar-link:hover { color: var(--burgundy, #6b2c2c); }
.profile-subbar-link:hover::after { transform: scaleX(1); }
.profile-subbar-link .count {
    display: inline-block;
    background: var(--gold, #b8893f);
    color: white;
    font-size: 0.7rem;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    margin-left: 0.3rem;
    letter-spacing: 0;
}

/* Profile photo strip */
.profile-photo-strip-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.85rem;
}
.profile-photo-strip-header h4 { margin: 0; }
.profile-photo-strip-link {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--burgundy, #6b2c2c);
    text-decoration: none;
    font-weight: 600;
}
.profile-photo-strip-link:hover { text-decoration: underline; }
.profile-photo-strip {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.5rem;
}
.profile-photo-strip-item {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 6px;
    background: #eee;
    display: block;
    position: relative;
}
.profile-photo-strip-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.profile-photo-strip-item:hover img { transform: scale(1.08); }
@media (max-width: 720px) {
    .profile-photo-strip { grid-template-columns: repeat(3, 1fr); }
}

/* ===== Gallery pages — page wrapper ===== */
.gallery-page {
    padding: 2.5rem 0 5rem;
    background: linear-gradient(180deg, #faf7f2 0%, #f4ede0 100%);
    min-height: 60vh;
}
.gallery-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* Toolbar */
.gallery-toolbar {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}
.gallery-toolbar .muted { color: #666; font-size: 0.88rem; margin-left: auto; }

/* Cards (forms / containers) */
.gallery-card {
    background: white;
    border-radius: 10px;
    padding: 2rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 12px rgba(0,0,0,0.04), 0 1px 3px rgba(0,0,0,0.04);
}
.gallery-card h2 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.7rem;
    margin: 0 0 1.25rem;
    color: var(--ink, #1a1815);
    letter-spacing: -0.01em;
}
.gallery-card-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}
.gallery-card-header h2 { margin: 0; }
.gallery-card-header .pill {
    background: var(--cream, #f4ede0);
    color: #6b2c2c;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    letter-spacing: 0.05em;
}

/* ===== Tile grid (galleries) — modern design ===== */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.5rem;
}

.gallery-tile {
    display: block;
    background: white;
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    transition: transform 0.3s cubic-bezier(.2,.7,.3,1), box-shadow 0.3s;
    position: relative;
}
.gallery-tile:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(0,0,0,0.12), 0 4px 10px rgba(0,0,0,0.06);
}
.gallery-tile-cover {
    aspect-ratio: 4 / 3;
    background: #ece6d8;
    overflow: hidden;
    position: relative;
}
.gallery-tile-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(.2,.7,.3,1);
}
.gallery-tile:hover .gallery-tile-cover img { transform: scale(1.06); }

.gallery-tile-cover::before {
    /* subtle gradient overlay at bottom of cover */
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 50%;
    background: linear-gradient(transparent, rgba(0,0,0,0.35));
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}
.gallery-tile:hover .gallery-tile-cover::before { opacity: 1; }

.gallery-tile-badge {
    position: absolute;
    top: 12px; right: 12px;
    background: rgba(0,0,0,0.65);
    color: white;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 2;
}
.gallery-tile-empty {
    width: 100%; height: 100%;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    color: #999; font-size: 0.85rem;
    background: repeating-linear-gradient(45deg, #f7f3ec, #f7f3ec 10px, #f1ebe0 10px, #f1ebe0 20px);
    text-align: center;
    gap: 0.4rem;
}
.gallery-tile-empty::before {
    content: '🖼';
    font-size: 1.7rem;
    opacity: 0.5;
}

.gallery-tile-meta { padding: 1rem 1.15rem 1.15rem; }
.gallery-tile-meta h3 {
    margin: 0 0 0.35rem;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--ink, #1a1815);
    line-height: 1.2;
}
.gallery-tile-meta small {
    color: #888;
    font-size: 0.8rem;
    display: block;
    letter-spacing: 0.02em;
}
.gallery-tile-meta p {
    margin: 0.5rem 0 0;
    font-size: 0.88rem;
    color: #555;
    line-height: 1.5;
}

/* ===== Photo grid (within a gallery) ===== */
.gallery-grid-photos {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.85rem;
}
.gallery-photo-tile {
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 6px;
    background: #ece6d8;
    position: relative;
    text-decoration: none;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    transition: box-shadow 0.25s;
}
.gallery-photo-tile:hover { box-shadow: 0 8px 22px rgba(0,0,0,0.15); }
.gallery-photo-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(.2,.7,.3,1);
    display: block;
}
.gallery-photo-tile:hover img { transform: scale(1.06); }
.gallery-photo-tile-meta {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    background: linear-gradient(transparent, rgba(0,0,0,0.85));
    color: white;
    padding: 2rem 0.85rem 0.7rem;
    pointer-events: none;
    transform: translateY(20%);
    opacity: 0;
    transition: transform 0.3s, opacity 0.3s;
}
.gallery-photo-tile:hover .gallery-photo-tile-meta {
    transform: translateY(0);
    opacity: 1;
}
.gallery-photo-tile-meta strong { display: block; font-size: 0.85rem; }
.gallery-photo-tile-meta small { font-size: 0.75rem; opacity: 0.9; }

/* ===== Contributors grid (community page) ===== */
.gallery-grid-contributors {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0.85rem;
}
.gallery-contributor {
    display: flex;
    align-items: center;
    gap: 0.95rem;
    padding: 1rem;
    background: white;
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    transition: transform 0.25s, box-shadow 0.25s;
}
.gallery-contributor:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(0,0,0,0.1);
}
.gallery-contributor .user-avatar {
    width: 52px; height: 52px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.gallery-contributor strong { display: block; font-size: 0.98rem; margin-bottom: 0.15rem; }
.gallery-contributor small { color: #888; font-size: 0.8rem; }

/* ===== Empty states ===== */
.gallery-empty {
    text-align: center;
    padding: 3.5rem 2rem;
    color: #999;
    background: white;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.gallery-empty-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.4;
}
.gallery-empty p { margin: 0.5rem 0 1.25rem; }

/* ===== DROP ZONE (drag & drop uploader) ===== */
.upload-dropzone {
    display: block;            /* labels are inline by default — must override or border fragments */
    box-sizing: border-box;
    width: 100%;
    position: relative;
    border: 2px dashed #d4cab5;
    border-radius: 10px;
    background: #fafaf6;
    padding: 3rem 2rem;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.25s, background 0.25s, transform 0.25s;
}
.upload-dropzone:hover {
    border-color: var(--gold, #b8893f);
    background: #fffaf0;
}
.upload-dropzone.dragging {
    border-color: var(--gold, #b8893f);
    background: #fff5e0;
    transform: scale(1.01);
}
.upload-dropzone input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    opacity: 0;
    cursor: pointer;
}
.upload-dropzone-icon {
    font-size: 2.5rem;
    color: var(--gold, #b8893f);
    margin-bottom: 0.75rem;
    line-height: 1;
}
.upload-dropzone-icon svg {
    width: 48px; height: 48px;
    stroke: var(--gold, #b8893f);
    stroke-width: 1.5;
    fill: none;
}
.upload-dropzone-title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--ink, #1a1815);
    margin: 0 0 0.4rem;
}
.upload-dropzone-subtitle {
    color: #888;
    font-size: 0.9rem;
    margin: 0 0 1.25rem;
}
.upload-dropzone-cta {
    display: inline-block;
    background: var(--gold, #b8893f);
    color: white;
    padding: 0.7rem 1.5rem;
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    pointer-events: none; /* the parent label catches the click */
}

/* Upload queue (file list with progress) */
.upload-queue {
    margin-top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.upload-item {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    gap: 1rem;
    align-items: center;
    padding: 0.85rem;
    background: #faf7f2;
    border: 1px solid var(--line, #e8e2d6);
    border-radius: 8px;
    transition: background 0.25s, border-color 0.25s;
}
.upload-item.success {
    background: #f0f9f0;
    border-color: #b8d4b8;
}
.upload-item.error {
    background: #fdf2f2;
    border-color: #e8b4b4;
}
.upload-item-thumb {
    width: 64px; height: 64px;
    border-radius: 4px;
    overflow: hidden;
    background: #ddd;
    flex-shrink: 0;
}
.upload-item-thumb img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
}
.upload-item-body { min-width: 0; }
.upload-item-name {
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--ink, #1a1815);
    margin: 0 0 0.4rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.upload-item-status {
    font-size: 0.75rem;
    color: #888;
    margin-top: 0.3rem;
}
.upload-item.success .upload-item-status { color: #2a4129; }
.upload-item.error .upload-item-status { color: #6b2c2c; }

.upload-progress {
    height: 6px;
    background: #e8e2d6;
    border-radius: 999px;
    overflow: hidden;
    position: relative;
}
.upload-progress-bar {
    position: absolute;
    inset: 0 100% 0 0;
    background: linear-gradient(90deg, var(--gold, #b8893f), #e0a96d);
    border-radius: 999px;
    transition: right 0.2s ease-out;
}
.upload-item.success .upload-progress-bar {
    background: linear-gradient(90deg, #4a7c4a, #6db66d);
    inset: 0 0 0 0 !important;
}
.upload-item.error .upload-progress-bar {
    background: linear-gradient(90deg, #6b2c2c, #a54545);
}

.upload-item-action {
    background: none;
    border: none;
    color: #999;
    font-size: 1.1rem;
    cursor: pointer;
    padding: 0.3rem 0.5rem;
    border-radius: 4px;
    transition: background 0.2s, color 0.2s;
}
.upload-item-action:hover {
    background: rgba(107, 44, 44, 0.1);
    color: var(--burgundy, #6b2c2c);
}

.upload-summary {
    margin-top: 1rem;
    padding: 0.85rem 1rem;
    background: #f0f9f0;
    border: 1px solid #b8d4b8;
    border-radius: 6px;
    color: #2a4129;
    font-size: 0.9rem;
    display: none;
}
.upload-summary.visible { display: block; }

/* ===== Manage page existing photos grid ===== */
.gallery-manage-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}
.gallery-photo-card {
    background: #faf7f2;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    transition: box-shadow 0.25s, opacity 0.18s, transform 0.18s;
    position: relative;
}
.gallery-photo-card:hover { box-shadow: 0 6px 18px rgba(0,0,0,0.1); }
.gallery-photo-card.dragging { opacity: 0.55; transform: scale(0.98); }
.gallery-photo-card > a { display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.gallery-photo-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-bulk-actions {
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.photo-order-status {
    color: #777;
    font-size: 0.82rem;
    line-height: 1;
}
.photo-order-status[data-state="saving"] { color: #8a6a30; }
.photo-order-status[data-state="saved"] { color: var(--green, #3d5a3d); }
.photo-order-status[data-state="error"] { color: var(--burgundy, #6b2c2c); }
.bulk-check {
    position: absolute;
    top: 0.55rem;
    left: 0.55rem;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: rgba(255,255,255,0.92);
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 999px;
    padding: 0.25rem 0.55rem;
    font-size: 0.78rem;
    color: #333;
    text-transform: none;
    letter-spacing: 0;
}
.bulk-check input { width: auto; margin: 0; accent-color: var(--gold, #b8893f); }
.gallery-photo-card .meta-chip {
    position: absolute;
    top: 0.55rem;
    right: 0.55rem;
    z-index: 1;
}
.gallery-photo-actions {
    display: flex;
    gap: 0.4rem;
    padding: 0.55rem;
    border-top: 1px solid var(--line, #e8e2d6);
}
.gallery-photo-actions input[type="text"] {
    flex: 1;
    padding: 0.42rem 0.55rem;
    font-size: 0.82rem;
    border: 1px solid var(--line, #e8e2d6);
    border-radius: 3px;
    min-width: 0;
}
.gallery-photo-footer {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    align-items: center;
    padding: 0.4rem 0.55rem 0.55rem;
}
.gallery-photo-delete { padding: 0; text-align: right; }
.link-danger {
    background: none;
    border: none;
    color: var(--burgundy, #6b2c2c);
    font-size: 0.75rem;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0;
    font-weight: 600;
}
.link-danger:hover { text-decoration: underline; }
.btn-danger {
    background: var(--burgundy, #6b2c2c);
    color: white;
    border: none;
}
.btn-danger:hover { background: #4d1f1f; }
.gallery-delete-form { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--line, #e8e2d6); }

.auth-success {
    background: #f0f9f0;
    border: 1px solid #3d5a3d;
    color: #2a4129;
    padding: 0.75rem 1rem;
    border-radius: 4px;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

/* Mobile tweaks */
@media (max-width: 720px) {
    .gallery-container { padding: 0 1rem; }
    .gallery-card { padding: 1.25rem; }
    .gallery-grid { gap: 1rem; }
    .upload-dropzone { padding: 2rem 1rem; }
    .upload-item { grid-template-columns: 48px 1fr; }
    .upload-item-action { grid-column: 2; justify-self: end; margin-top: -0.5rem; }
}

/* ============================================================
   BLOG FEATURE
   ============================================================ */

.blog-page {
    padding: 2.5rem 0 5rem;
    background: linear-gradient(180deg, #faf7f2 0%, #f4ede0 100%);
    min-height: 60vh;
}
.blog-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 2rem;
}
.blog-container-wide { max-width: 1280px; }

.blog-toolbar {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}
.blog-toolbar .muted { color: #666; font-size: 0.88rem; margin-left: auto; }

.blog-card {
    background: white;
    border-radius: 10px;
    padding: 1.75rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 12px rgba(0,0,0,0.04), 0 1px 3px rgba(0,0,0,0.04);
}
.blog-card h2 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.5rem;
    margin: 0;
    color: var(--ink, #1a1815);
}
.blog-card-header {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-bottom: 1rem; gap: 0.5rem; flex-wrap: wrap;
}
.blog-section-title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.8rem;
    margin: 0 0 1.25rem;
    color: var(--ink, #1a1815);
    border-bottom: 2px solid var(--gold, #b8893f);
    padding-bottom: 0.4rem;
    width: fit-content;
}

/* Hub (community) layout: feed + sidebar */
.blog-hub-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 2rem;
}
@media (max-width: 900px) {
    .blog-hub-layout { grid-template-columns: 1fr; }
}

/* Post feed cards */
.post-feed {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.post-card {
    background: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    transition: transform 0.25s, box-shadow 0.25s;
}
.post-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(0,0,0,0.1);
}
.post-card-cover {
    display: block;
    aspect-ratio: 16 / 7;
    overflow: hidden;
    background: #ece6d8;
}
.post-card-cover img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(.2,.7,.3,1);
}
.post-card-cover:hover img { transform: scale(1.04); }
.post-card-body { padding: 1.5rem 1.75rem; }
.post-card-author {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 0.85rem;
}
.post-card-author .user-avatar {
    width: 38px; height: 38px;
    border-radius: 50%;
    object-fit: cover;
}
.post-card-author strong { font-size: 0.92rem; }
.post-card-author small { display: block; color: #888; font-size: 0.78rem; }
.post-card-author a { text-decoration: none; color: inherit; }
.post-card-author a:hover strong { color: var(--burgundy, #6b2c2c); }
.post-card-body h3 {
    margin: 0 0 0.5rem;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.6rem;
    line-height: 1.2;
    color: var(--ink, #1a1815);
}
.post-card-body h3 a { text-decoration: none; color: inherit; }
.post-card-body h3 a:hover { color: var(--burgundy, #6b2c2c); }
.post-card-excerpt {
    margin: 0 0 1rem;
    color: #555;
    line-height: 1.6;
}
.post-card-meta {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 0.6rem;
}
.post-card-meta small { color: #888; font-size: 0.8rem; }
.post-card-readmore {
    color: var(--burgundy, #6b2c2c);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-decoration: none;
    margin-left: auto;
}
.post-card-readmore:hover { text-decoration: underline; }

.meta-chip {
    display: inline-block;
    background: var(--cream, #f4ede0);
    color: var(--burgundy, #6b2c2c);
    padding: 0.22rem 0.65rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-decoration: none;
}
a.meta-chip:hover { background: var(--gold, #b8893f); color: white; }

.tag-cloud { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: white;
    border: 1px solid var(--line, #e8e2d6);
    color: var(--ink, #1a1815);
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    font-size: 0.78rem;
    text-decoration: none;
    transition: border-color 0.2s, color 0.2s;
}
.tag-chip:hover { border-color: var(--gold, #b8893f); color: var(--burgundy, #6b2c2c); }
.tag-chip small { color: #aaa; font-size: 0.7rem; }

.active-authors { display: flex; flex-direction: column; gap: 0.6rem; }
.active-author {
    display: flex; align-items: center; gap: 0.7rem;
    text-decoration: none; color: inherit;
    padding: 0.55rem;
    border-radius: 6px;
    transition: background 0.2s;
}
.active-author:hover { background: #faf7f2; }
.active-author .user-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.active-author strong { display: block; font-size: 0.9rem; }
.active-author small { color: #888; font-size: 0.78rem; }

.blog-side-list { list-style: none; padding: 0; margin: 0; }
.blog-side-list li { padding: 0.4rem 0; border-bottom: 1px solid #f0eadd; }
.blog-side-list li:last-child { border-bottom: none; }
.blog-side-list a { text-decoration: none; color: var(--ink, #1a1815); font-size: 0.92rem; }
.blog-side-list a:hover { color: var(--burgundy, #6b2c2c); }
.blog-side-list small { color: #aaa; font-size: 0.78rem; }

/* ===== Single post — modern paper-card design ===== */
.blog-post {
    background: linear-gradient(180deg, #faf7f2 0%, #ede4d2 100%);
    padding-bottom: 5rem;
    min-height: 80vh;
}
.subtle-header {
    background: transparent !important;
    padding: 1.25rem 0 0 !important;
}
.subtle-header .page-header-container { padding-bottom: 0 !important; }

/* Hero cover image — taller, with vignette */
.blog-post-hero {
    width: 100%;
    height: 480px;
    background: #ece6d8 center / cover no-repeat;
    position: relative;
}
.blog-post-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(60,40,20,0.45) 100%);
}
@media (max-width: 720px) {
    .blog-post-hero { height: 280px; }
}

.blog-post-container {
    max-width: 820px;
    margin: 0 auto;
    padding: 0 1.5rem;
    position: relative;
    z-index: 2;
}
/* When there's a cover, the card overlaps it slightly for a magazine feel */
.blog-post.has-cover .blog-post-container { margin-top: -120px; }
.blog-post.no-cover  .blog-post-container { margin-top: 1rem; }

/* The "paper" main card */
.blog-post-card {
    position: relative;
    background: white;
    border-radius: 12px;
    padding: 3.5rem 3.5rem 2.5rem;
    box-shadow: 0 4px 30px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.04);
    margin-bottom: 2rem;
}
@media (max-width: 720px) {
    .blog-post-card { padding: 2rem 1.5rem; }
}

/* Floating "Edit" affordance for owner */
.post-edit-floating {
    position: absolute;
    top: 1.25rem; right: 1.25rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.85rem 0.5rem 0.7rem;
    background: white;
    border: 1px solid var(--line, #e8e2d6);
    color: var(--burgundy, #6b2c2c);
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    transition: all 0.2s;
    z-index: 3;
}
.post-edit-floating:hover {
    background: var(--gold, #b8893f);
    color: white;
    border-color: var(--gold, #b8893f);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(184,137,63,0.3);
}
.post-edit-floating svg { flex-shrink: 0; }

/* Header inside the card */
.blog-post-header {
    text-align: center;
    margin-bottom: 2.5rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid #f0eadd;
}
.blog-post-eyebrow {
    margin-bottom: 1rem;
    min-height: 1.5rem;
}
.blog-post-header h1 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 2.8rem;
    line-height: 1.1;
    margin: 0 0 1rem;
    color: var(--ink, #1a1815);
    letter-spacing: -0.015em;
    font-weight: 600;
}
@media (max-width: 720px) {
    .blog-post-header h1 { font-size: 2rem; }
}
.blog-post-excerpt {
    font-size: 1.15rem;
    color: #5c574e;
    line-height: 1.55;
    margin: 0 0 1.75rem;
    font-style: italic;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 500;
}

/* Byline (author + meta) — single clean row */
.blog-post-byline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}
.blog-post-byline-author {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    color: inherit;
}
.blog-post-byline-author .user-avatar {
    width: 44px; height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--gold, #b8893f);
}
.blog-post-byline-author span { display: inline-flex; flex-direction: column; }
.blog-post-byline-author strong {
    font-size: 0.95rem;
    color: var(--ink, #1a1815);
}
.blog-post-byline-author small { color: #888; font-size: 0.8rem; }
.blog-post-byline-author:hover strong { color: var(--burgundy, #6b2c2c); }
.blog-post-byline-meta {
    color: #888;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.blog-post-byline-meta .dot { color: #ccc; }

/* Article body */
.blog-post-content {
    font-size: 1.1rem;
    line-height: 1.78;
    color: #2a2724;
}
.blog-post-content > p:first-of-type { margin-top: 0; }
.blog-post-content h2,
.blog-post-content h3,
.blog-post-content h4 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    color: var(--ink, #1a1815);
    margin: 2.25rem 0 0.85rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}
.blog-post-content h2 { font-size: 1.95rem; }
.blog-post-content h3 { font-size: 1.55rem; }
.blog-post-content h4 { font-size: 1.25rem; }
.blog-post-content p { margin: 0 0 1.3rem; }
.blog-post-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 1.75rem 0;
    box-shadow: 0 4px 18px rgba(0,0,0,0.1);
    cursor: zoom-in;
}
.blog-post-content blockquote {
    border-left: 3px solid var(--gold, #b8893f);
    padding: 0.6rem 1.5rem;
    margin: 1.75rem 0;
    color: #4a4540;
    font-style: italic;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.2rem;
    background: linear-gradient(90deg, rgba(184, 137, 63, 0.06), transparent);
}
.blog-post-content pre,
.blog-post-content code {
    background: #f5efe0;
    border-radius: 4px;
    font-family: 'SF Mono', Monaco, Consolas, monospace;
    font-size: 0.9em;
}
.blog-post-content code { padding: 0.1em 0.4em; }
.blog-post-content pre { padding: 1.25rem; overflow-x: auto; margin: 1.5rem 0; }
.blog-post-content ul,
.blog-post-content ol { margin: 0 0 1.3rem; padding-left: 1.5rem; }
.blog-post-content li { margin-bottom: 0.5rem; }
.blog-post-content a {
    color: var(--burgundy, #6b2c2c);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
}
.blog-post-content a:hover { color: var(--gold, #b8893f); }
.blog-post-content hr {
    border: none;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--line, #e8e2d6), transparent);
    margin: 2.5rem 0;
}

.blog-post-tags {
    display: flex;
    gap: 0.45rem;
    flex-wrap: wrap;
    margin: 2.5rem 0 0.5rem;
    padding-top: 1.75rem;
    border-top: 1px solid #f0eadd;
}

.comments-disabled-msg {
    background: #faf7f2;
    padding: 1rem 1.25rem;
    border-radius: 8px;
    margin: 0;
}

.blog-author-card {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
    background: white;
    border-radius: 10px;
    padding: 1.75rem;
    margin: 2.5rem 0;
    box-shadow: 0 2px 12px rgba(0,0,0,0.05);
}
.blog-author-card .user-avatar {
    width: 80px; height: 80px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.blog-author-card small {
    color: #888; font-size: 0.78rem;
    text-transform: uppercase; letter-spacing: 0.08em;
}
.blog-author-card h3 {
    margin: 0.3rem 0 0.5rem;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.4rem;
}
.blog-author-card h3 a { text-decoration: none; color: var(--ink, #1a1815); }
.blog-author-card p { color: #555; margin: 0 0 0.85rem; font-size: 0.95rem; line-height: 1.55; }

/* Comments */
.blog-comments {
    background: white;
    border-radius: 10px;
    padding: 2rem;
    margin-top: 2rem;
    box-shadow: 0 2px 12px rgba(0,0,0,0.05);
}
.blog-comments > h2 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.6rem;
    margin: 0 0 1.25rem;
}
.blog-comments > h2 small { color: #888; font-size: 0.85rem; }

.comment-form { margin-bottom: 1.25rem; }
.comment-form-row {
    display: flex; gap: 0.85rem; align-items: flex-start;
}
.comment-form-row textarea {
    flex: 1;
    border: 1px solid var(--line, #e8e2d6);
    border-radius: 8px;
    padding: 0.85rem 1rem;
    font-family: inherit;
    font-size: 0.95rem;
    resize: vertical;
    min-height: 80px;
}
.comment-form-row textarea:focus { outline: none; border-color: var(--gold, #b8893f); }

.comment-avatar {
    width: 40px; height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.comment-list { display: flex; flex-direction: column; gap: 1.25rem; }
.comment {
    display: flex;
    gap: 0.85rem;
    padding: 1rem 0;
    border-top: 1px solid #f0eadd;
}
.comment.hidden { opacity: 0.55; }
.comment.comment-reply {
    margin-left: 3.1rem;
    padding-left: 1rem;
    border-left: 3px solid #e8dcc4;
}
.comment-body { flex: 1; }
.comment-meta {
    display: flex; gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.3rem;
    flex-wrap: wrap;
}
.comment-meta strong { font-size: 0.92rem; }
.comment-meta a { text-decoration: none; color: var(--ink, #1a1815); }
.comment-meta a:hover { color: var(--burgundy, #6b2c2c); }
.comment-meta small { color: #888; font-size: 0.78rem; }
.comment-body p {
    margin: 0;
    color: #333;
    line-height: 1.55;
}
.replying-to {
    margin: 0 0 0.75rem 3.1rem;
    padding: 0.55rem 0.75rem;
    background: #faf7f2;
    border: 1px solid var(--line, #e8e2d6);
    border-radius: 6px;
    color: #555;
    font-size: 0.88rem;
}
.replying-to button,
.link-button {
    background: none;
    border: none;
    color: var(--burgundy, #6b2c2c);
    cursor: pointer;
    font: inherit;
    font-weight: 600;
    padding: 0.15rem 0;
}
.replying-to button:hover,
.link-button:hover { text-decoration: underline; }
.comment-edit-details {
    margin-top: 0.55rem;
    font-size: 0.88rem;
}
.comment-edit-details summary {
    color: var(--burgundy, #6b2c2c);
    cursor: pointer;
    font-weight: 600;
}
.comment-edit-details textarea {
    width: 100%;
    margin: 0.5rem 0;
    border: 1px solid var(--line, #e8e2d6);
    border-radius: 6px;
    padding: 0.75rem;
    font-family: inherit;
}

/* Comment moderation rows in editor */
.comment-mod-list { display: flex; flex-direction: column; gap: 0.85rem; }
.comment-mod-row {
    display: grid;
    grid-template-columns: 40px 1fr auto;
    gap: 0.85rem;
    padding: 0.85rem;
    background: #faf7f2;
    border-radius: 8px;
    align-items: flex-start;
}
.comment-mod-row.hidden { opacity: 0.55; }
.comment-mod-row strong { font-size: 0.92rem; }
.comment-mod-row small { color: #888; font-size: 0.78rem; margin-left: 0.5rem; }
.comment-mod-row p { margin: 0.4rem 0 0; font-size: 0.92rem; line-height: 1.55; }
.comment-mod-actions { display: flex; gap: 0.4rem; align-items: center; flex-direction: column; }

/* ===== Edit form layout ===== */
.blog-edit-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 1.5rem;
    align-items: start;
}
.blog-edit-side {
    position: sticky;
    top: 1rem;
    align-self: start;
}
.blog-publish-card,
.blog-settings-card {
    padding: 1.15rem;
}
.blog-publish-panel {
    display: grid;
    gap: 0.95rem;
    margin-bottom: 1.25rem;
}
.blog-publish-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.blog-publish-panel .blog-card-header {
    margin-bottom: 0;
}
.blog-publish-fields,
.blog-publish-actions {
    display: flex;
    align-items: flex-end;
    gap: 0.65rem;
    flex-wrap: wrap;
}
.blog-publish-date {
    min-width: 220px;
    margin: 0 !important;
}
.blog-publish-date input {
    margin-top: 0.35rem !important;
}
.blog-publish-actions {
    justify-content: flex-end;
    flex: 0 0 auto;
}
.blog-status-toggle {
    display: inline-flex;
    align-self: flex-end;
    border: 1px solid var(--line, #e8e2d6);
    border-radius: 999px;
    background: var(--surface-elevated, #fdfaf5);
    padding: 0.2rem;
    margin-bottom: 0;
}
.blog-status-toggle label {
    margin: 0 !important;
    cursor: pointer;
}
.blog-status-toggle input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.blog-status-toggle span {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 98px;
    min-height: 36px;
    margin: 0 !important;
    padding: 0.45rem 0.85rem;
    border-radius: 999px;
    color: var(--ink-soft, #4a4640);
    font-size: 0.78rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    line-height: 1;
    text-transform: uppercase !important;
    transition: background 0.16s, color 0.16s, box-shadow 0.16s;
}
.blog-status-toggle input:checked + span {
    background: var(--gold, #b8893f);
    color: var(--ink, #1a1815);
    box-shadow: 0 5px 14px rgba(184, 137, 63, 0.22);
}
.blog-status-toggle input:focus-visible + span {
    box-shadow: 0 0 0 3px rgba(184, 137, 63, 0.18);
}
.blog-settings-card {
    display: grid;
    gap: 0.75rem;
}
.blog-settings-card .blog-card-header {
    margin-bottom: 0.1rem;
}
.blog-setting-panel {
    border: 1px solid var(--line, #e8e2d6);
    border-radius: 8px;
    background: var(--surface-elevated, #fdfaf5);
    overflow: hidden;
}
.blog-setting-panel > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 0.95rem;
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink, #1a1815);
    list-style: none;
}
.blog-setting-panel > summary::-webkit-details-marker {
    display: none;
}
.blog-setting-panel > summary::after {
    content: '+';
    color: var(--burgundy, #6b2c2c);
    font-size: 1.1rem;
    line-height: 1;
}
.blog-setting-panel[open] > summary::after {
    content: '-';
}
.blog-setting-panel-body {
    padding: 0 0.95rem 0.95rem;
}
.blog-setting-panel-body > label:last-child,
.blog-setting-panel-body .pf-opt:last-child {
    margin-bottom: 0 !important;
}
@media (max-width: 900px) {
    .blog-edit-layout { grid-template-columns: 1fr; }
    .blog-edit-side { position: static; }
    .blog-publish-panel-head { display: grid; }
    .blog-publish-actions {
        justify-content: flex-start;
    }
}
.blog-edit-title input { font-size: 1.3rem !important; font-weight: 600; }

.blog-cover-preview {
    width: 100%;
    min-height: 190px;
    background: transparent center / cover no-repeat;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-soft, #4a4640);
    font-size: 0.85rem;
}

/* ===== Manage list ===== */
.post-manage-list { display: flex; flex-direction: column; gap: 1rem; }
.post-manage-row {
    display: grid;
    grid-template-columns: 120px 1fr auto;
    gap: 1rem;
    align-items: center;
    padding: 0.85rem;
    background: #faf7f2;
    border-radius: 8px;
    transition: background 0.2s;
}
.post-manage-row:hover { background: #f4ede0; }
.post-manage-cover {
    width: 120px; height: 80px;
    border-radius: 6px;
    overflow: hidden;
    background: #ece6d8;
    flex-shrink: 0;
}
.post-manage-cover img { width: 100%; height: 100%; object-fit: cover; }
.post-manage-cover-empty {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    color: #aaa; font-size: 0.78rem;
    background: repeating-linear-gradient(45deg, #f7f3ec, #f7f3ec 8px, #f1ebe0 8px, #f1ebe0 16px);
}
.post-manage-body h3 {
    margin: 0.3rem 0 0;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.25rem;
}
.post-manage-body h3 a { text-decoration: none; color: var(--ink, #1a1815); }
.post-manage-body h3 a:hover { color: var(--burgundy, #6b2c2c); }
.post-manage-body small { color: #888; font-size: 0.8rem; }
.post-manage-meta {
    display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap;
}
.post-manage-actions {
    display: flex; gap: 0.4rem; align-items: center;
}

.status-pill {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.status-pill.status-draft { background: #f1ebe0; color: #888; }
.status-pill.status-published { background: #d4e8d4; color: #2a4129; }
.status-pill.status-scheduled { background: #f4e7c7; color: #6b4b14; }

.section-list { display: flex; flex-direction: column; gap: 0.4rem; }
.section-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 0.85rem;
    align-items: center;
    padding: 0.6rem 0.85rem;
    background: #faf7f2;
    border-radius: 6px;
}
.section-rename { display: flex; gap: 0.4rem; }
.section-rename input { flex: 1; padding: 0.45rem 0.6rem; border: 1px solid var(--line); border-radius: 4px; font-size: 0.9rem; }

/* ===== Profile recent blog posts card ===== */
.profile-blog-posts { display: flex; flex-direction: column; gap: 0.6rem; }
.profile-blog-post {
    display: grid;
    grid-template-columns: 70px 1fr;
    gap: 0.7rem;
    align-items: center;
    text-decoration: none;
    color: inherit;
    padding: 0.5rem;
    border-radius: 6px;
    transition: background 0.2s;
}
.profile-blog-post:hover { background: #faf7f2; }
.profile-blog-post img {
    width: 70px; height: 50px;
    object-fit: cover;
    border-radius: 4px;
}
.profile-blog-post h5 {
    margin: 0 0 0.15rem;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.05rem;
    color: var(--ink, #1a1815);
}
.profile-blog-post small { color: #888; font-size: 0.78rem; }

/* ===== Rich-text editor (TinyMCE) — match site theme ===== */
/* CRITICAL: editor lives inside a <label> with text-transform: uppercase.
   These resets stop the form-label styling from leaking into editor content. */
.rich-editor-wrap,
.rich-editor-wrap .tox,
.rich-editor-wrap .tox * {
    text-transform: none !important;
    letter-spacing: normal !important;
}
.rich-editor-wrap {
    display: block;
    margin-top: 0.55rem;
}
.rich-editor-wrap .tox-tinymce {
    border: 1px solid var(--line, #e8e2d6) !important;
    border-radius: 8px !important;
    overflow: hidden;
}
.rich-editor-wrap .tox .tox-toolbar,
.rich-editor-wrap .tox .tox-toolbar__primary,
.rich-editor-wrap .tox .tox-toolbar-overlord {
    background: #faf7f2;
    border-bottom-color: var(--line, #e8e2d6);
}
.rich-editor-wrap .tox .tox-tbtn,
.rich-editor-wrap .tox .tox-mbtn,
.rich-editor-wrap .tox .tox-collection__item {
    color: #6b2c2c;
}
@media (max-width: 720px) {
    .rich-editor-wrap .tox-tinymce {
        min-height: 320px;
    }
    .forum-attachment-drop {
        grid-template-columns: auto minmax(0, 1fr);
    }
    .forum-attachment-folder {
        display: none;
    }
}

/* ============================================================
   BLOG EDIT FORM — proper input styling (was relying on missing class)
   ============================================================ */

.blog-edit-form label,
.blog-edit-form fieldset > label,
.blog-edit-form .blog-card > label {
    display: block;
    margin: 0 0 1rem;
    font-weight: 600;
    font-size: 0.78rem;
    color: var(--ink, #1a1815);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Support both <label>Text<input></label> and <label><span>Text</span><input></label> */
.blog-edit-form label > span {
    display: block;
    margin-bottom: 0.45rem;
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink, #1a1815);
}

.blog-edit-form input[type="text"],
.blog-edit-form input[type="url"],
.blog-edit-form input[type="email"],
.blog-edit-form input[type="number"],
.blog-edit-form input[type="search"],
.blog-edit-form input[type="datetime-local"],
.blog-edit-form input[type="file"],
.blog-edit-form select,
.blog-edit-form textarea {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin-top: 0.4rem;
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--line, #e8e2d6);
    border-radius: 4px;
    font-size: 0.95rem;
    font-family: inherit;
    font-weight: 400;
    background: white;
    color: var(--ink, #1a1815);
    text-transform: none;
    letter-spacing: normal;
    transition: border-color 0.18s, box-shadow 0.18s;
}
.blog-edit-form input[hidden] {
    display: none !important;
}

/* When the label uses a <span>, the input shouldn't add its own top margin */
.blog-edit-form label > span + input,
.blog-edit-form label > span + select,
.blog-edit-form label > span + textarea { margin-top: 0; }

.blog-edit-form textarea {
    resize: vertical;
    min-height: 80px;
    line-height: 1.5;
}

.blog-edit-form input:focus,
.blog-edit-form select:focus,
.blog-edit-form textarea:focus {
    outline: none;
    border-color: var(--gold, #b8893f);
    box-shadow: 0 0 0 3px rgba(184, 137, 63, 0.15);
}

.blog-edit-form select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236b2c2c' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.85rem center;
    padding-right: 2.25rem;
    cursor: pointer;
}

.blog-edit-form small {
    display: block;
    margin-top: 0.4rem;
    font-size: 0.78rem;
    color: #888;
    text-transform: none;
    letter-spacing: normal;
    font-weight: 400;
    line-height: 1.4;
}
.blog-edit-form small a { color: var(--burgundy, #6b2c2c); text-decoration: none; }
.blog-edit-form small a:hover { text-decoration: underline; }

/* The big title field stands out */
.blog-edit-title input {
    font-size: 1.5rem !important;
    font-weight: 600 !important;
    padding: 0.85rem 1rem !important;
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    letter-spacing: -0.01em !important;
}

/* Radio/checkbox rows in the sidebar (Publish + Discussion) */
.blog-edit-form .pf-opt {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 0.6rem;
    margin: 0 0 0.5rem !important;
    padding: 0.4rem 0;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-weight: 500 !important;
    font-size: 0.92rem !important;
    cursor: pointer;
    color: var(--ink, #1a1815);
}
.blog-edit-form .pf-opt input[type=radio],
.blog-edit-form .pf-opt input[type=checkbox] {
    width: auto !important;
    margin: 0 !important;
    accent-color: var(--gold, #b8893f);
    flex-shrink: 0;
}

.blog-edit-form .checkbox {
    display: flex !important;
    align-items: center;
    gap: 0.5rem;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-weight: 500 !important;
    font-size: 0.88rem !important;
    color: #555;
    cursor: pointer;
}
.blog-edit-form .checkbox input { width: auto !important; margin: 0 !important; accent-color: var(--gold, #b8893f); }

/* File-upload "button" inside the cover card */
.blog-edit-form label.btn {
    display: block;
    margin: 0.6rem 0 0;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    cursor: pointer;
}

/* The form-actions inside cards */
.blog-edit-form .form-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-top: 0.5rem;
}
.editor-status {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0.55rem 0.1rem 0;
    color: #777;
    font-size: 0.82rem;
    text-transform: none;
    letter-spacing: 0;
}
.editor-status .word-count { font-weight: 600; color: #555; }
.editor-status .save-state { color: #8a6a30; }

.profile-completeness {
    margin: 0 0 1.25rem;
    padding: 1rem;
    background: #faf7f2;
    border: 1px solid var(--line, #e8e2d6);
    border-radius: 8px;
}
.profile-completeness strong { display: block; color: var(--ink, #1a1815); }
.profile-completeness span { display: block; color: #666; font-size: 0.9rem; margin-top: 0.25rem; }
.profile-completeness-bar {
    height: 8px;
    margin-top: 0.75rem;
    border-radius: 999px;
    background: #e8dcc4;
    overflow: hidden;
}
.profile-completeness-bar span {
    display: block;
    height: 100%;
    margin: 0;
    background: linear-gradient(90deg, var(--gold, #b8893f), #6b2c2c);
}
.privacy-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 180px;
    gap: 0.85rem;
    align-items: start;
    margin-bottom: 1rem;
}
.privacy-row > label { margin-bottom: 0; }
.privacy-control select { min-height: 43px; }
.privacy-row.compact { margin-bottom: 0; }

/* ============================================================
   PROFILE — sub-bar groups + tabbed activity card
   ============================================================ */

/* Group "view" link with optional manage-pencil */
.profile-subbar-section {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
}
.profile-subbar-section + .profile-subbar-section {
    border-left: 1px solid var(--line, #e8e2d6);
    margin-left: 0.4rem;
    padding-left: 0.4rem;
}
.profile-subbar-edit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px; height: 28px;
    margin-right: 0.35rem;
    border-radius: 50%;
    color: #888;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}
.profile-subbar-edit:hover {
    background: var(--gold, #b8893f);
    color: white;
}

/* Tabbed Recent Photos / Recent Blog card */
.profile-tabs-card { padding: 0; overflow: hidden; }
.profile-tabs-bar {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--line, #e8e2d6);
    background: #faf7f2;
    overflow-x: hidden;
}
.profile-tab {
    flex: 1 1 0;
    min-width: 0;
    background: transparent;
    border: none;
    padding: 0.85rem 0.72rem;
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #888;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.2s, border-color 0.2s, background 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
}
.profile-tab:hover { color: var(--ink, #1a1815); background: rgba(0,0,0,0.02); }
.profile-tab.active {
    color: var(--ink, #1a1815);
    border-bottom-color: var(--gold, #b8893f);
    background: white;
}
.profile-tab .count {
    display: inline-block;
    background: var(--gold, #b8893f);
    color: white;
    font-size: 0.7rem;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    letter-spacing: 0;
}
.profile-tab-panel { padding: 1.25rem 1.5rem 1.5rem; }
.profile-tab-panel[hidden] { display: none; }
.profile-tab-panel-head {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.85rem;
}

/* Empty cover thumb in blog row */
.profile-blog-post-cover-empty {
    width: 70px; height: 50px;
    display: flex; align-items: center; justify-content: center;
    color: #b59b6c;
    background: #f4ede0;
    border-radius: 4px;
    font-size: 1.4rem;
}

/* ============================================================
   BLOG COVER PREVIEW — uploading state + progress bar
   ============================================================ */

.blog-cover-preview {
    position: relative;
    overflow: hidden;
}
.blog-cover-preview .cover-preview-placeholder {
    display: flex;
    flex-direction: column;
    gap: 0.34rem;
    align-items: center;
    justify-content: center;
    width: 100%; height: 100%;
    padding: 1.25rem;
    color: var(--ink-soft, #4a4640);
    font-size: 0.88rem;
    text-align: center;
}
.cover-upload-icon {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-bottom: 0.2rem;
    border-radius: 14px;
    background: white;
    color: var(--burgundy, #6b2c2c);
    box-shadow: 0 8px 20px rgba(26, 24, 21, 0.08);
}
.cover-upload-icon svg {
    width: 22px;
    height: 22px;
}
.blog-cover-preview .cover-preview-placeholder strong {
    font-size: 0.95rem;
    color: var(--ink, #1a1815);
}
.blog-cover-preview .cover-preview-placeholder em {
    color: var(--ink-mute, #8a857c);
    font-style: normal;
    font-size: 0.78rem;
}
.blog-cover-preview.uploading::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.35);
    pointer-events: none;
}
.cover-progress {
    display: none;
    position: absolute;
    left: 1rem; right: 1rem; bottom: 1rem;
    height: 6px;
    background: rgba(255,255,255,0.4);
    border-radius: 999px;
    overflow: hidden;
    z-index: 2;
}
.cover-progress-bar {
    position: absolute;
    inset: 0 100% 0 0;
    background: linear-gradient(90deg, var(--gold, #b8893f), #e0a96d);
    transition: right 0.2s ease-out;
}
.cover-status {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-shadow: 0 1px 4px rgba(0,0,0,0.4);
    z-index: 3;
    pointer-events: none;
    text-align: center;
    padding: 0 1rem;
}
.blog-cover-preview:not(.uploading) .cover-status:empty { display: none; }
.blog-cover-preview:not(.uploading) .cover-status {
    background: #fff3f0;
    color: var(--burgundy, #6b2c2c);
    box-shadow: 0 8px 22px rgba(26, 24, 21, 0.08);
    text-shadow: none;
    padding: 0.4rem 0.85rem;
    border-radius: 4px;
}
.blog-cover-upload {
    display: grid;
    gap: 0.8rem;
    padding: 0.85rem;
    border: 1px solid rgba(232, 226, 214, 0.95);
    border-radius: 12px;
    background: linear-gradient(180deg, #fffdf9 0%, #f8f1e6 100%);
    transition: border-color 0.18s, background 0.18s, box-shadow 0.18s;
}
.blog-cover-upload.is-dragging {
    border-color: var(--gold, #b8893f);
    background: #fbf4e5;
    box-shadow: 0 0 0 3px rgba(184, 137, 63, 0.13);
}
.blog-cover-upload:focus {
    outline: none;
    border-color: var(--gold, #b8893f);
    box-shadow: 0 0 0 3px rgba(184, 137, 63, 0.13);
}
.cover-upload-actions {
    display: grid;
    justify-items: center;
    align-items: center;
    gap: 0.4rem;
    text-align: center;
}
.cover-upload-actions span {
    color: var(--ink-mute, #8a857c);
    font-size: 0.76rem;
}
.cover-upload-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 38px;
    padding: 0.52rem 0.95rem;
    border: 1px solid var(--ink, #1a1815);
    border-radius: 999px;
    background: var(--ink, #1a1815);
    color: white;
    font-family: inherit;
    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(26, 24, 21, 0.12);
    transition: transform 0.16s, box-shadow 0.16s, background 0.16s, border-color 0.16s;
}
.cover-upload-button:hover {
    background: var(--burgundy, #6b2c2c);
    border-color: var(--burgundy, #6b2c2c);
    box-shadow: 0 10px 24px rgba(107, 44, 44, 0.18);
    transform: translateY(-1px);
}
.cover-upload-button-icon {
    display: inline-grid;
    place-items: center;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
    font-size: 0.95rem;
    line-height: 1;
}

/* "Remove cover" link styling */
#coverRemoveBtn {
    background: none;
    border: none;
    color: var(--burgundy, #6b2c2c);
    font-size: 0.78rem;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0;
    font-weight: 600;
    margin-top: 0.5rem;
}
#coverRemoveBtn:hover { text-decoration: underline; }

/* ============================================================
   TAG PICKER (chip input with click suggestions)
   ============================================================ */

.tag-input-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem;
    border: 1px solid var(--line, #e8e2d6);
    border-radius: 4px;
    background: white;
    margin-top: 0.4rem;
    min-height: 48px;
    cursor: text;
    transition: border-color 0.18s, box-shadow 0.18s;
}
.tag-input-wrap:focus-within {
    border-color: var(--gold, #b8893f);
    box-shadow: 0 0 0 3px rgba(184, 137, 63, 0.15);
}
.tag-chips { display: contents; }
.tag-input-wrap input {
    flex: 1 1 120px;
    border: none !important;
    margin: 0 !important;
    padding: 0.3rem 0.4rem !important;
    background: transparent !important;
    font-size: 0.92rem !important;
    font-family: inherit !important;
    color: var(--ink, #1a1815);
    outline: none;
    box-shadow: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    width: auto !important;
}
.tag-chip-input {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: var(--cream, #f4ede0);
    color: var(--burgundy, #6b2c2c);
    padding: 0.3rem 0.4rem 0.3rem 0.7rem;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: normal;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 0.18s, border-color 0.18s;
    font-family: inherit;
}
.tag-chip-input:hover {
    background: #f8e5cc;
    border-color: var(--gold, #b8893f);
}
.tag-chip-input span:first-child { opacity: 0.6; }
.tag-chip-input .x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px; height: 16px;
    margin-left: 0.15rem;
    border-radius: 50%;
    background: rgba(107, 44, 44, 0.12);
    font-size: 0.85rem;
    line-height: 1;
}
.tag-chip-input:hover .x { background: rgba(107, 44, 44, 0.25); }

.tag-suggestions {
    margin-top: 0.85rem;
    padding-top: 0.65rem;
    border-top: 1px dashed #e8e2d6;
}
.tag-suggestions-details {
    padding-top: 0;
}
.tag-suggestions-details summary {
    cursor: pointer;
    color: var(--burgundy, #6b2c2c);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    list-style: none;
    text-transform: uppercase;
}
.tag-suggestions-details summary::-webkit-details-marker {
    display: none;
}
.tag-suggestions-details summary::after {
    content: '+';
    margin-left: 0.35rem;
}
.tag-suggestions-details[open] summary::after {
    content: '-';
}
.tag-suggestions > small {
    display: block;
    color: #888;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
}
.tag-suggestion-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.45rem;
}
.tag-suggestion {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: white;
    border: 1px solid var(--line, #e8e2d6);
    color: var(--ink, #1a1815);
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    font-size: 0.82rem;
    cursor: pointer;
    transition: border-color 0.18s, color 0.18s, background 0.18s;
    font-family: inherit;
    text-transform: none;
    letter-spacing: normal;
    font-weight: 500;
}
.tag-suggestion:hover {
    border-color: var(--gold, #b8893f);
    color: var(--burgundy, #6b2c2c);
    background: #fffaf0;
}
.tag-suggestion small { color: #aaa; font-size: 0.7rem; }
.tag-suggestion.added,
.tag-suggestion[disabled] {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
}

kbd {
    display: inline-block;
    padding: 0.05rem 0.4rem;
    background: #faf7f2;
    border: 1px solid #ddd2bc;
    border-radius: 3px;
    font-family: 'SF Mono', Monaco, Consolas, monospace;
    font-size: 0.78em;
    color: #555;
    box-shadow: 0 1px 0 #ddd2bc;
}

/* ============================================================
   IMAGE LIGHTBOX
   ============================================================ */

body.lightbox-open { overflow: hidden; }

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(15, 12, 8, 0.94);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem 1rem 1rem;
    box-sizing: border-box;
    animation: lightbox-fade-in 0.2s ease-out;
}
.lightbox[hidden] { display: none; }

@keyframes lightbox-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.lightbox-toolbar {
    position: absolute;
    top: 0; left: 0; right: 0;
    padding: 1rem 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #f4ede0;
    background: linear-gradient(180deg, rgba(0,0,0,0.55), transparent);
    z-index: 2;
}
.lightbox-counter {
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(244, 237, 224, 0.85);
}
.lightbox-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 50%;
    color: #f4ede0;
    cursor: pointer;
    transition: background 0.18s, transform 0.18s;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.lightbox-close:hover {
    background: rgba(255,255,255,0.18);
    transform: rotate(90deg);
}

.lightbox-stage {
    position: relative;
    max-width: min(1200px, 100%);
    max-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
}
.lightbox-img {
    max-width: 100%;
    max-height: calc(100vh - 8rem);
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    background: #1a1815;
    user-select: none;
}
.lightbox-img.loading {
    opacity: 0.4;
    transition: opacity 0.2s;
}
.lightbox-caption {
    color: #f4ede0;
    font-size: 0.95rem;
    line-height: 1.5;
    text-align: center;
    margin-top: 1rem;
    padding: 0.6rem 1.25rem;
    background: rgba(0,0,0,0.5);
    border-radius: 4px;
    max-width: 800px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 56px; height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    color: #f4ede0;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.18s, transform 0.18s;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 2;
}
.lightbox-nav:hover {
    background: rgba(255,255,255,0.18);
}
.lightbox-prev { left: 1.25rem; }
.lightbox-next { right: 1.25rem; }
.lightbox-prev:hover { transform: translateY(-50%) translateX(-3px); }
.lightbox-next:hover { transform: translateY(-50%) translateX(3px); }

@media (max-width: 600px) {
    .lightbox-nav { width: 48px; height: 48px; }
    .lightbox-prev { left: 0.5rem; }
    .lightbox-next { right: 0.5rem; }
    .lightbox-toolbar { padding: 0.75rem 1rem; }
}

@media (max-width: 700px) {
    .comment.comment-reply { margin-left: 1.25rem; }
    .replying-to { margin-left: 0; }
    .privacy-row { grid-template-columns: 1fr; gap: 0.35rem; }
    .gallery-photo-footer { align-items: stretch; flex-direction: column; }
    .profile-subbar-inner { padding: 0 1rem; }
    .profile-subbar-section {
        width: 100%;
        justify-content: space-between;
    }
    .profile-subbar-link { min-height: 44px; padding: 0.85rem 0.25rem; }
    .profile-subbar-edit { width: 44px; height: 44px; }
}

/* When users hover content images in a blog post, hint that they're zoomable */
.blog-post-content img:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.18); }

/* ============================================================
   FOLLOW / LIKE BUTTONS
   ============================================================ */

.follow-btn { cursor: pointer; }
.follow-btn.is-following::before { content: '✓ '; }
.follow-btn:disabled { opacity: 0.6; }

.profile-id-stats {
    display: flex;
    gap: 0.45rem;
    margin-top: 0;
    align-items: center;
    padding: 0.25rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface-elevated);
}
.profile-stat {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.08rem;
    text-decoration: none;
    color: inherit;
    text-align: center;
    min-width: 76px;
    padding: 0.28rem 0.62rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    transition: background 0.16s, color 0.16s;
}
.profile-stat strong { font-size: 1.02rem; color: var(--ink); font-weight: 850; line-height: 1; }
.profile-stat small { color: var(--ink-mute); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.09em; line-height: 1; }
.profile-stat:hover { background: #fff; }
.profile-stat:hover strong { color: var(--burgundy); }
.profile-id-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.7rem;
    flex-wrap: wrap;
}

.reaction-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 0.95rem;
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--ink-soft);
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.18s;
    font-family: inherit;
    text-decoration: none;
}
.reaction-btn:hover {
    border-color: var(--burgundy);
    color: var(--burgundy);
}
.reaction-btn.is-active {
    background: rgba(107, 44, 44, 0.08);
    border-color: var(--burgundy);
    color: var(--burgundy);
}
.reaction-btn.is-active .heart-icon {
    fill: var(--burgundy);
    stroke: var(--burgundy);
}
.reaction-btn.reaction-pulse .heart-icon {
    animation: heart-pulse 0.45s ease-out;
}
@keyframes heart-pulse {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.4); }
    100% { transform: scale(1); }
}
.reaction-btn .reaction-count {
    background: rgba(0,0,0,0.06);
    padding: 0.05rem 0.5rem;
    border-radius: 999px;
    font-size: 0.78rem;
}
.reaction-btn.is-active .reaction-count {
    background: rgba(107, 44, 44, 0.18);
}
.heart-icon { width: 18px; height: 18px; }

/* ===== Like pill (summary names + heart toggle + hover popover) ===== */
.like-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0;
    background: var(--surface-elevated);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 0;
    overflow: visible;
    max-width: 100%;
}
.like-pill.compact { background: transparent; border: 0; }
.like-pill-summary {
    display: inline-flex;
    align-items: center;
    color: var(--ink-soft);
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.45rem 0.9rem 0.45rem 1.05rem;
    cursor: default;
    max-width: 360px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.like-pill-summary[hidden] { display: none; }
.like-pill-name {
    color: var(--burgundy);
    text-decoration: none;
    font-weight: 700;
}
.like-pill-name:hover { text-decoration: underline; }
.like-pill .reaction-btn {
    border-radius: 999px;
    border: 0;
    background: var(--surface);
    box-shadow: 0 0 0 1px var(--line);
    margin: 2px;
    padding: 0.4rem 0.85rem;
}
.like-pill .reaction-btn:hover {
    box-shadow: 0 0 0 1px var(--burgundy);
}
.like-pill .reaction-btn.is-active {
    box-shadow: 0 0 0 1px var(--burgundy);
}
.like-pill.has-likes:not(.compact) .reaction-btn {
    /* visually attach to summary */
    margin-left: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* Popover */
.like-popover {
    position: absolute;
    bottom: calc(100% + 10px);
    right: 0;
    min-width: 200px;
    max-width: 260px;
    background: #2a2520;
    color: var(--cream);
    border-radius: 12px;
    padding: 0.85rem 0.95rem 0.7rem;
    box-shadow: 0 18px 48px rgba(0,0,0,0.35), 0 0 0 1px rgba(201,161,74,0.18);
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.14s ease, transform 0.14s ease;
    pointer-events: none;
    z-index: 60;
}
.like-popover.show {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.like-popover.flip-down {
    bottom: auto;
    top: calc(100% + 10px);
    transform: translateY(-4px);
}
.like-popover.flip-down.show { transform: translateY(0); }
.like-popover::after {
    content: "";
    position: absolute;
    bottom: -6px;
    right: 22px;
    width: 12px;
    height: 12px;
    background: #2a2520;
    transform: rotate(45deg);
    box-shadow: 1px 1px 0 rgba(201,161,74,0.18);
}
.like-popover.flip-down::after {
    bottom: auto;
    top: -6px;
    box-shadow: -1px -1px 0 rgba(201,161,74,0.18);
}
.like-popover-header {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding-bottom: 0.5rem;
    margin-bottom: 0.35rem;
    border-bottom: 1px solid rgba(244,237,224,0.14);
}
.like-popover-header svg {
    width: 14px;
    height: 14px;
    color: var(--burgundy-soft);
}
.like-popover-header strong {
    font-size: 0.85rem;
    color: var(--cream);
    font-weight: 800;
    letter-spacing: 0.04em;
}
.like-popover-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.18rem;
    max-height: 240px;
    overflow-y: auto;
}
.like-popover-list li { font-size: 0.88rem; line-height: 1.4; }
.like-popover-list a {
    color: var(--cream);
    text-decoration: none;
    display: block;
    padding: 0.1rem 0;
}
.like-popover-list a:hover { color: var(--gold-soft); text-decoration: underline; }
.like-popover-more {
    display: block;
    margin-top: 0.45rem;
    color: rgba(244,237,224,0.55);
    font-size: 0.78rem;
    font-style: italic;
}

@media (max-width: 600px) {
    .like-pill-summary { max-width: 200px; }
    .like-popover { right: auto; left: 0; }
    .like-popover::after { right: auto; left: 22px; }
}

/* Gallery tile — floating like pill in the corner */
.gallery-photo-tile-wrap {
    position: relative;
    margin: 0;
}
.gallery-photo-like {
    position: absolute;
    right: 0.55rem;
    bottom: 0.55rem;
    z-index: 2;
}
.gallery-photo-like .like-pill {
    background: rgba(26,24,21,0.7);
    backdrop-filter: blur(6px);
    border-color: rgba(255,255,255,0.15);
}
.gallery-photo-like .reaction-btn {
    background: transparent;
    box-shadow: none;
    color: var(--cream);
    padding: 0.32rem 0.65rem;
}
.gallery-photo-like .reaction-btn .reaction-count {
    background: rgba(255,255,255,0.16);
    color: var(--cream);
}
.gallery-photo-like .reaction-btn:hover { color: var(--gold-soft); box-shadow: none; }
.gallery-photo-like .reaction-btn.is-active { color: #ff8a8a; box-shadow: none; }
.gallery-photo-like .reaction-btn.is-active .heart-icon { fill: #ff8a8a; stroke: #ff8a8a; }

.blog-post-actions {
    margin-top: 1.5rem;
    display: flex;
    gap: 0.6rem;
    align-items: center;
    flex-wrap: wrap;
}

/* ============================================================
   MESSAGES (DM) + CHAT — shared message bubble styles
   ============================================================ */

.messages-page,
.chat-page {
    padding: 2rem 0 4rem;
    background: linear-gradient(180deg, var(--bg) 0%, var(--cream) 100%);
}
.chat-page {
    min-height: calc(100vh - 150px);
    padding: 1.25rem 0 2rem;
    background:
        radial-gradient(circle at 12% 0%, rgba(201, 161, 74, 0.16), transparent 28rem),
        linear-gradient(180deg, #f7f3ea 0%, #eee7d9 100%);
}
.messages-container {
    max-width: 880px;
    margin: 0 auto;
    padding: 0 1.5rem;
}
.chat-container {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 1.5rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 250px;
    gap: 1rem;
}
@media (max-width: 900px) {
    .chat-container { grid-template-columns: 1fr; }
    .chat-sidebar { order: -1; }
}

/* Inbox */
.conversation-list {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}
.conversation-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.85rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--line);
    text-decoration: none;
    color: var(--ink);
    transition: background 0.15s;
}
.conversation-row:last-child { border-bottom: none; }
.conversation-row:hover { background: var(--surface-elevated); }
.conversation-row.unread { background: var(--surface-elevated); border-left: 3px solid var(--gold); }
.conversation-avatar-wrap {
    position: relative;
}
.conversation-avatar-wrap .user-avatar {
    width: 48px; height: 48px;
    border-radius: 50%; object-fit: cover;
}
.online-dot {
    position: absolute;
    bottom: 0; right: 0;
    width: 12px; height: 12px;
    background: #22e06f;
    border: 2px solid var(--surface);
    border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(34, 224, 111, 0.18);
}
.online-dot.inline {
    position: relative;
    display: inline-block;
    margin-right: 0.3rem;
    border: none;
    width: 8px; height: 8px;
}
.conversation-body { min-width: 0; }
.conversation-top {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-bottom: 0.15rem;
}
.conversation-top strong { font-size: 0.95rem; }
.conversation-top small { color: var(--ink-mute); font-size: 0.78rem; }
.conversation-preview {
    color: var(--ink-soft);
    font-size: 0.88rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.unread-badge {
    background: var(--burgundy);
    color: white;
    min-width: 22px;
    height: 22px;
    border-radius: 11px;
    font-size: 0.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.5rem;
    font-weight: 700;
}

/* DM thread + Chat shared layout */
.messages-thread-card,
.chat-main {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: calc(100vh - 280px);
    min-height: 480px;
    position: relative;
}
.chat-page .chat-main {
    border: 1px solid rgba(26, 24, 21, 0.08);
    border-radius: 18px;
    box-shadow: 0 18px 45px rgba(26, 24, 21, 0.12);
    height: min(760px, calc(100vh - 185px));
    min-height: 560px;
    background: rgba(255, 255, 255, 0.86);
}
.chat-room-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.1rem;
    border-bottom: 1px solid rgba(26, 24, 21, 0.08);
    background: rgba(255,255,255,0.72);
}
.chat-room-kicker {
    display: block;
    color: var(--burgundy);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.chat-room-header h1 {
    margin: 0.1rem 0 0;
    color: var(--ink);
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.7rem;
    line-height: 1;
}
.chat-room-presence {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.38rem 0.65rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    color: var(--ink-soft);
    font-size: 0.78rem;
    font-weight: 700;
}
.thread-header {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem 1.25rem;
    border-bottom: 1px solid var(--line);
    background: var(--surface-elevated);
}
.thread-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    border-radius: 50%;
    color: var(--ink-soft);
    text-decoration: none;
    transition: background 0.18s, color 0.18s;
    font-size: 1.2rem;
}
.thread-back:hover { background: rgba(0,0,0,0.06); color: var(--ink); }
.thread-other {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    color: inherit;
}
.thread-other .user-avatar { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; }
.thread-other strong { display: block; font-size: 0.95rem; }
.thread-other small.presence-label {
    color: var(--ink-mute);
    font-size: 0.75rem;
    display: inline-flex;
    align-items: center;
}

.thread-stream,
.chat-stream {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    background: var(--bg);
}
.chat-page .chat-stream {
    padding: 1rem 1.1rem;
    gap: 0.42rem;
    background:
        linear-gradient(rgba(255,255,255,0.72), rgba(255,255,255,0.72)),
        repeating-linear-gradient(0deg, transparent 0 31px, rgba(26,24,21,0.025) 32px);
}

.message-row {
    display: flex;
    align-items: flex-end;
    gap: 0.55rem;
    max-width: 80%;
}
.chat-page .message-row {
    max-width: min(68%, 520px);
}
.message-row.mine { align-self: flex-end; flex-direction: row-reverse; }
.message-row.theirs { align-self: flex-start; }
.message-avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.chat-page .message-avatar {
    width: 28px;
    height: 28px;
    border: 2px solid rgba(255,255,255,0.9);
    box-shadow: 0 3px 10px rgba(26,24,21,0.12);
}
.message-bubble {
    background: var(--surface);
    padding: 0.65rem 0.85rem;
    border-radius: 14px;
    border: 1px solid var(--line);
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}
.chat-page .message-bubble {
    padding: 0.46rem 0.68rem;
    border-radius: 13px;
    border-color: rgba(26,24,21,0.08);
    box-shadow: 0 3px 10px rgba(26,24,21,0.055);
}
.message-row.mine .message-bubble {
    background: var(--gold);
    color: white;
    border-color: var(--gold);
    border-bottom-right-radius: 4px;
}
.chat-page .message-row.mine .message-bubble {
    background: linear-gradient(135deg, #c9a14a, #a96f38);
    border-color: transparent;
    border-bottom-right-radius: 5px;
}
.message-row.theirs .message-bubble {
    border-bottom-left-radius: 4px;
}
.chat-page .message-row.theirs .message-bubble {
    background: rgba(255,255,255,0.95);
    border-bottom-left-radius: 5px;
}
.message-author {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--burgundy);
    margin-bottom: 0.2rem;
    text-decoration: none;
}
.chat-page .message-author {
    display: inline-block;
    margin-bottom: 0.12rem;
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.message-row.mine .message-author { color: rgba(255,255,255,0.95); }
.message-text {
    font-size: 0.95rem;
    line-height: 1.45;
}
.chat-page .message-text {
    font-size: 0.9rem;
    line-height: 1.32;
}
.message-text a.mention {
    background: rgba(107,44,44,0.1);
    padding: 0 0.3rem;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 600;
}
.message-row.mine .message-text a.mention {
    background: rgba(255,255,255,0.25);
    color: white;
}
.message-time {
    font-size: 0.7rem;
    color: var(--ink-mute);
    margin-top: 0.3rem;
    text-align: right;
}
.chat-page .message-time {
    font-size: 0.66rem;
    margin-top: 0.12rem;
    opacity: 0.72;
}
.message-row.mine .message-time { color: rgba(255,255,255,0.85); }
.message-image {
    display: block;
    margin-bottom: 0.5rem;
    max-width: 320px;
    border-radius: 8px;
    overflow: hidden;
}
.message-image img {
    display: block;
    width: 100%;
    height: auto;
    cursor: zoom-in;
}

/* Composer */
.thread-composer {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    padding: 0.85rem 1rem;
    border-top: 1px solid var(--line);
    background: var(--surface);
}
.chat-page .thread-composer {
    align-items: center;
    gap: 0.55rem;
    padding: 0.75rem 0.9rem;
    border-top-color: rgba(26,24,21,0.08);
    background: rgba(255,255,255,0.82);
}
.thread-composer.sending { opacity: 0.6; pointer-events: none; }
.thread-composer textarea {
    flex: 1;
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 0.55rem 1rem;
    font-family: inherit;
    font-size: 0.95rem;
    resize: none;
    line-height: 1.4;
    min-height: 38px;
    max-height: 160px;
    background: var(--bg);
}
.chat-page .thread-composer textarea {
    min-height: 40px;
    border-radius: 999px;
    background: #f7f3ea;
    border-color: rgba(26,24,21,0.1);
    padding: 0.58rem 1rem;
    font-size: 0.92rem;
}
.chat-page .thread-composer textarea:focus {
    background: #fff;
    box-shadow: 0 0 0 3px rgba(201,161,74,0.16);
}
.thread-composer textarea:focus {
    outline: none;
    border-color: var(--gold);
    background: var(--surface);
}
.composer-attach {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px; height: 38px;
    border-radius: 50%;
    color: var(--ink-soft);
    cursor: pointer;
    transition: background 0.18s, color 0.18s;
    flex-shrink: 0;
}
.composer-attach:hover { background: rgba(0,0,0,0.06); color: var(--burgundy); }
.composer-send { flex-shrink: 0; }
.chat-page .composer-attach {
    background: #f7f3ea;
    border: 1px solid rgba(26,24,21,0.08);
}
.chat-page .composer-send {
    border-radius: 999px;
    padding: 0.55rem 1rem;
}
.composer-preview {
    position: relative;
    display: inline-block;
}
.composer-preview[hidden] {
    display: none;
}
.composer-preview img {
    max-height: 60px; max-width: 100px;
    border-radius: 6px;
    border: 1px solid var(--line);
}
.composer-preview-clear {
    position: absolute;
    top: -6px; right: -6px;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--burgundy);
    color: white;
    border: none;
    cursor: pointer;
    font-size: 0.95rem;
    line-height: 1;
}

/* Chat sidebar */
.chat-sidebar {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 1.25rem;
    height: fit-content;
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}
.chat-page .chat-sidebar {
    border: 1px solid rgba(26,24,21,0.08);
    border-radius: 18px;
    padding: 0.9rem;
    background: rgba(255,255,255,0.78);
    box-shadow: 0 12px 32px rgba(26,24,21,0.09);
}
.chat-sidebar h3 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.2rem;
    margin: 0 0 1rem;
    color: var(--ink);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.chat-page .chat-sidebar h3 {
    font-family: Inter, system-ui, sans-serif;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.chat-online-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    max-height: 400px;
    overflow-y: auto;
}
.chat-online-user {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.45rem 0.55rem;
    border-radius: 6px;
    text-decoration: none;
    color: inherit;
    transition: background 0.15s;
}
.chat-page .chat-online-user {
    padding: 0.4rem;
    border: 1px solid transparent;
    border-radius: 12px;
}
.chat-page .chat-online-user:hover {
    border-color: rgba(26,24,21,0.08);
    background: rgba(255,255,255,0.78);
}
.chat-online-user:hover { background: var(--surface-elevated); }
.chat-online-user .user-avatar {
    width: 30px; height: 30px;
    border-radius: 50%; object-fit: cover;
}
.chat-online-user .online-dot {
    position: relative;
    width: 8px; height: 8px;
    border: none;
}
.chat-online-user span:last-child {
    font-size: 0.88rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.chat-tip {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
    font-size: 0.82rem;
}

/* "X new messages ↓" button */
.chat-new-below {
    position: absolute;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--burgundy);
    color: white;
    border: none;
    padding: 0.55rem 1rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0,0,0,0.18);
    z-index: 5;
}
.chat-new-below:hover { background: var(--burgundy-soft); }

/* Header inbox icon */
.header-icon-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--line);
    border-radius: var(--radius-button);
    color: var(--burgundy);
    background: var(--surface);
    text-decoration: none;
    transition: background 0.18s, color 0.18s, border-color 0.18s;
}
.header-icon-btn:hover {
    background: var(--surface-elevated);
    color: var(--gold);
    border-color: var(--gold);
}
.create-menu {
    position: relative;
}
.create-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    height: 38px;
    padding: 0 1rem;
    border: 1px solid var(--gold);
    border-radius: var(--radius-button);
    background: var(--gold);
    color: var(--ink);
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.18s, border-color 0.18s, box-shadow 0.18s, transform 0.18s;
}
.create-toggle svg {
    width: 16px;
    height: 16px;
}
.create-toggle:hover,
.create-menu:focus-within .create-toggle,
.create-menu:hover .create-toggle {
    background: var(--gold-soft);
    border-color: var(--gold-soft);
    box-shadow: 0 8px 22px rgba(184, 137, 63, 0.2);
    transform: translateY(-1px);
}
.create-dropdown {
    position: absolute;
    right: 0;
    top: calc(100% + 12px);
    min-width: 240px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: 0 12px 36px rgba(26, 24, 21, 0.14), 0 2px 6px rgba(26, 24, 21, 0.06);
    padding: 0.4rem 0;
    display: none;
    z-index: 260;
}
.create-menu:hover .create-dropdown,
.create-menu:focus-within .create-dropdown {
    display: block;
    animation: user-dropdown-in 0.18s ease-out;
}
.create-dropdown::before {
    content: '';
    position: absolute;
    top: -14px;
    left: 0;
    right: 0;
    height: 14px;
    background: transparent;
}
.create-dropdown-arrow {
    position: absolute;
    top: -7px;
    right: 18px;
    width: 14px;
    height: 14px;
    background: var(--surface);
    border-top: 1px solid var(--line);
    border-left: 1px solid var(--line);
    transform: rotate(45deg);
    z-index: -1;
}
.create-dropdown a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.72rem 1rem;
    color: var(--ink);
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.2;
    transition: background 0.15s, color 0.15s;
}
.create-dropdown a:hover {
    background: var(--cream);
    color: var(--burgundy);
}
.create-dropdown svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--ink-mute);
}
.create-dropdown a:hover svg {
    color: var(--gold);
}
.create-forum-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.create-forum-modal[hidden] { display: none; }
.create-forum-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(26, 24, 21, 0.58);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}
.create-forum-modal-card {
    position: relative;
    width: min(460px, 100%);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 24px 64px rgba(26, 24, 21, 0.32);
    overflow: hidden;
    animation: user-dropdown-in 0.16s ease-out;
}
.create-forum-modal-head,
.create-forum-modal-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem 1.15rem;
}
.create-forum-modal-head {
    border-bottom: 1px solid var(--line);
}
.create-forum-modal-head h3 {
    margin: 0;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.5rem;
    color: var(--ink);
}
.create-forum-modal-close {
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--ink-soft);
    cursor: pointer;
    font-size: 1.5rem;
    line-height: 1;
}
.create-forum-modal-close:hover {
    background: var(--surface-elevated);
    color: var(--ink);
}
.create-forum-modal-body {
    padding: 1.15rem;
}
.create-forum-modal-body label {
    display: grid;
    gap: 0.45rem;
    color: var(--ink);
    font-weight: 800;
}
.create-forum-modal-body select {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-elevated);
    color: var(--ink);
    font: inherit;
    font-weight: 600;
    padding: 0.72rem 0.8rem;
}
.create-forum-modal-foot {
    justify-content: flex-end;
    border-top: 1px solid var(--line);
    background: var(--surface-elevated);
}
.menu-badge {
    display: inline-block;
    background: var(--burgundy);
    color: white;
    font-size: 0.7rem;
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    margin-left: 0.3rem;
    font-weight: 600;
    letter-spacing: 0;
}

/* ============================================================
   USER MENU — XenForo-style sectioned dropdown, themed
   ============================================================ */

/* Toggle button: avatar + name + caret */
.user-menu .user-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.35rem 0.85rem 0.35rem 0.4rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-button);
    cursor: pointer;
    color: var(--ink);
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    transition: border-color 0.18s, background 0.18s, box-shadow 0.18s;
}
.user-menu .user-toggle:hover,
.user-menu .user-toggle[aria-expanded="true"] {
    border-color: var(--gold);
    box-shadow: 0 1px 6px rgba(184, 137, 63, 0.18);
}
.user-menu .user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--gold);
}
.user-toggle-name {
    color: var(--ink);
    letter-spacing: 0.02em;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.user-toggle-caret {
    color: var(--ink-mute);
    transition: transform 0.2s, color 0.2s;
}
.user-menu:hover .user-toggle-caret,
.user-menu:focus-within .user-toggle-caret {
    transform: rotate(180deg);
    color: var(--gold);
}

/* Hide name on small screens — keep avatar only */
@media (max-width: 600px) {
    .user-toggle-name { display: none; }
    .user-menu .user-toggle { padding: 0.3rem; }
}

/* The dropdown panel */
.user-menu .user-dropdown {
    position: absolute;
    right: 0;
    top: calc(100% + 12px);
    min-width: 280px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: 0 12px 36px rgba(26, 24, 21, 0.14), 0 2px 6px rgba(26, 24, 21, 0.06);
    padding: 0.4rem 0;
    display: none;
    z-index: 250;
    overflow: visible;
}
.user-menu:hover .user-dropdown,
.user-menu:focus-within .user-dropdown {
    display: block;
    animation: user-dropdown-in 0.18s ease-out;
}
@keyframes user-dropdown-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Little caret pointing up at the avatar */
.user-dropdown-arrow {
    position: absolute;
    top: -7px;
    right: 16px;
    width: 14px;
    height: 14px;
    background: var(--surface);
    border-top: 1px solid var(--line);
    border-left: 1px solid var(--line);
    transform: rotate(45deg);
    z-index: -1;
}

/* Sections separated by hairlines */
.user-dropdown-section {
    padding: 0.3rem 0;
    border-bottom: 1px solid var(--line);
}
.user-dropdown-section:last-child {
    border-bottom: none;
}

/* Each row */
.user-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.65rem 1.1rem;
    color: var(--ink);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.2;
    transition: background 0.15s, color 0.15s;
    position: relative;
}
.user-dropdown-item:hover {
    background: var(--cream);
    color: var(--burgundy);
}
.user-dropdown-item svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    display: block;
    align-self: center;
    color: var(--ink-mute);
    transition: color 0.15s;
}
.user-dropdown-item:hover svg {
    color: var(--gold);
}
.user-dropdown-item span {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.user-dropdown-item small {
    color: var(--ink-mute);
    font-size: 0.78rem;
    font-weight: 400;
    letter-spacing: 0;
}
.user-dropdown-item:hover small {
    color: var(--burgundy-soft);
}

/* Unread/count badge inside row */
.user-dropdown-badge {
    background: var(--burgundy);
    color: white;
    font-size: 0.72rem;
    font-weight: 700;
    min-width: 20px;
    height: 20px;
    border-radius: 999px;
    padding: 0 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0;
}

/* Admin item — gold accent */
.user-dropdown-admin svg { color: var(--gold) !important; }
.user-dropdown-admin:hover { background: rgba(184, 137, 63, 0.08); }
.user-dropdown-arrow-out {
    color: var(--gold);
    font-weight: 600;
}

/* Sign-out item — burgundy accent on hover */
.user-dropdown-signout:hover {
    background: rgba(107, 44, 44, 0.06);
    color: var(--burgundy);
}
.user-dropdown-signout:hover svg {
    color: var(--burgundy);
}

/* ============================================================
   FIX: bridge the hover gap so the user dropdown doesn't vanish
   when moving the mouse from the avatar down to the menu.
   ============================================================ */

/* Invisible 14px-tall hover bridge above the dropdown panel */
.user-menu .user-dropdown::before {
    content: '';
    position: absolute;
    top: -14px;
    left: 0;
    right: 0;
    height: 14px;
    background: transparent;
}

/* Also make the bell icon sit nicely as an SVG (overrides the old dot styling) */
.notification-toggle .bell-icon {
    width: 18px;
    height: 18px;
    color: var(--burgundy);
    font-size: 0;        /* zero out any leftover text-size from the old dot */
}

/* Specificity cleanup: older `.user-dropdown a` rules used higher specificity. */
.user-menu .user-dropdown a.user-dropdown-item {
    display: flex;
    align-items: center;
    border-left: none;
}
.notification-menu .notification-toggle:hover .bell-icon { color: var(--gold); }

/* ============================================================
   THE HOLOCRON
   ============================================================ */
.holocron-hero {
    background: linear-gradient(135deg, #1a1815 0%, #2f2a22 55%, #5a2c2c 100%);
    color: var(--cream);
    padding: 4rem 1.5rem;
}
.holocron-hero-inner {
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
    gap: 2rem;
    align-items: end;
}
.holocron-hero h1 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(3rem, 8vw, 6rem);
    line-height: 0.95;
    margin: 0.25rem 0 0.85rem;
}
.holocron-hero p { max-width: 680px; color: rgba(244,237,224,0.82); font-size: 1.05rem; }
.holocron-hero-actions { display: grid; gap: 0.85rem; }
.holocron-hero-actions .btn-outline {
    background: rgba(244, 237, 224, 0.96);
    border-color: rgba(244, 237, 224, 0.96);
    color: var(--burgundy);
    box-shadow: 0 14px 30px rgba(0,0,0,0.18);
}
.holocron-hero-actions .btn-outline:hover {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--ink);
    transform: translateY(-1px);
}
.holocron-search {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.5rem;
}
.holocron-search input {
    border: 1px solid rgba(244,237,224,0.2);
    background: rgba(255,255,255,0.08);
    color: var(--cream);
    border-radius: 999px;
    padding: 0.8rem 1rem;
    font: inherit;
}
.holocron-page,
.holocron-file-page,
.holocron-upload-page {
    max-width: 1180px;
    margin: 0 auto;
    padding: 2rem 1.5rem 5rem;
}
.holocron-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-top: -3rem;
    margin-bottom: 1.25rem;
}
.holocron-stats div {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 1.1rem 1.25rem;
    box-shadow: 0 12px 32px rgba(26,24,21,0.08);
}
.holocron-stats strong {
    display: block;
    font-size: 1.7rem;
    line-height: 1;
    color: var(--burgundy);
}
.holocron-stats span {
    color: var(--ink-mute);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}
.holocron-layout {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
}
.holocron-sidebar {
    position: sticky;
    top: 156px;
    display: grid;
    gap: 1rem;
}
.holocron-panel,
.holocron-empty,
.holocron-file-detail,
.holocron-preview-panel,
.holocron-preview-note,
.holocron-related,
.holocron-upload-shell {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 10px 28px rgba(26,24,21,0.05);
}
.holocron-panel { padding: 1rem; }
.holocron-panel h2,
.holocron-section-head h2,
.holocron-related h2,
.holocron-upload-heading h1,
.holocron-file-detail h1 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    color: var(--ink);
}
.holocron-panel h2 { font-size: 1.25rem; margin: 0 0 0.75rem; }
.holocron-category-list { display: grid; gap: 0.35rem; }
.holocron-category-list a {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    text-decoration: none;
    color: var(--ink);
    padding: 0.6rem 0.7rem;
    border-radius: 10px;
}
.holocron-category-list a:hover,
.holocron-category-list a.active {
    background: var(--surface-elevated);
    color: var(--burgundy);
}
.holocron-category-list small {
    color: var(--ink-mute);
}
.holocron-tags,
.holocron-mini-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}
.holocron-tags a,
.holocron-mini-tags span {
    border-radius: 999px;
    background: #f3eadb;
    color: var(--burgundy);
    padding: 0.28rem 0.65rem;
    font-size: 0.8rem;
    text-decoration: none;
}
.holocron-main { display: grid; gap: 1.25rem; }
.holocron-category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 1rem;
}
.holocron-category-card,
.holocron-file-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(26,24,21,0.05);
}
.holocron-category-card {
    display: block;
    color: inherit;
    text-decoration: none;
    padding: 1.1rem;
}
.holocron-category-icon,
.holocron-file-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--ink);
    color: var(--gold);
    font-weight: 800;
}
.holocron-category-icon { width: 44px; height: 44px; margin-bottom: 1rem; }
.holocron-category-card h3 { margin: 0 0 0.35rem; color: var(--ink); }
.holocron-category-card p { color: var(--ink-soft); font-size: 0.92rem; margin: 0 0 0.8rem; }
.holocron-section-head {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: end;
}
.holocron-section-head h2 { margin: 0; font-size: 2rem; }
.holocron-file-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
}
.holocron-file-card {
    display: grid;
    grid-template-columns: 54px 1fr;
    gap: 0.85rem;
    padding: 0.95rem;
    align-items: start;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.holocron-file-card:hover {
    transform: translateY(-2px);
    border-color: rgba(184,137,63,0.38);
    box-shadow: 0 14px 30px rgba(26,24,21,0.09);
}
.holocron-file-icon {
    width: 54px;
    height: 62px;
    text-decoration: none;
    font-size: 0.72rem;
    border-radius: 14px;
    letter-spacing: 0.04em;
}
.holocron-file-icon.large {
    width: 112px;
    height: 132px;
    font-size: 1.05rem;
}
.holocron-card-topline {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: center;
    margin-bottom: 0.35rem;
}
.holocron-card-topline span,
.holocron-card-topline small {
    border-radius: 999px;
    background: #f3eadb;
    color: var(--burgundy);
    padding: 0.2rem 0.55rem;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.09em;
}
.holocron-card-topline small {
    background: var(--surface-elevated);
    color: var(--ink-mute);
}
.holocron-file-card h3 { margin: 0 0 0.3rem; font-size: 1rem; line-height: 1.25; }
.holocron-file-card h3 a { color: var(--ink); text-decoration: none; }
.holocron-file-card h3 a:hover { color: var(--burgundy); }
.holocron-file-card p { color: var(--ink-soft); margin: 0 0 0.55rem; font-size: 0.86rem; line-height: 1.45; }
.holocron-file-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 0.7rem;
    color: var(--ink-mute);
    font-size: 0.78rem;
}
.holocron-empty { padding: 2rem; text-align: center; }
.holocron-file-detail {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.4rem;
    padding: 1.5rem;
}
.holocron-file-detail h1 { margin: 0 0 0.65rem; font-size: clamp(2rem, 5vw, 3.3rem); line-height: 1; }
.holocron-preview-panel,
.holocron-preview-note,
.holocron-related { margin-top: 1.25rem; padding: 1.25rem; }
.holocron-preview-panel iframe {
    width: 100%;
    height: min(78vh, 820px);
    min-height: 520px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface-elevated);
    margin-top: 1rem;
}
.holocron-preview-note {
    display: grid;
    gap: 0.25rem;
    color: var(--ink-soft);
}
.holocron-preview-note strong {
    color: var(--ink);
}
.holocron-upload-shell { padding: 1.4rem; }
.holocron-upload-heading h1 { font-size: clamp(2.4rem, 6vw, 4.5rem); line-height: 1; margin: 0.2rem 0 0.5rem; }
.holocron-upload-heading p { color: var(--ink-soft); margin: 0 0 1.25rem; }
.holocron-upload-grid {
    display: grid;
    grid-template-columns: minmax(280px, 0.9fr) minmax(320px, 1fr);
    gap: 1.25rem;
}
.holocron-dropzone {
    min-height: 360px;
    border: 2px dashed #d8c8a8;
    border-radius: 18px;
    background: var(--surface-elevated);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.55rem;
    text-align: center;
    cursor: pointer;
    padding: 1.5rem;
}
.holocron-dropzone.dragging {
    border-color: var(--gold);
    background: #fff7e6;
}
.holocron-drop-icon {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--ink);
    color: var(--gold);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
}
.holocron-dropzone em,
.holocron-dropzone small { color: var(--ink-mute); }
.holocron-upload-fields label { display: block; margin-bottom: 1rem; }
.holocron-upload-fields input,
.holocron-upload-fields select,
.holocron-upload-fields textarea {
    width: 100%;
    margin-top: 0.35rem;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 0.75rem 0.9rem;
    font: inherit;
}
.file-thumb {
    border-radius: 10px;
    background: var(--ink);
    color: var(--gold);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    font-weight: 800;
}
.profile-holocron-list { display: grid; gap: 0.65rem; }
.profile-holocron-item {
    display: grid;
    grid-template-columns: 54px 1fr;
    gap: 0.75rem;
    align-items: center;
    padding: 0.65rem;
    border-radius: 10px;
    color: inherit;
    text-decoration: none;
}
.profile-holocron-item:hover { background: var(--surface-elevated); }
.profile-holocron-item > span {
    background: var(--ink);
    color: var(--gold);
    border-radius: 10px;
    padding: 0.65rem 0.35rem;
    text-align: center;
    font-size: 0.78rem;
    font-weight: 800;
}
.profile-holocron-item strong { display: block; color: var(--ink); }
.profile-holocron-item small { color: var(--ink-mute); }
@media (max-width: 900px) {
    .holocron-hero-inner,
    .holocron-layout,
    .holocron-upload-grid,
    .holocron-file-detail { grid-template-columns: 1fr; }
    .holocron-sidebar { position: static; }
    .holocron-stats { grid-template-columns: 1fr; margin-top: 1rem; }
}

/* ============================================================
   KHARIS INSTITUTE
   ============================================================ */
.kharis-hero {
    background: linear-gradient(135deg, #161b2a 0%, #26304a 52%, #6b2c2c 100%);
    color: var(--cream);
    padding: 5rem 1.5rem 4.5rem;
}
.kharis-hero.is-offline {
    background: linear-gradient(135deg, #1d1a16 0%, #312b24 55%, #4d3a2c 100%);
}
.kharis-hero.has-course-image {
    background-image:
        linear-gradient(90deg, rgba(22, 27, 42, 0.94) 0%, rgba(22, 27, 42, 0.82) 48%, rgba(107, 44, 44, 0.5) 100%),
        var(--course-image);
    background-size: cover;
    background-position: center;
}
.kharis-hero-inner {
    max-width: 1040px;
    margin: 0 auto;
}
.kharis-hero h1 {
    max-width: 900px;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(3rem, 8vw, 6.5rem);
    line-height: 0.95;
    margin: 0.25rem 0 1rem;
    color: var(--cream);
}
.kharis-hero p {
    max-width: 760px;
    color: rgba(244,237,224,0.84);
    font-size: 1.08rem;
    line-height: 1.75;
}
.kharis-admin-note {
    display: inline-flex;
    max-width: 760px;
    margin-top: 1.3rem;
    padding: 0.85rem 1rem;
    border: 1px solid rgba(201,161,74,0.42);
    border-radius: 8px;
    background: rgba(201,161,74,0.12);
    color: var(--cream);
    font-size: 0.92rem;
}
.kharis-page,
.kharis-offline-panel {
    max-width: 1180px;
    margin: 0 auto;
    padding: 3rem 1.5rem 5rem;
}
.kharis-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}
.kharis-card,
.kharis-offline-panel > div {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 16px 34px rgba(26,24,21,0.06);
    padding: 1.35rem;
}
.kharis-card-primary {
    grid-column: 1 / -1;
    min-height: 220px;
    display: grid;
    align-content: end;
    background: linear-gradient(135deg, rgba(244,237,224,0.92), #fff);
    border-top: 3px solid var(--gold);
}
.kharis-card span,
.kharis-offline-panel span {
    display: block;
    color: var(--burgundy);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 0.55rem;
}
.kharis-card h2,
.kharis-card h3,
.kharis-offline-panel h2 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    color: var(--ink);
    line-height: 1.12;
    margin: 0 0 0.65rem;
}
.kharis-card h2,
.kharis-offline-panel h2 {
    font-size: clamp(2rem, 4vw, 3.2rem);
}
.kharis-card h3 { font-size: 1.55rem; }
.kharis-card p,
.kharis-offline-panel p {
    color: var(--ink-soft);
    line-height: 1.7;
    margin: 0;
}
.kharis-dashboard-strip {
    display: grid;
    gap: 1rem;
    margin-bottom: 1rem;
    padding: 1.25rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
}
.kharis-dashboard-strip h2,
.kharis-module h2,
.kharis-lesson-content h1,
.kharis-reflection h2 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    color: var(--ink);
}
.kharis-mini-progress {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.75rem;
}
.kharis-mini-progress a {
    display: grid;
    gap: 0.45rem;
    padding: 0.85rem;
    color: inherit;
    border: 1px solid var(--line);
    border-radius: 8px;
}
.kharis-mini-progress span,
.kharis-card-progress {
    display: block;
    height: 8px;
    overflow: hidden;
    background: var(--cream);
    border-radius: 999px;
}
.kharis-mini-progress i,
.kharis-card-progress i {
    display: block;
    height: 100%;
    background: var(--gold);
}
.kharis-course-card {
    display: grid;
    gap: 0.8rem;
    align-content: start;
}
.kharis-course-card.has-image {
    padding: 0;
    overflow: hidden;
}
.kharis-course-card-image {
    aspect-ratio: 16 / 9;
    background: var(--cream);
    border-bottom: 1px solid var(--line);
}
.kharis-course-card-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}
.kharis-course-card-body {
    display: grid;
    gap: 0.8rem;
}
.kharis-course-card.has-image .kharis-course-card-body {
    padding: 0 1.35rem 1.35rem;
}
.kharis-course-layout,
.kharis-lesson-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 310px;
    gap: 1.25rem;
    align-items: start;
}
.kharis-course-main,
.kharis-lesson-content,
.kharis-lesson-nav,
.kharis-course-side .kharis-card,
.kharis-module,
.kharis-reflection {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 1.25rem;
}
.kharis-course-main,
.kharis-lesson-content {
    display: grid;
    gap: 1.2rem;
}
.kharis-rich {
    color: var(--ink-soft);
    line-height: 1.8;
}
.kharis-rich p,
.kharis-rich ul,
.kharis-rich ol {
    margin-bottom: 1rem;
}
.kharis-video-embed {
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: var(--ink);
    aspect-ratio: 16 / 9;
}
.kharis-video-embed iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}
.kharis-resource-panel {
    display: grid;
    gap: 1rem;
    padding: 1.25rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}
.kharis-resource-panel h2 {
    margin: 0;
    font-family: 'Cormorant Garamond', Georgia, serif;
    color: var(--ink);
}
.kharis-lesson-module-list {
    display: grid;
    gap: 1rem;
}
.kharis-lesson-module {
    display: grid;
    gap: 1rem;
    padding: 1.25rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}
.kharis-lesson-module-title {
    display: grid;
    gap: 0.25rem;
}
.kharis-lesson-module-title span {
    color: var(--burgundy);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.kharis-lesson-module-title h2 {
    margin: 0;
    font-family: 'Cormorant Garamond', Georgia, serif;
    color: var(--ink);
    font-size: 1.65rem;
    line-height: 1.12;
}
.kharis-module-response {
    display: grid;
    gap: 0.8rem;
    padding: 1rem;
    border: 1px solid rgba(201,161,74,0.32);
    border-radius: 8px;
    background: #fff9e8;
}
.kharis-module-response h3 {
    margin: 0;
    color: var(--ink);
    font-size: 1rem;
}
.kharis-resource-list {
    display: grid;
    gap: 0.65rem;
}
.kharis-resource-list a {
    display: grid;
    gap: 0.2rem;
    padding: 0.85rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--ink);
    text-decoration: none;
    background: var(--surface-elevated);
}
.kharis-resource-list span {
    color: var(--ink-mute);
    font-size: 0.86rem;
    overflow-wrap: anywhere;
}
.kharis-submission-form,
.kharis-quiz-form {
    display: grid;
    gap: 0.85rem;
}
.kharis-submission-form input[type="file"],
.kharis-submission-form input[type="text"],
.kharis-quiz-form input[type="text"] {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0.85rem;
    font: inherit;
}
.kharis-submission-form textarea {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0.85rem;
    font: inherit;
}
.kharis-quiz-form fieldset,
.kharis-submission-form fieldset {
    display: grid;
    gap: 0.55rem;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}
.kharis-quiz-form legend,
.kharis-submission-form legend {
    padding: 0 0.35rem;
    color: var(--ink);
    font-weight: 800;
}
.kharis-quiz-form label,
.kharis-submission-form label {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    color: var(--ink-soft);
}
.kharis-module {
    display: grid;
    gap: 1rem;
}
.kharis-module-head p {
    color: var(--ink-soft);
}
.kharis-lesson-list,
.kharis-lesson-nav {
    display: grid;
    gap: 0.5rem;
}
.kharis-lesson-row,
.kharis-lesson-nav a {
    display: grid;
    gap: 0.15rem;
    padding: 0.85rem;
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: 8px;
}
.kharis-lesson-row span {
    color: var(--burgundy);
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}
.kharis-lesson-row.is-complete,
.kharis-lesson-nav a.done {
    background: #edf7ef;
    border-color: #cce8d0;
}
.kharis-lesson-nav {
    position: sticky;
    top: calc(139px + 1rem);
}
.kharis-lesson-nav h3 {
    margin: 0.8rem 0 0.15rem;
    color: var(--burgundy);
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.kharis-lesson-nav a.active {
    border-color: var(--gold);
    color: var(--burgundy);
}
.kharis-back-link {
    background: var(--cream);
}
.kharis-reflection {
    border-top: 3px solid var(--gold);
}
.kharis-reflection textarea {
    width: 100%;
    margin: 0.8rem 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0.9rem;
    font: inherit;
}
.kharis-progress-pill {
    display: inline-flex;
    gap: 0.75rem;
    align-items: center;
    margin-top: 1rem;
    padding: 0.7rem 0.9rem;
    border: 1px solid rgba(244,237,224,0.22);
    border-radius: 999px;
    color: var(--cream);
}
.kharis-progress-pill span {
    color: var(--gold);
    font-weight: 900;
}
@media (max-width: 860px) {
    .kharis-grid,
    .kharis-course-layout,
    .kharis-lesson-layout {
        grid-template-columns: 1fr;
    }
    .kharis-lesson-nav {
        position: static;
    }
}

/* ============================================================
   EVENTS
   ============================================================ */
.events-hero {
    background: linear-gradient(135deg, #1d1a16 0%, #3a3027 54%, #6b2c2c 100%);
    color: var(--cream);
    padding: 4rem 1.5rem;
}
.events-hero-inner {
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 440px);
    gap: 2rem;
    align-items: end;
}
.events-hero h1,
.event-detail-hero h1,
.event-submit-heading h1,
.events-section-head h2 {
    font-family: 'Cormorant Garamond', Georgia, serif;
}
.events-hero h1,
.event-submit-heading h1 {
    font-size: clamp(3rem, 8vw, 6rem);
    line-height: 0.95;
    margin: 0.25rem 0 0.85rem;
}
.events-hero p { max-width: 690px; color: rgba(244,237,224,0.84); font-size: 1.05rem; }
.events-hero-actions { display: grid; gap: 0.85rem; }
.events-hero-actions .btn-outline {
    background: rgba(244,237,224,0.96);
    border-color: rgba(244,237,224,0.96);
    color: var(--burgundy);
    box-shadow: 0 14px 30px rgba(0,0,0,0.18);
}
.events-hero-actions .btn-outline:hover {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--ink);
}
.events-search {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.55rem;
}
.events-search input {
    border: 1px solid rgba(244,237,224,0.2);
    background: rgba(255,255,255,0.08);
    color: var(--cream);
    border-radius: 999px;
    padding: 0.8rem 1rem;
    font: inherit;
}
.events-page,
.event-detail-page,
.event-submit-page {
    max-width: 1180px;
    margin: 0 auto;
    padding: 2rem 1.5rem 5rem;
}
.events-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-top: -3rem;
    margin-bottom: 1.25rem;
}
.events-stats div,
.events-panel,
.events-empty,
.event-card,
.event-detail-card,
.event-info-panel,
.event-map-panel,
.event-submit-shell,
.event-related {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: 0 10px 28px rgba(26,24,21,0.06);
}
.events-stats div { padding: 1.1rem 1.25rem; }
.events-stats strong {
    display: block;
    color: var(--burgundy);
    font-size: 1.7rem;
    line-height: 1;
}
.events-stats span {
    color: var(--ink-mute);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}
.events-layout {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
}
.events-sidebar {
    position: sticky;
    top: 156px;
    display: grid;
    gap: 1rem;
}
.events-panel { padding: 1rem; }
.events-panel h2 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.25rem;
    margin: 0 0 0.75rem;
}
.events-category-list { display: grid; gap: 0.35rem; }
.events-category-list a {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    text-decoration: none;
    color: var(--ink);
    padding: 0.6rem 0.7rem;
    border-radius: 999px;
}
.events-category-list a:hover,
.events-category-list a.active {
    background: var(--surface-elevated);
    color: var(--burgundy);
}
.events-main { display: grid; gap: 1.25rem; }
.events-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
}
.events-category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 1rem;
}
.events-category-card {
    display: block;
    color: inherit;
    text-decoration: none;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 1.1rem;
    box-shadow: 0 8px 24px rgba(26,24,21,0.05);
}
.events-category-card > span {
    display: block;
    width: 48px;
    height: 8px;
    border-radius: 999px;
    background: var(--event-color, var(--gold));
    margin-bottom: 1rem;
}
.events-category-card h3 { margin: 0 0 0.35rem; color: var(--ink); }
.events-category-card p { color: var(--ink-soft); font-size: 0.92rem; margin: 0 0 0.8rem; }
.events-section-head {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: end;
}
.events-section-head h2 { margin: 0; font-size: 2rem; color: var(--ink); }
.event-card {
    overflow: hidden;
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    align-items: start;
    padding: 1rem;
    gap: 1rem;
}
.event-card-cover {
    grid-column: 1 / -1;
    display: block;
    aspect-ratio: 16 / 9;
    background: #2f2a22;
    overflow: hidden;
    text-decoration: none;
    border-radius: 14px;
    margin: -1rem -1rem 0;
}
.event-card-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.event-date-tile {
    margin: 0;
    width: 92px;
    height: 108px;
    align-self: start;
    border-radius: 20px;
    background: var(--ink);
    color: var(--gold);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.event-date-tile span {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
}
.event-date-tile strong {
    font-size: 2.25rem;
    line-height: 1;
}
.event-card-body { padding: 0.1rem 0 0; min-width: 0; }
.event-card-kicker {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.6rem;
}
.event-pill {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.25rem 0.65rem;
    background: color-mix(in srgb, var(--event-color, var(--gold)) 18%, white);
    color: var(--burgundy);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 800;
}
.event-pill-soft {
    background: #f3eadb;
    color: var(--ink-soft);
}
.event-pill-official {
    position: relative;
    gap: 0.38rem;
    padding: 0.36rem 0.7rem 0.34rem 0.52rem;
    border: 1px solid rgba(201, 161, 74, 0.58);
    background:
        linear-gradient(135deg, rgba(255,255,255,0.84), rgba(247, 228, 173, 0.92) 48%, rgba(214, 174, 84, 0.95)),
        #f5e5b4;
    color: #4a2f10;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.7),
        0 5px 14px rgba(85, 57, 18, 0.12);
    font-size: 0.68rem;
    line-height: 1;
    white-space: nowrap;
}
.event-pill-official::before {
    content: "";
    width: 0.62rem;
    height: 0.62rem;
    flex: 0 0 auto;
    border-radius: 50%;
    background:
        radial-gradient(circle at 34% 30%, #fff7cc 0 22%, transparent 24%),
        conic-gradient(from 20deg, #fff0a8, #c3912e, #f9d15f, #9c6616, #fff0a8);
    box-shadow: 0 0 0 2px rgba(116, 78, 24, 0.14);
}
.username-link-disabled {
    color: inherit;
    text-decoration: none;
    cursor: default;
}
.event-card h3 { margin: 0 0 0.45rem; font-size: 1.22rem; line-height: 1.2; }
.event-card h3 a { color: var(--ink); text-decoration: none; }
.event-card h3 a:hover { color: var(--burgundy); }
.event-card p { color: var(--ink-soft); margin: 0 0 0.75rem; font-size: 0.92rem; }
.event-meta-list {
    display: grid;
    gap: 0.38rem;
    color: var(--ink-mute);
    font-size: 0.88rem;
}
.events-empty { padding: 2rem; text-align: center; }
.event-detail-hero {
    min-height: 360px;
    color: var(--cream);
    background: linear-gradient(135deg, #1d1a16, #6b2c2c);
    background-size: cover;
    background-position: center;
    border-radius: 20px;
    padding: clamp(2rem, 5vw, 4rem);
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    align-items: end;
    margin-bottom: 1.25rem;
}
.event-detail-hero h1 {
    font-size: clamp(2.6rem, 7vw, 5.8rem);
    line-height: 0.95;
    margin: 0.2rem 0 0.75rem;
}
.event-detail-hero p { max-width: 760px; color: rgba(244,237,224,0.86); }
.event-detail-date {
    min-width: 132px;
    border-radius: 18px;
    background: rgba(244,237,224,0.94);
    color: var(--ink);
    text-align: center;
    padding: 1rem;
    box-shadow: 0 18px 40px rgba(0,0,0,0.18);
}
.event-detail-date span,
.event-detail-date small {
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 0.75rem;
}
.event-detail-date strong {
    display: block;
    color: var(--burgundy);
    font-size: 3.3rem;
    line-height: 1;
}
.event-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 1.25rem;
    align-items: start;
}
.event-detail-card,
.event-info-panel,
.event-map-panel,
.event-related,
.event-submit-shell { padding: 1.4rem; }
.event-detail-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    align-items: center;
    color: var(--ink-mute);
    margin-bottom: 1.25rem;
}
.event-richtext { color: var(--ink-soft); line-height: 1.75; }
.event-richtext h2,
.event-richtext h3 { color: var(--ink); }
.event-detail-side {
    display: grid;
    gap: 1rem;
    position: sticky;
    top: 156px;
}
.event-info-panel h2,
.event-map-panel h2 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    margin: 0 0 0.8rem;
}
.event-info-panel dl { margin: 0 0 1rem; display: grid; gap: 0.75rem; }
.event-info-panel dt {
    color: var(--ink-mute);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 800;
}
.event-info-panel dd { margin: 0; color: var(--ink); }
.event-info-panel dd small { display: block; color: var(--ink-mute); margin-top: 0.15rem; }
.event-map-panel iframe {
    width: 100%;
    aspect-ratio: 4 / 3;
    border: 0;
    border-radius: 14px;
    display: block;
    margin-bottom: 0.65rem;
}
.event-submit-shell { max-width: 980px; margin: 0 auto; }
.event-submit-heading p { color: var(--ink-soft); }
.event-submit-form,
.event-form-section {
    display: grid;
    gap: 1rem;
}
.event-form-section {
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface-elevated);
    padding: 1rem;
}
.event-form-section h2 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    margin: 0;
}
.event-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}
.event-form-grid.tight { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.event-when-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}
.event-submit-form label {
    display: grid;
    gap: 0.35rem;
    color: var(--ink-soft);
    font-size: 0.86rem;
    font-weight: 700;
}
.event-submit-form .event-checkbox-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--ink);
    text-transform: none;
    letter-spacing: 0;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 0.85rem 1rem;
    font-size: 0.92rem;
}
.event-submit-form .event-checkbox-row input {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
}
.event-multiday-toggle span {
    display: grid;
    gap: 0.1rem;
}
.event-multiday-toggle strong {
    color: var(--ink);
    line-height: 1.2;
}
.event-multiday-toggle small {
    color: var(--ink-mute);
    font-weight: 500;
    line-height: 1.35;
}
.event-end-date-field[hidden] {
    display: none !important;
}
.event-submit-form input,
.event-submit-form select,
.event-submit-form textarea {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 0.75rem 0.9rem;
    font: inherit;
    background: var(--surface);
}
.event-submit-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}
.profile-event-list { display: grid; gap: 0.65rem; }
.profile-event-item {
    display: grid;
    grid-template-columns: 74px 1fr;
    gap: 0.8rem;
    align-items: center;
    padding: 0.65rem;
    border-radius: 12px;
    color: inherit;
    text-decoration: none;
}
.profile-event-item:hover { background: var(--surface-elevated); }
.profile-event-item img,
.profile-event-item > span {
    width: 74px;
    height: 54px;
    border-radius: 12px;
}
.profile-event-item img { object-fit: cover; display: block; }
.profile-event-item > span {
    background: var(--ink);
    color: var(--gold);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.profile-event-item strong { display: block; color: var(--ink); }
.profile-event-item small { color: var(--ink-mute); }
.profile-guild-list { display: grid; gap: 0.6rem; }
.profile-guild-item {
    display: grid;
    grid-template-columns: 38px 1fr;
    gap: 0.65rem;
    align-items: center;
    color: inherit;
    text-decoration: none;
    padding: 0.55rem;
    border-radius: 10px;
    transition: background 0.16s;
}
.profile-guild-item:hover { background: var(--surface-elevated); }
.profile-guild-item > span {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--ink);
    color: var(--gold);
    font-weight: 900;
    overflow: hidden;
}
.profile-guild-item > span img,
.guild-card-cover span img,
.guild-icon img,
.community-guild-stack > a > span img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.profile-guild-item strong { display: block; color: var(--ink); }
.profile-guild-item small { color: var(--ink-mute); }

/* ============================================================
   GUILDS
   ============================================================ */
.guilds-hero {
    padding: 3rem 1.5rem;
    background: linear-gradient(135deg, #20251f, #6b2c2c);
    color: #fff;
}
.guilds-hero-inner {
    max-width: 1120px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}
.guilds-hero h1 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(2.4rem, 6vw, 4.6rem);
    line-height: 0.95;
    margin: 0.2rem 0 0.75rem;
}
.guilds-hero p { max-width: 660px; color: rgba(255,255,255,0.82); }
.guilds-page { padding: 2rem 0 4rem; background: var(--bg); }
.guilds-container { max-width: 1120px; margin: 0 auto; padding: 0 1.5rem; }
.guild-create-page {
    background: var(--bg);
    padding: 3rem 0 4.5rem;
}
.guild-create-shell {
    width: min(1080px, calc(100% - 3rem));
    margin-inline: auto;
}
.guild-create-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}
.guild-create-heading h1 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(2.5rem, 5.2vw, 4.7rem);
    line-height: 0.95;
    color: var(--ink);
    margin: 0.25rem 0 0.6rem;
}
.guild-create-heading p:not(.section-eyebrow) {
    max-width: 690px;
    color: var(--ink-soft);
    font-size: 1.03rem;
}
.guild-create-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 1.25rem;
    align-items: start;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 1.25rem;
    box-shadow: 0 18px 46px rgba(26,24,21,0.08);
}
.guild-create-main,
.guild-create-side {
    display: grid;
    gap: 1rem;
}
.guild-create-card label {
    display: grid;
    gap: 0.45rem;
    color: var(--ink);
    font-weight: 800;
}
.guild-create-card input[type="text"],
.guild-create-card input[type="file"],
.guild-create-card select,
.guild-create-card textarea {
    width: 100%;
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-elevated);
    color: var(--ink);
    font: inherit;
    font-weight: 500;
    padding: 0.78rem 0.85rem;
}
.guild-create-card textarea {
    resize: vertical;
    min-height: 210px;
}
.guild-create-card input:focus,
.guild-create-card select:focus,
.guild-create-card textarea:focus {
    outline: 2px solid rgba(201, 161, 74, 0.35);
    border-color: var(--gold);
    background: #fff;
}
.guild-create-card small {
    color: var(--ink-mute);
    font-weight: 600;
    line-height: 1.35;
}
.guild-create-side {
    background: var(--surface-elevated);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 1rem;
}
.guild-cover-upload,
.guild-avatar-upload { align-content: start; }

.form-field { display: grid; gap: 0.4rem; }
.form-field-label {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 800;
    color: var(--ink);
    font-size: 1.05rem;
    letter-spacing: 0.01em;
}
.form-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.4rem;
    font-size: 0.85rem;
    color: var(--ink-soft);
    font-weight: 500;
}
.form-checkbox input { width: auto; margin: 0; }

.upload-dropzone {
    position: relative;
    display: block;
    border: 2px dashed var(--line);
    border-radius: 14px;
    background: var(--surface);
    padding: 1.2rem 1rem;
    text-align: center;
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.18s, background 0.18s, transform 0.18s;
}
.upload-dropzone:hover {
    border-color: var(--burgundy);
    background: var(--surface-elevated);
}
.upload-dropzone.is-dragging {
    border-color: var(--burgundy);
    background: rgba(107,44,44,0.06);
    transform: scale(1.005);
}
.upload-dropzone input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}
.upload-dropzone-square { aspect-ratio: 1 / 1; max-width: 220px; margin: 0 auto; }
.upload-dropzone-wide { aspect-ratio: 16 / 7; min-height: 150px; }

.upload-dropzone-preview {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.upload-dropzone-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.upload-dropzone-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    height: 100%;
    color: var(--ink-soft);
    transition: opacity 0.18s;
}
.upload-dropzone-icon {
    color: var(--burgundy);
    margin-bottom: 0.2rem;
}
.upload-dropzone-title {
    margin: 0;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 800;
    color: var(--ink);
    font-size: 1.15rem;
}
.upload-dropzone-hint { margin: 0; font-size: 0.85rem; }
.upload-dropzone-hint span {
    color: var(--burgundy);
    font-weight: 700;
    text-decoration: underline;
}
.upload-dropzone-meta {
    margin: 0.3rem 0 0;
    font-size: 0.8rem;
    color: var(--ink-mute);
    word-break: break-all;
    max-width: 90%;
}

.upload-dropzone.has-image .upload-dropzone-content {
    background: linear-gradient(180deg, rgba(0,0,0,0.0) 0%, rgba(0,0,0,0.55) 70%, rgba(0,0,0,0.7) 100%);
    color: #fff;
    justify-content: flex-end;
    padding: 0.75rem;
    opacity: 0;
}
.upload-dropzone.has-image:hover .upload-dropzone-content { opacity: 1; }
.upload-dropzone.has-image .upload-dropzone-title,
.upload-dropzone.has-image .upload-dropzone-icon { color: #fff; }
.upload-dropzone.has-image .upload-dropzone-hint { color: rgba(255,255,255,0.85); }
.upload-dropzone.has-image .upload-dropzone-hint span { color: #fff; }

.upload-dropzone-clear {
    position: relative;
    z-index: 3;
    margin-top: 0.5rem;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.5);
    background: rgba(0,0,0,0.45);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
}
.upload-dropzone-clear:hover { background: rgba(0,0,0,0.7); }

.guild-create-actions {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-top: 0.6rem;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
}
.guild-create-actions .btn {
    width: 100%;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
}
.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(180deg, var(--burgundy), #5a1f1f);
    color: #fff;
    border: 1px solid #4a1818;
    padding: 0.7rem 1.25rem;
    border-radius: 12px;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 800;
    font-size: 1.05rem;
    letter-spacing: 0.01em;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(107,44,44,0.28);
    transition: transform 0.16s, box-shadow 0.16s, background 0.16s;
}
.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(107,44,44,0.36);
}
.btn-primary:active { transform: translateY(0); }
.btn-primary svg { flex-shrink: 0; }
.btn-lg { padding: 0.85rem 1.5rem; font-size: 1.1rem; }
.btn-ghost {
    display: inline-flex;
    align-items: center;
    background: transparent;
    color: var(--ink-soft);
    border: 1px solid transparent;
    padding: 0.7rem 1rem;
    border-radius: 12px;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.16s, color 0.16s;
}
.btn-ghost:hover { background: var(--surface-elevated); color: var(--ink); }
.guild-search {
    display: flex;
    gap: 0.65rem;
    margin-bottom: 1.25rem;
}
.guild-search input {
    flex: 1;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 0.72rem 1rem;
    font: inherit;
    background: var(--surface);
}
.guild-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
    align-items: stretch;
}
.guild-card {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
    color: inherit;
    text-decoration: none;
    box-shadow: 0 8px 22px rgba(26,24,21,0.06);
    transition: transform 0.16s, box-shadow 0.16s;
    display: flex;
    flex-direction: column;
    min-height: 342px;
}
.guild-card:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(26,24,21,0.12); }
.guild-card-cover {
    height: 128px;
    background: linear-gradient(135deg, var(--ink), var(--burgundy));
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: flex-end;
    padding: 0.85rem;
}
.guild-card-cover span,
.guild-icon {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255,255,255,0.9);
    color: var(--burgundy);
    font-size: 1.4rem;
    font-weight: 900;
    overflow: hidden;
}
.guild-card-body {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.guild-card-body h2 {
    margin: 0;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.45rem;
    color: var(--ink);
}
.guild-card-body p {
    color: var(--ink-soft);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.45;
    min-height: 4.35em;
    margin: 0.35rem 0 1rem;
}
.guild-card-meta {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    color: var(--ink-mute);
    font-size: 0.78rem;
    font-weight: 700;
    margin-top: auto;
    padding-top: 0.75rem;
    border-top: 1px solid var(--line);
}
.guild-detail { background: var(--bg); padding-bottom: 4rem; }

.guild-header-shell {
    max-width: 1120px;
    margin: 1.5rem auto 0;
    padding: 0 1.5rem;
}
.guild-cover-card {
    position: relative;
    box-shadow: 0 10px 28px rgba(26,24,21,0.10);
    background: transparent;
}
.guild-cover {
    position: relative;
    aspect-ratio: 16 / 6;
    min-height: 220px;
    border-radius: 16px;
    border: 1px solid var(--line);
    overflow: hidden;
    background: linear-gradient(135deg, #20251f, #6b2c2c);
    background-size: cover;
    background-position: center;
}
.guild-cover-edit-btn {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.95rem;
    border-radius: 12px;
    background: rgba(26, 33, 27, 0.85);
    color: #fff;
    text-decoration: none;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 8px 20px rgba(0,0,0,0.25);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: transform 0.18s, background 0.18s;
}
.guild-cover-edit-btn:hover { background: rgba(20,28,22,0.95); transform: translateY(-1px); }
.guild-cover-edit-btn svg { flex-shrink: 0; }

.guild-id-bar {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 16px;
    margin-top: 0.75rem;
    padding: 1rem 1.25rem 1rem 175px;
    min-height: 96px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1.1rem;
    align-items: center;
}
.guild-id-avatar {
    position: absolute;
    left: 1.25rem;
    top: -64px;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    border: 4px solid var(--surface);
    background: var(--surface-elevated);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 22px rgba(0,0,0,0.18);
    z-index: 4;
}
.guild-id-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.guild-id-avatar span {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 3.4rem;
    font-weight: 900;
    color: var(--burgundy);
}
.guild-id-text { min-width: 0; }
.guild-id-text h1 {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(1.6rem, 3.2vw, 2.4rem);
    color: var(--ink);
    line-height: 1.15;
}
.guild-id-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: #e6f4ea;
    color: #1f7a3a;
}
.guild-id-text p {
    margin: 0.2rem 0 0;
    color: var(--ink-mute);
    font-size: 0.95rem;
}
.guild-id-text p .dot { margin: 0 0.4rem; opacity: 0.7; }
.guild-id-tagline { margin-top: 0.25rem !important; color: var(--ink-soft) !important; }
.guild-id-actions { display: flex; gap: 0.5rem; align-items: center; }

.guild-header-shell .content-back-link-wrap { margin: 0 0 0.6rem; }
.guild-header-shell .content-back-link {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    background: var(--surface-elevated);
    border: 1px solid var(--line);
    color: var(--ink-soft);
    text-decoration: none;
    font-weight: 700;
    font-size: 0.85rem;
    transition: background 0.16s, color 0.16s, border-color 0.16s;
}
.guild-header-shell .content-back-link:hover {
    background: var(--ink);
    color: #fff;
    border-color: var(--ink);
}

.guild-empty {
    padding: 1.5rem 1rem;
    text-align: center;
    border: 1px dashed var(--line);
    border-radius: 12px;
    background: var(--surface-elevated);
    display: grid;
    gap: 0.6rem;
    justify-items: center;
}
.guild-empty p { margin: 0; }
.guild-empty-mini {
    padding: 0.85rem;
    border-radius: 10px;
}
.btn-link {
    background: transparent;
    border: none;
    color: var(--burgundy);
    font-weight: 700;
    cursor: pointer;
    padding: 0;
    font-size: 0.9rem;
    text-decoration: underline;
}
.btn-link:hover { color: var(--ink); }
.guild-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface-elevated);
    color: var(--ink);
    padding: 0.42rem 0.72rem;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
}
.guild-action-btn:hover {
    border-color: var(--gold);
    color: var(--burgundy);
}

.guild-post-form[hidden],
.guild-inline-form[hidden],
.guild-stack-form[hidden],
.guild-collapsible-form[hidden] { display: none !important; }

.guild-collapsible-form {
    background: var(--surface-elevated);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 0.85rem;
    margin-bottom: 0.85rem;
    animation: guildSlideDown 0.18s ease;
}
.guild-collapsible-actions { display: flex; gap: 0.5rem; justify-content: flex-end; margin-top: 0.3rem; }
@keyframes guildSlideDown { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.guild-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.guild-modal[hidden] { display: none; }
.guild-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 18, 14, 0.7);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}
.guild-modal-card {
    position: relative;
    width: min(640px, 100%);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border-radius: 18px;
    box-shadow: 0 25px 60px rgba(0,0,0,0.45);
    overflow: hidden;
    animation: guildModalIn 0.18s ease;
}
@keyframes guildModalIn { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }
.guild-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--line);
}
.guild-modal-head h3 {
    margin: 0;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.4rem;
    color: var(--ink);
}
.guild-modal-close {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: transparent;
    border: none;
    font-size: 1.6rem;
    line-height: 1;
    color: var(--ink-soft);
    cursor: pointer;
}
.guild-modal-close:hover { background: var(--surface-elevated); color: var(--ink); }
.guild-modal-body { padding: 1.25rem; overflow-y: auto; }
.guild-modal-hint { margin: 0.6rem 0 0; font-size: 0.85rem; }
.guild-modal-foot {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
    padding: 0.85rem 1.25rem;
    border-top: 1px solid var(--line);
    background: var(--surface-elevated);
}
.upload-dropzone-photo {
    aspect-ratio: auto;
    min-height: 180px;
    padding: 1.5rem 1rem;
    border-width: 2px;
}
.upload-dropzone-photo .upload-dropzone-content { gap: 0.4rem; }

.guild-photo-queue { display: grid; gap: 0.5rem; margin-top: 0.85rem; }
.guild-photo-queue-row {
    display: grid;
    grid-template-columns: 56px 1fr auto;
    gap: 0.75rem;
    align-items: center;
    padding: 0.5rem;
    background: var(--surface-elevated);
    border: 1px solid var(--line);
    border-radius: 10px;
}
.guild-photo-queue-thumb {
    width: 56px; height: 56px;
    background: var(--line);
    background-size: cover;
    background-position: center;
    border-radius: 8px;
    flex-shrink: 0;
}
.guild-photo-queue-meta { display: grid; gap: 0.25rem; min-width: 0; }
.guild-photo-queue-meta strong {
    color: var(--ink);
    font-size: 0.9rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.guild-photo-queue-meta small { color: var(--ink-mute); font-size: 0.78rem; }
.guild-photo-queue-meta input {
    margin-top: 0.2rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0.35rem 0.55rem;
    font: inherit;
    font-size: 0.85rem;
}
.guild-photo-queue-status {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink-mute);
}
.guild-photo-queue-status.is-ok { color: #1f7a3a; }
.guild-photo-queue-status.is-error { color: #b53a3a; }

.guild-photo-grid figure { margin: 0; }
.guild-photo-grid .gallery-photo-tile-wrap {
    position: relative;
    aspect-ratio: 1;
    border-radius: 12px;
    overflow: hidden;
    background: var(--surface-elevated);
}
.guild-photo-grid .gallery-photo-tile {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 0;
    overflow: hidden;
}
.guild-photo-grid .gallery-photo-tile img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.guild-photo-grid .gallery-photo-like {
    position: absolute;
    bottom: 0.5rem;
    right: 0.5rem;
    z-index: 2;
    max-width: calc(100% - 1rem);
}
.guild-photo-grid .gallery-photo-like .like-popover {
    right: 0;
    left: auto;
}
.guild-photo-grid .gallery-photo-like .like-popover::after {
    right: 22px;
    left: auto;
}
.guild-photo-delete-form {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 3;
}
.guild-media-delete-btn {
    width: 1.8rem;
    height: 1.8rem;
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 999px;
    background: rgba(78, 31, 31, 0.88);
    color: white;
    cursor: pointer;
    font-size: 1.2rem;
    line-height: 1;
}
.guild-media-delete-btn:hover { background: #4d1f1f; }

.guild-member-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.75rem;
}
.guild-member-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: 12px;
    background: var(--surface-elevated);
    border: 1px solid var(--line);
    text-decoration: none;
    color: inherit;
    transition: transform 0.16s, box-shadow 0.16s;
}
.guild-member-card:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(26,24,21,0.08); }
.guild-member-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.guild-member-meta { display: grid; gap: 0.1rem; min-width: 0; }
.guild-member-meta strong { color: var(--ink); }
.guild-member-meta small { color: var(--ink-mute); }
.guild-member-role {
    margin-top: 0.2rem;
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background: rgba(107,44,44,0.1);
    color: var(--burgundy);
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.guild-member-role.role-owner { background: #f5e9bf; color: #6b521b; }
.guild-members-grid { grid-template-columns: 1fr; }

.guild-post-body { color: var(--ink-soft); }
.guild-post-body p { margin: 0.4rem 0; }
.guild-post-body p:first-child { margin-top: 0.45rem; }
.guild-post-body img { max-width: 100%; border-radius: 8px; }
.guild-post-body blockquote {
    margin: 0.5rem 0;
    padding: 0.4rem 0.8rem;
    border-left: 3px solid var(--burgundy);
    background: rgba(107,44,44,0.05);
    color: var(--ink-soft);
}

.guild-tabs {
    margin-top: 0.85rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}
.guild-tab {
    text-align: center;
    padding: 0.95rem 1rem;
    border-radius: 14px;
    background: var(--surface-elevated);
    border: 1px solid var(--line);
    color: var(--ink-soft);
    text-decoration: none;
    font-weight: 700;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.15rem;
    transition: background 0.18s, color 0.18s;
}
.guild-tab:hover { background: var(--surface); color: var(--ink); }
.guild-tab.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }
.guild-tab span {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.05rem 0.5rem;
    border-radius: 999px;
    background: rgba(255,255,255,0.18);
    font-size: 0.85em;
}
.guild-detail-grid {
    max-width: 1120px;
    margin: 1rem auto 0;
    padding: 0 1.5rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 1rem;
}
.guild-main,
.guild-side { display: grid; gap: 1rem; align-content: start; }
.guild-panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 1rem;
    box-shadow: 0 6px 18px rgba(26,24,21,0.05);
}
.guild-panel h2 { margin: 0; font-family: 'Cormorant Garamond', Georgia, serif; color: var(--ink); }
.guild-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.8rem; }
.guild-panel-head span { color: var(--ink-mute); font-size: 0.78rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; }
.guild-post-form,
.guild-inline-form,
.guild-stack-form { display: grid; gap: 0.55rem; margin-bottom: 1rem; }
.guild-post-form textarea,
.guild-inline-form input,
.guild-stack-form input,
.guild-stack-form textarea {
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 0.65rem 0.75rem;
    font: inherit;
}
.guild-stack-form textarea.simple-text-editor {
    min-height: 8rem;
    resize: vertical;
}
.guild-inline-form { grid-template-columns: 1fr 1fr auto; align-items: center; }
.guild-post-list { display: grid; gap: 0.8rem; }
.guild-post {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: 12px;
    background: var(--surface-elevated);
}
.guild-post .user-avatar { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; }
.guild-post small { display: block; color: var(--ink-mute); margin-top: 0.1rem; }
.guild-post p { margin: 0.45rem 0 0; color: var(--ink-soft); }
.guild-photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 0.55rem;
}
.guild-photo-grid > a { aspect-ratio: 1; border-radius: 12px; overflow: hidden; display: block; }
.guild-photo-grid > a > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.guild-mini-list { display: grid; gap: 0.65rem; }
.guild-mini-list a,
.guild-mini-list > div {
    display: block;
    padding: 0.65rem;
    border-radius: 10px;
    background: var(--surface-elevated);
    color: inherit;
    text-decoration: none;
}
.guild-mini-list strong { display: block; color: var(--ink); }
.guild-mini-list small { color: var(--ink-mute); }
.guild-mini-list .guild-file-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}
.guild-file-row a {
    display: block;
    flex: 1;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
    text-decoration: none;
}
.guild-facts { display: grid; gap: 0.35rem; color: var(--ink-mute); font-size: 0.86rem; }
@media (max-width: 900px) {
    .guilds-hero-inner,
    .guild-detail-grid,
    .guild-create-card { grid-template-columns: 1fr; }
    .guilds-hero-inner { align-items: flex-start; }
    .guild-id-bar {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 0.75rem;
        padding: 70px 1rem 1rem;
        margin-top: 1.5rem;
    }
    .guild-id-avatar {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: -60px;
        width: 120px;
        height: 120px;
    }
    .guild-id-text h1 { justify-content: center; }
    .guild-id-actions { justify-content: center; }
    .guild-inline-form { grid-template-columns: 1fr; }
    .guild-create-heading { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 560px) {
    .guild-create-shell { width: min(100% - 1.5rem, 1080px); }
    .guild-create-card,
    .guild-create-side { padding: 0.9rem; }
    .guild-create-actions { flex-direction: column-reverse; align-items: stretch; }
    .guild-create-actions .btn { width: 100%; }
}
.profile-forum-list { display: grid; gap: 0.65rem; }
.profile-forum-item {
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 0.8rem;
    align-items: center;
    padding: 0.65rem;
    border-radius: 12px;
    color: inherit;
    text-decoration: none;
}
.profile-forum-item:hover { background: var(--surface-elevated); }
.profile-forum-item > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0.45rem 0.6rem;
    border-radius: 999px;
    background: var(--ink);
    color: var(--gold);
    font-size: 0.72rem;
    font-weight: 800;
    text-align: center;
}
.profile-forum-item strong { display: block; color: var(--ink); }
.profile-forum-item small { color: var(--ink-mute); }

.report-inline-form {
    display: inline-flex;
    margin: 0;
}
.report-inline-form button {
    border: 0;
    background: transparent;
    color: var(--ink-mute);
    cursor: pointer;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.15rem 0;
}
.report-inline-form button:hover { color: var(--burgundy); }
.report-inline-form .report-flag-btn {
    display: inline-grid;
    place-items: center;
    width: 1.55rem;
    height: 1.55rem;
    padding: 0;
    border-radius: 999px;
    color: rgba(255,255,255,0.72);
    opacity: 0.64;
}
.report-inline-form .report-flag-btn:hover,
.report-inline-form .report-flag-btn:focus-visible {
    color: #fff;
    opacity: 1;
    background: rgba(0,0,0,0.16);
}
.gallery-photo-like .report-inline-form .report-flag-btn {
    color: rgba(255,255,255,0.78);
}
.topic-report-form { margin-top: 0.8rem; }

.guild-announcements-panel {
    border-top: 3px solid var(--gold);
}
.guild-announcement-list { display: grid; gap: 0.75rem; }
.guild-announcement {
    display: grid;
    gap: 0.65rem;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface-elevated);
}
.guild-announcement strong,
.guild-announcement small { display: block; }
.guild-announcement small { color: var(--ink-mute); margin-top: 0.15rem; }
.guild-post-head {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
}
.guild-post-head strong,
.guild-post-head small { display: block; }

.event-rsvp-panel { border-top: 3px solid var(--gold); }
.event-rsvp-counts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
    margin-bottom: 1rem;
}
.event-rsvp-counts span {
    display: grid;
    place-items: center;
    gap: 0.15rem;
    padding: 0.75rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface-elevated);
    color: var(--ink-mute);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 800;
}
.event-rsvp-counts strong {
    color: var(--ink);
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.8rem;
    line-height: 1;
}
.event-rsvp-form {
    display: grid;
    gap: 0.5rem;
}
.event-rsvp-form button {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    color: var(--ink);
    cursor: pointer;
    padding: 0.7rem 1rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.event-rsvp-form button.active,
.event-rsvp-form button:hover {
    background: var(--gold);
    border-color: var(--gold);
}
.event-recap-block {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--line);
}
.event-recap-block h2,
.event-discussion-card h2 { margin-bottom: 0.9rem; }
.event-discussion-card {
    width: min(1180px, calc(100% - 2rem));
    margin: 1.5rem auto 0;
}
.event-discussion-form {
    display: grid;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}
.event-comment-list {
    display: grid;
    gap: 1rem;
}
.event-comment {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 0.85rem;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface-elevated);
}
.event-comment-head {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
    margin-bottom: 0.45rem;
}
.event-comment-head small { color: var(--ink-mute); }

.profile-layout {
    width: min(1180px, calc(100% - 2rem));
    margin-left: auto;
    margin-right: auto;
    grid-template-columns: minmax(260px, 0.34fr) minmax(0, 1fr);
}
.profile-card {
    border-radius: 16px;
    box-shadow: 0 14px 34px rgba(26,24,21,0.06);
}
.profile-card h4 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 0;
    padding-bottom: 0;
}
.profile-tabs-card {
    border-radius: 18px;
}
.profile-tabs-bar {
    padding: 0.45rem;
    gap: 0.35rem;
    border-bottom: 1px solid var(--line);
}
.profile-tab {
    border-radius: 999px;
    border-bottom: 0;
    margin-bottom: 0;
    padding: 0.62rem 0.62rem;
    white-space: normal;
}
.profile-tab.active {
    background: var(--ink);
    color: var(--cream);
}
.profile-tab.active .count {
    background: var(--gold);
    color: var(--ink);
}

.profile-tabs-card .profile-tab .count {
    min-width: 1.15rem;
    min-height: 1.15rem;
    padding: 0.02rem 0.38rem;
    font-size: 0.68rem;
}
.profile-side-cards .profile-card {
    padding: 1.15rem;
}

.profile-vow-card {
    border-top: 3px solid var(--gold);
}
.profile-vow-mark {
    display: grid;
    gap: 0.15rem;
    padding: 0.85rem;
    border-radius: 14px;
    background: var(--ink);
    color: var(--cream);
    margin-bottom: 0.9rem;
}
.profile-vow-mark span {
    color: var(--gold);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 800;
}
.profile-vow-mark strong {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.35rem;
}
.profile-vow-card blockquote {
    margin: 0 0 0.85rem;
    color: var(--ink-soft);
    line-height: 1.65;
    font-style: italic;
}

/* Profile redesign inspired by compact social dashboards */
.profile-page {
    max-width: none;
    width: min(1240px, calc(100% - 2rem));
    padding: 1.35rem 0 4rem;
}
.profile-cover {
    min-height: 390px;
    height: auto;
    margin: 0;
    border-radius: 18px;
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(26,24,21,0.94), rgba(63,46,31,0.82) 48%, rgba(107,44,44,0.84)),
        radial-gradient(circle at 18% 10%, rgba(201,161,74,0.28), transparent 28rem);
    background-size: cover;
    box-shadow: 0 24px 70px rgba(26,24,21,0.18);
}
.profile-cover.has-cover::before,
.profile-cover::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(26,24,21,0.56);
}
.profile-cover-edit {
    top: 1rem;
    right: 1rem;
    z-index: 3;
    border-radius: 999px;
    padding: 0.58rem 0.8rem;
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 800;
    background: rgba(255,255,255,0.82);
    color: var(--ink);
    box-shadow: 0 10px 26px rgba(26,24,21,0.16);
}
.profile-cover-edit:hover {
    background: #fff;
    transform: none;
}
.profile-hero-panel {
    position: relative;
    z-index: 2;
    min-height: 390px;
    display: grid;
    grid-template-columns: 168px minmax(0, 1fr) minmax(400px, 0.64fr);
    grid-template-areas:
        "avatar identity stats"
        "avatar identity actions";
    align-items: end;
    gap: 1.2rem 1.7rem;
    padding: 7.8rem 2rem 1.35rem;
}
.profile-avatar-wrap {
    grid-area: avatar;
    position: relative;
    align-self: end;
}
.profile-avatar {
    width: 168px;
    height: 168px;
    margin: 0;
    border: 5px solid rgba(255,255,255,0.92);
    box-shadow: 0 18px 42px rgba(26,24,21,0.28);
}
.profile-online-dot {
    position: absolute;
    right: 0.6rem;
    bottom: 1.05rem;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #22e06f;
    border: 4px solid #fff;
    box-shadow: 0 0 0 4px rgba(34, 224, 111, 0.2), 0 6px 14px rgba(0,0,0,0.16);
}
.profile-header-avatar-wrap {
    position: relative;
    bottom: -1rem;
    display: inline-block;
    flex-shrink: 0;
}
.profile-header-avatar-wrap img {
    width: 8rem;
    height: 8rem;
    border-radius: 50%;
    object-fit: cover;
}
.profile-header-online-dot {
    position: absolute;
    right: 0.5rem;
    bottom: 0.5rem;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    background: #22e06f;
    border: 2px solid var(--surface);
    box-shadow: 0 0 0 3px rgba(34, 224, 111, 0.24), 0 4px 10px rgba(0,0,0,0.18);
}
.profile-status-warning {
    display: grid;
    gap: 0.15rem;
    max-width: 520px;
    margin-top: 0.75rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid rgba(255,255,255,0.22);
    border-left: 4px solid #c9a14a;
    border-radius: 8px;
    background: rgba(26,24,21,0.58);
    color: #fff;
}
.profile-status-warning strong {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.profile-status-warning span {
    color: rgba(255,255,255,0.82);
}
.account-danger-panel {
    max-width: 960px;
    margin: 1rem auto 0;
    border-color: #e2b5b5;
    background: #fff8f8;
}
.account-danger-panel .btn {
    justify-self: start;
    border-color: #8a2d2d;
    color: #8a2d2d;
}
.profile-id-name {
    grid-area: identity;
    align-self: end;
    color: #fff;
    text-shadow: 0 2px 18px rgba(0,0,0,0.35);
}
.profile-id-name h1 {
    font-family: inherit;
    font-size: clamp(2rem, 4vw, 3.45rem);
    font-weight: 900;
    letter-spacing: 0;
    color: #fff !important;
    margin-bottom: 0.3rem;
}
.profile-handle-line,
.profile-hero-groups,
.profile-hero-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.55rem;
}
.profile-handle-line {
    color: rgba(255,255,255,0.86);
    font-size: 0.95rem;
    font-weight: 700;
}
.profile-hero-groups {
    margin-top: 0.55rem;
}
.profile-hero-badge {
    display: inline-flex;
    align-items: center;
    min-height: 1.45rem;
    padding: 0.16rem 0.62rem;
    border-radius: 999px;
    background: var(--badge-color, var(--gold));
    color: #fff;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-shadow: none;
}
.profile-id-name p {
    max-width: 620px;
    margin: 0.8rem 0 0;
    color: rgba(255,255,255,0.92);
    line-height: 1.6;
    text-shadow: 0 2px 18px rgba(0,0,0,0.36);
}
.profile-hero-meta {
    margin-top: 0.85rem;
    gap: 0.75rem 1rem;
    color: rgba(255,255,255,0.84);
    font-size: 0.86rem;
}
.profile-hero-meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
}
.profile-hero-meta svg {
    width: 15px;
    height: 15px;
    opacity: 0.9;
}
.profile-id-meta {
    grid-area: stats;
    align-self: end;
    display: block;
    padding-left: 0;
    border-left: 0;
    transform: translateY(0.15rem);
}
.profile-id-stats {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    overflow: visible;
}
.profile-stat {
    min-width: 0;
    border-radius: 0;
    padding: 0.1rem 1rem 0.05rem;
    border-right: 1px solid rgba(255,255,255,0.34);
    cursor: default;
    transition: none;
}
.profile-stat:last-child { border-right: 0; }
.profile-stat:hover {
    background: transparent;
}
.profile-stat strong {
    font-size: clamp(1.55rem, 2.6vw, 2.2rem);
    color: #fff;
    font-weight: 400;
    text-shadow: 0 2px 10px rgba(0,0,0,0.38);
}
.profile-stat:hover strong {
    color: #fff;
}
.profile-stat small {
    margin-top: 0.32rem;
    color: rgba(255,255,255,0.78);
    font-size: 0.84rem;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    text-shadow: 0 2px 8px rgba(0,0,0,0.35);
}
.profile-id-actions {
    grid-area: actions;
    grid-column: auto;
    grid-row: auto;
    justify-content: flex-end;
    align-self: start;
    padding-top: 0.75rem;
}
.profile-id-actions .btn {
    min-width: 118px;
    border: 0;
    border-radius: 10px;
    box-shadow: 0 12px 26px rgba(0,0,0,0.18);
}
.profile-id-actions .btn-gold {
    background: var(--gold);
    color: var(--ink);
}
.profile-id-actions .btn-outline {
    background: rgba(255,255,255,0.9);
    color: var(--ink-soft);
}
.profile-subbar {
    width: min(1110px, calc(100% - 2rem));
    margin: -1.2rem auto 1.5rem;
    position: relative;
    z-index: 4;
    background: transparent;
    border-bottom: 0;
    box-shadow: none;
}
.profile-subbar-inner {
    display: flex;
    justify-content: center;
    gap: 0.35rem;
    flex-wrap: wrap;
    padding: 0.45rem;
    border: 1px solid rgba(232,226,214,0.9);
    border-radius: 16px;
    background: rgba(255,255,255,0.9);
    box-shadow: 0 16px 38px rgba(26,24,21,0.09);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.profile-subbar-section,
.profile-subbar-section + .profile-subbar-section {
    border-left: 0;
    margin-left: 0;
    padding-left: 0;
}
.profile-subbar-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 2.35rem;
    padding: 0.55rem 0.85rem;
    border-radius: 999px;
    color: var(--ink-soft);
    text-decoration: none;
    font-size: 0.84rem;
    font-weight: 800;
    text-transform: none;
    letter-spacing: 0;
}
.profile-subbar-link::after { content: none; }
.profile-subbar-link:hover {
    background: var(--surface-elevated);
    color: var(--burgundy);
}
.profile-subbar-link .count,
.profile-tab .count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35rem;
    min-height: 1.35rem;
}
.profile-subbar-edit {
    margin-right: 0;
}
.profile-layout {
    width: min(1180px, calc(100% - 1rem));
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 1.25rem;
    margin-top: 1.25rem;
}
.profile-side-cards {
    grid-column: 2;
    grid-row: 1;
    gap: 1rem;
}
.profile-main-col {
    grid-column: 1;
    grid-row: 1;
    gap: 1rem;
}
.profile-card {
    border-radius: 14px;
    padding: 1.15rem;
    box-shadow: 0 16px 42px rgba(26,24,21,0.07);
}
.profile-card h4 {
    font-family: inherit;
    font-size: 0.96rem;
    font-weight: 900;
    letter-spacing: 0;
    margin-bottom: 0.8rem;
}
.profile-tabs-bar {
    background: var(--surface-elevated);
}
.profile-photo-strip {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.65rem;
}
.profile-photo-strip-item {
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 10px;
}
.profile-photo-strip-item img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

@media (max-width: 1050px) {
    .profile-hero-panel {
        grid-template-columns: 140px minmax(0, 1fr);
        grid-template-areas:
            "avatar identity"
            "stats stats"
            "actions actions";
        padding: 5.5rem 1.25rem 1.25rem;
    }
    .profile-avatar {
        width: 140px;
        height: 140px;
    }
    .profile-id-actions {
        justify-content: flex-start;
    }
    .profile-id-meta {
        transform: none;
    }
    .profile-layout {
        grid-template-columns: 1fr;
    }
    .profile-side-cards,
    .profile-main-col {
        grid-column: auto;
        grid-row: auto;
    }
    .profile-main-col { order: 1; }
    .profile-side-cards { order: 2; }
}
@media (max-width: 700px) {
    .profile-page {
        width: min(100% - 1rem, 1240px);
        padding-top: 0.5rem;
    }
    .profile-cover {
        min-height: 560px;
        border-radius: 14px;
    }
    .profile-hero-panel {
        min-height: 560px;
        grid-template-columns: 1fr;
        grid-template-areas:
            "avatar"
            "identity"
            "stats"
            "actions";
        align-items: start;
        padding: 4.7rem 1rem 1rem;
    }
    .profile-avatar-wrap {
        justify-self: center;
    }
    .profile-id-name {
        text-align: center;
    }
    .profile-handle-line,
    .profile-hero-groups,
    .profile-hero-meta {
        justify-content: center;
    }
    .profile-id-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .profile-stat:nth-child(2) {
        border-right: 0;
    }
    .profile-stat:nth-child(-n+2) {
        border-bottom: 1px solid rgba(255,255,255,0.34);
        padding-bottom: 0.75rem;
        margin-bottom: 0.75rem;
    }
    .profile-id-actions {
        justify-content: center;
    }
    .profile-id-actions .btn {
        min-width: min(100%, 150px);
    }
    .profile-subbar {
        margin-top: -0.6rem;
        width: calc(100% - 1rem);
    }
    .profile-subbar-inner {
        justify-content: flex-start;
        overflow-x: auto;
        flex-wrap: nowrap;
    }
    .profile-subbar-section {
        width: auto;
        flex: 0 0 auto;
    }
    .profile-photo-strip {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.vow-ceremony-page,
.vow-wall-page {
    background: linear-gradient(180deg, #f7f3ea 0%, #fff 38%);
    padding: 2rem 0 4rem;
}
.vow-hero,
.vow-wall-hero,
.vow-layout,
.vow-wall-grid,
.vow-wall-summary,
.vow-complete-card {
    width: min(1180px, calc(100% - 2rem));
    margin-left: auto;
    margin-right: auto;
}
.vow-hero,
.vow-wall-hero {
    min-height: 420px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 2rem;
    align-items: end;
    border-radius: 24px;
    padding: 2rem;
    color: var(--cream);
    background: var(--ink);
    overflow: hidden;
}
.vow-wall-hero {
    display: block;
    min-height: 340px;
    padding-top: 5rem;
}
.vow-hero h1,
.vow-wall-hero h1 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 5.6rem;
    line-height: 0.95;
    margin: 0 0 0.75rem;
}
.vow-hero p,
.vow-wall-hero p {
    max-width: 680px;
    color: rgba(244,237,224,0.82);
    font-size: 1.08rem;
}
.vow-hero-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 1.25rem;
}
.vow-hero-card {
    align-self: end;
    display: grid;
    gap: 0.25rem;
    padding: 1.35rem;
    border: 1px solid rgba(244,237,224,0.18);
    border-radius: 18px;
    background: rgba(244,237,224,0.1);
    backdrop-filter: blur(14px);
}
.vow-hero-card span,
.vow-wall-summary strong {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 3.3rem;
    line-height: 0.9;
    color: var(--gold);
}
.vow-hero-card strong {
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.82rem;
}
.vow-hero-card small {
    color: rgba(244,237,224,0.72);
}
.vow-complete-card {
    display: grid;
    gap: 0.15rem;
    margin-top: 1rem;
    padding: 1rem 1.25rem;
    border: 1px solid #d9c894;
    border-radius: 16px;
    background: #fff9e8;
    color: var(--ink);
}
.vow-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 1.5rem;
    margin-top: 1.5rem;
    align-items: start;
}
.vow-main {
    display: grid;
    gap: 1rem;
}
.vow-panel,
.vow-side-card,
.vow-record-card,
.vow-empty,
.vow-wall-summary {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: 0 14px 34px rgba(26,24,21,0.06);
}
.vow-panel {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 1rem;
    padding: 1.35rem;
}
.vow-panel-number {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: var(--gold);
    color: var(--ink);
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.45rem;
    font-weight: 800;
}
.vow-panel h2,
.vow-side-card h2,
.vow-empty h2 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.8rem;
    margin: 0 0 0.45rem;
}
.vow-panel p,
.vow-side-card p,
.vow-empty p {
    color: var(--ink-soft);
    line-height: 1.7;
}
.vow-text-panel blockquote,
.vow-record-card blockquote {
    margin: 0;
    padding: 1.25rem;
    border-left: 4px solid var(--gold);
    background: #fbf7ef;
    color: var(--ink);
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.55rem;
    line-height: 1.45;
}
.vow-form {
    display: grid;
    gap: 1rem;
}
.vow-form label {
    display: grid;
    gap: 0.45rem;
    color: var(--ink-soft);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 800;
}
.vow-form input[type="text"],
.vow-form textarea {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 0.85rem 1rem;
    font: inherit;
    color: var(--ink);
    background: #fff;
}
.vow-visibility {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.65rem;
    border: 0;
    padding: 0;
}
.vow-visibility legend {
    grid-column: 1 / -1;
    color: var(--ink-soft);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 800;
    margin-bottom: 0.1rem;
}
.vow-form .vow-visibility label,
.vow-form .vow-check {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.85rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fbf7ef;
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.45;
}
.vow-form .vow-check {
    justify-content: flex-start;
    padding: 1rem;
}
.vow-form .vow-check input,
.vow-form .vow-visibility input {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    accent-color: var(--gold);
}
.vow-form .vow-check span {
    color: var(--ink-soft);
}
.vow-side {
    display: grid;
    gap: 1rem;
    position: sticky;
    top: 1rem;
}
.vow-side-card {
    padding: 1.2rem;
}
.vow-mini-list {
    display: grid;
    gap: 0.75rem;
}
.vow-mini-list a,
.vow-record-card header {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 0.75rem;
    align-items: center;
    color: inherit;
    text-decoration: none;
}
.vow-mini-list img,
.vow-record-card img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
}
.vow-mini-list strong,
.vow-mini-list small,
.vow-record-card strong,
.vow-record-card small {
    display: block;
}
.vow-mini-list small,
.vow-record-card small {
    color: var(--ink-mute);
}
.vow-wall-link {
    display: grid;
    gap: 0.2rem;
    margin-top: 1rem;
    padding: 0.95rem 1rem;
    border: 1px solid rgba(201, 161, 74, 0.38);
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(201, 161, 74, 0.14), rgba(244, 237, 224, 0.72));
    color: var(--ink);
    text-decoration: none;
}
.vow-wall-link span {
    color: var(--burgundy);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.vow-wall-link strong {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.4rem;
    line-height: 1.05;
}
.vow-wall-link:hover {
    border-color: var(--gold);
    box-shadow: 0 10px 22px rgba(201, 161, 74, 0.14);
}
.vow-wall-summary {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin-top: 1rem;
    padding: 1rem 1.25rem;
}
.vow-wall-summary span {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 800;
    color: var(--ink-soft);
}
.vow-wall-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}
.vow-record-card {
    display: grid;
    gap: 1rem;
    padding: 1.2rem;
}
.vow-record-card blockquote {
    font-size: 1.25rem;
}
.vow-record-card p {
    color: var(--ink-soft);
    line-height: 1.65;
}
.vow-empty {
    width: min(680px, calc(100% - 2rem));
    margin: 1.5rem auto 0;
    padding: 2rem;
    text-align: center;
}
@media (max-width: 900px) {
    .vow-hero,
    .vow-layout {
        grid-template-columns: 1fr;
    }
    .vow-side {
        position: static;
    }
    .vow-visibility {
        grid-template-columns: 1fr;
    }
    .vow-hero h1,
    .vow-wall-hero h1 {
        font-size: 3.6rem;
    }
}
@media (max-width: 620px) {
    .vow-panel {
        grid-template-columns: 1fr;
    }
    .vow-hero,
    .vow-wall-hero {
        min-height: 360px;
        padding: 1.2rem;
        border-radius: 18px;
    }
    .vow-hero h1,
    .vow-wall-hero h1 {
        font-size: 2.7rem;
    }
}
@media (max-width: 900px) {
    .events-hero-inner,
    .events-layout,
    .event-detail-layout,
    .event-form-grid { grid-template-columns: 1fr; }
    .events-sidebar,
    .event-detail-side { position: static; }
    .events-stats { grid-template-columns: 1fr; margin-top: 1rem; }
    .event-detail-hero { align-items: start; flex-direction: column; }
    .event-card { grid-template-columns: 78px minmax(0, 1fr); padding: 0.85rem; gap: 0.85rem; }
    .event-date-tile { width: 78px; height: 92px; border-radius: 16px; }
    .event-card-cover { margin: -0.85rem -0.85rem 0; }
    .event-when-grid { grid-template-columns: 1fr; }
}

/* ===== Community Hub ===== */
.community-hub-hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(26, 24, 21, 0.94), rgba(42, 65, 41, 0.88));
    color: var(--cream);
    padding: 3.8rem 0 2.8rem;
}

.community-hub-hero::after {
    content: "";
    position: absolute;
    right: calc(max(2rem, 8vw) + 200px);
    top: 20px;
    bottom: 20px;
    width: min(24vw, 240px);
    aspect-ratio: 1;
    max-height: calc(100% - 40px);
    background: url('../images/community-logo-watermark.png') center / contain no-repeat;
    opacity: 0.28;
    pointer-events: none;
}

.community-hub-hero-inner,
.community-hub-container {
    width: min(1180px, calc(100% - 3rem));
    margin-inline: auto;
}

.community-hub-hero-inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 2rem;
}

.community-hub-hero h1 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(2.6rem, 5.5vw, 5rem);
    line-height: 0.95;
    max-width: 760px;
    margin: 0.25rem 0 0.85rem;
}

.community-hub-hero p {
    max-width: 700px;
    color: rgba(244, 237, 224, 0.84);
    font-size: 1.05rem;
}

.community-hub-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.75rem;
}

.community-hub-actions .btn-outline {
    background: rgba(255,255,255,0.14);
    border-color: rgba(244,237,224,0.72);
    color: var(--cream);
    box-shadow: 0 10px 24px rgba(0,0,0,0.18);
}
.community-hub-actions .btn-outline:hover {
    background: var(--cream);
    border-color: var(--cream);
    color: var(--ink);
}

.community-hub-page {
    background: var(--bg);
    padding: 1.5rem 0 4rem;
}

.community-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
    gap: 0.75rem;
    margin-top: -2.3rem;
    position: relative;
    z-index: 2;
}

.community-stat-grid a,
.community-quick-grid a,
.community-panel,
.community-feed-item,
.community-blog-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 14px 34px rgba(26, 24, 21, 0.06);
}

.community-stat-grid a {
    display: grid;
    gap: 0.25rem;
    padding: 1rem;
    color: var(--ink);
    text-decoration: none;
}

.community-stat-grid strong {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 2rem;
    line-height: 1;
}

.community-stat-grid span {
    color: var(--ink-soft);
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.community-quick-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 1rem 0 1.5rem;
}

.community-quick-grid a {
    display: grid;
    align-content: start;
    gap: 0.35rem;
    min-height: 112px;
    padding: 1rem;
    color: var(--ink);
    text-decoration: none;
}

.community-quick-grid span {
    font-weight: 800;
    color: var(--green-deep);
}

.community-quick-grid small {
    color: var(--ink-soft);
    line-height: 1.35;
}

.community-hub-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    align-items: start;
    gap: 1.25rem;
}

.community-hub-main,
.community-hub-side,
.community-feed-list,
.community-mini-list,
.community-member-list,
.community-guild-stack {
    display: grid;
    gap: 1rem;
}

.community-panel {
    padding: 1.15rem;
}

.community-panel-large {
    padding: 1.25rem;
}

.community-panel-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.community-panel-head h2 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.85rem;
    line-height: 1;
    margin: 0.15rem 0 0;
}

.community-panel-head > a {
    color: var(--green-deep);
    font-size: 0.86rem;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}

.community-feed-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.9rem;
    padding: 1rem;
    box-shadow: none;
}

.community-feed-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    color: var(--ink-mute);
    font-size: 0.85rem;
}

.community-feed-item h3 {
    font-size: 1.05rem;
    line-height: 1.25;
    margin: 0.25rem 0;
}

.community-feed-item h3 a,
.community-blog-card h3 a,
.community-mini-list a,
.community-member-list a,
.community-guild-stack a {
    color: var(--ink);
    text-decoration: none;
}

.community-feed-item p,
.community-blog-card p {
    color: var(--ink-soft);
    line-height: 1.5;
    margin: 0 0 0.3rem;
}

.community-feed-item small {
    color: var(--ink-mute);
    font-weight: 700;
}

.community-blog-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem;
}

.community-blog-card {
    overflow: hidden;
    box-shadow: none;
}

.community-blog-card > div {
    padding: 1rem;
}

.community-blog-card small {
    color: var(--ink-mute);
    display: block;
    margin-bottom: 0.35rem;
}

.community-blog-card h3 {
    font-size: 1.1rem;
    line-height: 1.25;
    margin-bottom: 0.45rem;
}

.community-blog-cover {
    display: block;
    aspect-ratio: 16 / 7;
    background: var(--cream);
    overflow: hidden;
}

.community-blog-cover img,
.community-photo-strip img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.community-photo-strip {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.6rem;
}

.community-photo-strip a {
    aspect-ratio: 1;
    border-radius: 8px;
    overflow: hidden;
    background: var(--cream);
}

.community-two-col {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.community-mini-list a,
.community-member-list a,
.community-guild-stack a {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-elevated);
}

.community-mini-list strong,
.community-member-list strong,
.community-guild-stack strong {
    display: block;
    line-height: 1.2;
}

.community-mini-list small,
.community-member-list small,
.community-guild-stack small {
    color: var(--ink-mute);
}

.community-date-chip,
.community-file-chip,
.community-guild-stack > a > span {
    display: grid;
    place-items: center;
    width: 3rem;
    min-width: 3rem;
    height: 3rem;
    border-radius: 8px;
    background: var(--green-deep);
    color: var(--cream);
    font-weight: 800;
    font-size: 0.78rem;
    text-align: center;
    overflow: hidden;
}

.community-file-chip {
    background: var(--burgundy);
}

.community-guild-stack > a > span {
    background: var(--gold);
    color: var(--ink);
    font-size: 1.15rem;
}

.community-tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.community-tag-cloud a {
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--green-deep);
    background: var(--surface-elevated);
    padding: 0.4rem 0.7rem;
    text-decoration: none;
    font-size: 0.84rem;
    font-weight: 700;
}

@media (max-width: 1040px) {
    .community-stat-grid,
    .community-quick-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .community-hub-layout { grid-template-columns: 1fr; }
    .community-hub-side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
    .community-hub-hero-inner,
    .community-two-col,
    .community-blog-grid { grid-template-columns: 1fr; }
    .community-hub-actions { justify-content: flex-start; }
    .community-stat-grid,
    .community-quick-grid,
    .community-photo-strip,
    .community-hub-side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
    .community-hub-container,
    .community-hub-hero-inner { width: min(100% - 1.5rem, 1180px); }
    .community-stat-grid,
    .community-quick-grid,
    .community-photo-strip,
    .community-hub-side { grid-template-columns: 1fr; }
    .community-panel-head { align-items: flex-start; }
}

/* ===== Admin Forum Manager ===== */
.forum-admin-tabs {
    display: flex;
    gap: 0.5rem;
    margin: 0 0 1rem;
    border-bottom: 1px solid var(--line);
}
.forum-admin-tabs a {
    display: inline-flex;
    padding: 0.75rem 1rem;
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    color: var(--ink-soft);
    text-decoration: none;
    font-weight: 800;
}
.forum-admin-tabs a.is-active {
    background: var(--surface);
    color: var(--burgundy);
    border-color: var(--line);
}
.forum-admin-section[hidden] { display: none !important; }
.forum-admin-layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}
.admin-clean-form {
    display: grid;
    gap: 0.8rem;
}
.admin-clean-form label,
.forum-admin-edit-row label {
    display: grid;
    gap: 0.35rem;
    font-weight: 800;
    color: var(--ink);
}
.admin-clean-form input,
.admin-clean-form select,
.admin-clean-form textarea,
.forum-admin-edit-row input,
.forum-admin-edit-row select,
.forum-admin-edit-row textarea,
.forum-permission-matrix select {
    width: 100%;
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-elevated);
    color: var(--ink);
    padding: 0.62rem 0.7rem;
    font: inherit;
}
.forum-structure-card {
    display: grid;
    gap: 0.85rem;
}
.forum-admin-category,
.forum-admin-forum {
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
    overflow: hidden;
}
.forum-admin-category > summary,
.forum-admin-forum > summary {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    padding: 0.85rem 1rem;
    background: var(--surface-elevated);
}
.forum-admin-category > summary span,
.forum-admin-forum > summary small {
    margin-left: auto;
    color: var(--ink-mute);
    font-size: 0.82rem;
}
.forum-admin-edit-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)) auto auto;
    gap: 0.65rem;
    padding: 0.85rem;
    border-top: 1px solid var(--line);
}
.forum-admin-edit-row textarea,
.forum-admin-edit-row .form-actions {
    grid-column: 1 / -1;
}
.forum-admin-edit-forum {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.forum-admin-forum-list {
    display: grid;
    gap: 0.6rem;
    padding: 0.85rem;
}
.forum-admin-forum > summary span {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--ink);
    color: var(--gold);
    font-size: 0.78rem;
    font-weight: 900;
}
.forum-permission-matrix-card {
    display: grid;
    gap: 1rem;
}
.forum-permission-matrix-head {
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 1rem;
}
.forum-permission-matrix-head p {
    color: var(--ink-soft);
    margin: 0.25rem 0 0;
}
.forum-permission-scroll {
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: 10px;
}
.forum-permission-matrix {
    width: 100%;
    min-width: 980px;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--surface);
}
.forum-permission-matrix th,
.forum-permission-matrix td {
    padding: 0.7rem;
    border-bottom: 1px solid var(--line);
    border-right: 1px solid var(--line);
    vertical-align: middle;
}
.forum-permission-matrix thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--ink);
    color: var(--cream);
    text-align: left;
    white-space: nowrap;
}
.forum-permission-matrix tbody th {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--surface-elevated);
    width: 240px;
}
.forum-permission-matrix tbody th strong,
.forum-permission-matrix tbody th small {
    display: block;
}
.forum-permission-matrix tbody th small {
    color: var(--ink-mute);
    margin-top: 0.2rem;
    font-weight: 600;
}
.forum-guest-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
    font-weight: 800;
}
@media (max-width: 900px) {
    .forum-admin-layout,
    .forum-admin-edit-row,
    .forum-admin-edit-forum { grid-template-columns: 1fr; }
    .forum-permission-matrix-head { flex-direction: column; }
}

/* ===== Mobile Public Polish Pass ===== */
@media (max-width: 720px) {
    .community-hub-hero {
        padding: 2rem 0 1.35rem;
    }

    .community-hub-hero h1 {
        font-size: clamp(2.25rem, 13vw, 3.4rem);
        line-height: 0.96;
    }

    .community-hub-hero p {
        font-size: 0.98rem;
        line-height: 1.55;
    }

    .community-hub-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.65rem;
    }

    .community-hub-actions .btn {
        width: 100%;
        min-height: 44px;
        padding-inline: 0.7rem;
        font-size: 0.76rem;
        text-align: center;
    }

    .community-stat-grid {
        display: flex;
        gap: 0.6rem;
        overflow-x: auto;
        padding: 0 0.05rem 0.35rem;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
    }

    .community-stat-grid a {
        flex: 0 0 7.2rem;
        min-height: 78px;
        padding: 0.8rem 0.7rem;
        scroll-snap-align: start;
    }

    .community-stat-grid strong {
        font-size: 1.55rem;
    }

    .community-stat-grid span {
        font-size: 0.68rem;
        letter-spacing: 0.05em;
    }

    .community-quick-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.65rem;
        margin: 0.8rem 0 1rem;
    }

    .community-quick-grid a {
        min-height: 0;
        padding: 0.8rem;
        border-radius: 12px;
    }

    .community-quick-grid small {
        display: none;
    }

    .community-panel,
    .community-panel-large {
        padding: 0.95rem;
        border-radius: 14px;
    }

    .community-panel-head {
        align-items: center;
        margin-bottom: 0.75rem;
    }

    .community-panel-head h2 {
        font-size: 1.45rem;
    }

    .community-feed-item {
        grid-template-columns: 38px minmax(0, 1fr);
        padding: 0.8rem;
        gap: 0.7rem;
    }

    .community-feed-item .user-avatar,
    .community-member-list .user-avatar {
        width: 38px;
        height: 38px;
    }

    .community-feed-item p,
    .community-blog-card p {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .community-photo-strip {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .community-hub-side {
        grid-template-columns: 1fr;
    }

    .community-member-list a,
    .community-guild-stack a,
    .community-mini-list a {
        padding: 0.65rem;
    }

    .guild-header-shell {
        margin-top: 0.85rem;
        padding: 0 0.75rem;
        overflow: hidden;
    }

    .guild-cover-card {
        border-radius: 16px;
        overflow: hidden;
    }

    .guild-cover {
        aspect-ratio: 16 / 9;
        min-height: 0;
        border-radius: 16px;
    }

    .guild-cover-edit-btn {
        top: 0.7rem;
        right: 0.7rem;
        width: 44px;
        height: 44px;
        padding: 0;
        justify-content: center;
        border-radius: 14px;
    }

    .guild-cover-edit-btn span {
        display: none;
    }

    .guild-id-bar {
        margin-top: 0.65rem;
        padding: 62px 0.9rem 1rem;
        border-radius: 16px;
    }

    .guild-id-avatar {
        width: 108px;
        height: 108px;
        top: -54px;
    }

    .guild-id-text h1 {
        font-size: 2rem;
        line-height: 1.05;
        flex-wrap: wrap;
    }

    .guild-id-actions,
    .guild-id-actions form,
    .guild-id-actions .btn {
        width: 100%;
    }

    .guild-tabs,
    .guild-detail-grid {
        padding-inline: 0;
    }

    .guild-tabs {
        gap: 0.55rem;
    }

    .guild-tab {
        padding: 0.8rem 0.65rem;
        border-radius: 14px;
        font-size: 1.05rem;
    }

    .event-card-kicker {
        align-items: center;
    }

    .chat-page {
        padding: 0.9rem 0 1.5rem;
    }

    .chat-container {
        padding: 0 0.75rem;
        gap: 0.75rem;
    }

    .chat-page .chat-main {
        min-height: 560px;
        height: min(690px, calc(100vh - 150px));
        border-radius: 16px;
    }

    .chat-room-header {
        padding: 0.85rem;
    }

    .chat-room-header h1 {
        font-size: 1.45rem;
    }

    .chat-page .chat-stream {
        padding: 0.8rem;
    }

    .chat-page .message-row {
        max-width: 82%;
    }

    .chat-page .thread-composer {
        gap: 0.4rem;
        padding: 0.65rem;
    }

    .chat-page .composer-attach {
        width: 42px;
        height: 42px;
    }

    .chat-page .thread-composer textarea {
        min-width: 0;
        min-height: 42px;
        padding: 0.62rem 0.85rem;
        font-size: 0.95rem;
        line-height: 1.25;
    }

    .chat-page .composer-send {
        min-height: 42px;
        padding: 0.55rem 0.78rem;
        font-size: 0.72rem;
        letter-spacing: 0.12em;
    }

    .member-filters {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.55rem;
    }

    .member-filters .btn {
        grid-column: 1 / -1;
        width: 100%;
    }

    .member-grid {
        grid-template-columns: 1fr;
        gap: 0.65rem;
    }

    .member-card {
        grid-template-columns: 48px minmax(0, 1fr) auto;
        align-items: center;
        gap: 0.2rem 0.7rem;
        padding: 0.75rem;
        border-radius: 14px;
    }

    .member-avatar-wrap,
    .member-card .user-avatar {
        width: 48px;
        height: 48px;
    }

    .member-card > strong,
    .member-card > small,
    .member-card .group-badges,
    .member-card .member-stats {
        grid-column: 2;
    }

    .member-card > small:last-child {
        grid-column: 3;
        grid-row: 1 / span 3;
        align-self: center;
        max-width: 4.8rem;
        color: var(--ink-mute);
        font-size: 0.7rem;
        text-align: right;
    }

    .member-card .group-badges {
        display: flex;
        flex-wrap: wrap;
        gap: 0.25rem;
    }

    .member-stats {
        gap: 0.45rem;
        font-size: 0.74rem;
    }

    .profile-page {
        width: 100%;
        padding: 0 0 2.5rem;
    }

    .profile-cover {
        min-height: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .profile-hero-panel {
        min-height: 0;
        padding: 5.1rem 1rem 1.05rem;
        gap: 0.75rem;
    }

    .profile-cover-edit {
        top: 0.75rem;
        right: 0.75rem;
        padding: 0.45rem 0.7rem;
        font-size: 0.76rem;
    }

    .profile-avatar {
        width: 112px;
        height: 112px;
        border-width: 4px;
    }

    .profile-online-dot {
        width: 18px;
        height: 18px;
        right: 0.35rem;
        bottom: 0.7rem;
    }

    .profile-id-name h1 {
        font-size: clamp(2rem, 12vw, 2.8rem);
        line-height: 0.95;
        margin-bottom: 0.15rem;
    }

    .profile-hero-groups {
        gap: 0.35rem;
    }

    .profile-hero-badge {
        min-height: 1.35rem;
        padding: 0.16rem 0.5rem;
        font-size: 0.64rem;
    }

    .profile-id-stats {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0;
        padding: 0.7rem 0;
        border-top: 1px solid rgba(255,255,255,0.24);
        border-bottom: 1px solid rgba(255,255,255,0.24);
    }

    .profile-stat,
    .profile-stat:nth-child(-n+2) {
        padding: 0 0.35rem;
        margin: 0;
        border-bottom: 0;
        border-right: 1px solid rgba(255,255,255,0.22);
    }

    .profile-stat:nth-child(2) {
        border-right: 1px solid rgba(255,255,255,0.22);
    }

    .profile-stat strong {
        font-size: 1.45rem;
    }

    .profile-stat small {
        margin-top: 0.28rem;
        font-size: 0.62rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .profile-id-actions {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
    }

    .profile-id-actions .btn {
        width: 100%;
        min-width: 0;
        border-radius: 12px;
        box-shadow: 0 10px 22px rgba(0,0,0,0.14);
    }

    .profile-subbar {
        width: 100%;
        margin: 0;
        border-top: 1px solid var(--line);
        border-bottom: 1px solid var(--line);
        background: var(--surface);
    }

    .profile-subbar-inner {
        border: 0;
        border-radius: 0;
        box-shadow: none;
        padding: 0.45rem 0.75rem;
    }

    .profile-subbar-link {
        min-height: 38px;
        padding: 0.48rem 0.72rem;
        white-space: nowrap;
    }

    .profile-layout {
        width: min(100% - 1rem, 1180px);
        margin-top: 0.8rem;
        gap: 0.8rem;
    }

    .profile-card {
        padding: 0.95rem;
        border-radius: 14px;
        box-shadow: 0 8px 22px rgba(26,24,21,0.055);
    }

    .profile-card h4 {
        font-size: 0.92rem;
    }

    .profile-tabs-card {
        overflow: hidden;
    }

    .profile-tabs-bar {
        display: flex;
        overflow-x: auto;
        flex-wrap: nowrap;
        padding: 0.4rem;
        -webkit-overflow-scrolling: touch;
    }

    .profile-tab {
        flex: 0 0 auto;
        padding: 0.58rem 0.72rem;
        font-size: 0.82rem;
        white-space: nowrap;
    }

    .profile-tab-panel {
        padding: 0.95rem;
    }

    .profile-photo-strip {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.5rem;
    }

    .forum-page {
        padding: 1rem 0 2.5rem;
    }

    .forum-index-layout {
        grid-template-columns: 1fr;
    }

    .forum-presence-sidebar {
        position: static;
        order: -1;
        grid-template-columns: 1fr 1fr;
        gap: 0.75rem;
    }

    .forum-presence-card {
        border-radius: 14px;
        padding: 0.85rem;
    }

    .forum-presence-card.is-cantina,
    .forum-presence-card:last-child {
        grid-column: 1 / -1;
    }

    .forum-category-card,
    .forum-panel,
    .forum-topic-form,
    .forum-topic-list-wrap {
        border-radius: 16px;
    }

    .forum-row {
        grid-template-columns: 42px minmax(0, 1fr);
        gap: 0.75rem;
        padding: 0.9rem;
    }

    .forum-row-main p {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        font-size: 0.86rem;
    }

    .forum-row-stats,
    .forum-row-latest {
        grid-column: 1 / -1;
        padding-left: 0;
    }

    .forum-row-stats {
        display: flex;
        gap: 0.5rem;
    }

    .forum-row-stats span {
        min-width: 0;
        padding: 0.4rem 0.55rem;
        border-radius: 999px;
        font-size: 0.74rem;
    }

    .forum-row-latest {
        margin-top: 0.1rem;
        padding: 0.62rem 0.72rem;
        border: 1px solid rgba(232, 226, 214, 0.86);
        border-radius: 13px;
        background: linear-gradient(135deg, rgba(251, 247, 239, 0.92), rgba(255, 255, 255, 0.82));
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.74), 0 8px 18px rgba(26,24,21,0.045);
    }

    .forum-topic-list-wrap {
        margin-top: 0.75rem;
    }

    .forum-topic-row,
    .forum-view-page.is-admin .forum-topic-row {
        grid-template-columns: 42px minmax(0, 1fr) auto;
        gap: 0.65rem;
        padding: 0.95rem;
    }

    .forum-topic-avatar-stack {
        width: 42px;
        min-height: 42px;
    }

    .forum-topic-avatar {
        width: 34px;
        height: 34px;
        top: 2px;
    }

    .forum-topic-avatar.is-last {
        left: 16px;
        top: 18px;
        width: 24px;
        height: 24px;
    }

    .forum-topic-title {
        font-size: 0.98rem;
        line-height: 1.28;
    }

    .forum-topic-byline {
        font-size: 0.78rem;
    }

    .forum-topic-unread-pill {
        min-height: 1.35rem;
        padding: 0.12rem 0.45rem;
        font-size: 0.62rem;
    }

    .forum-topic-stats,
    .forum-topic-last {
        grid-column: 2 / -1;
        font-size: 0.76rem;
    }

    .forum-topic-stats {
        gap: 0.45rem;
        color: var(--ink-soft);
    }

    .forum-topic-last {
        display: flex;
        justify-content: space-between;
        gap: 0.55rem;
        padding-top: 0.35rem;
        border-top: 1px solid rgba(232,226,214,0.72);
    }

    .forum-topic-checkbox {
        grid-column: 3;
        justify-self: end;
    }

    .topic-hero {
        padding: 1.6rem 0 1.45rem;
    }

    .topic-breadcrumb {
        gap: 0.35rem;
        font-size: 0.75rem;
    }

    .topic-hero h1 {
        font-size: clamp(1.85rem, 9vw, 2.8rem);
    }

    .topic-hero-actions .btn {
        width: 100%;
    }

    .forum-post-card {
        border-radius: 18px;
        overflow: hidden;
    }

    .forum-post-author {
        display: grid;
        grid-template-columns: 64px minmax(0, 1fr) minmax(118px, auto);
        align-items: center;
        justify-items: start;
        gap: 0.65rem 0.85rem;
        padding: 0.9rem;
        text-align: left;
    }

    .forum-post-avatar-wrap {
        grid-row: 1 / span 3;
        margin: 0;
    }

    .forum-post-author img {
        width: 64px;
        height: 64px;
    }

    .forum-post-author strong {
        grid-column: 2;
        margin-top: 0;
        font-size: 1rem;
    }

    .forum-post-author .group-badges,
    .forum-post-author .jedi-position-badges-forum,
    .forum-post-author-positions {
        flex-direction: row !important;
        align-items: center;
        justify-content: flex-start;
        gap: 0.35rem;
        margin: 0.05rem 0 0;
    }

    .forum-post-author .group-badges {
        grid-column: 2;
    }

    .forum-post-author-positions {
        grid-column: 3;
        grid-row: 1 / span 2;
        justify-self: end;
        align-self: end;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .forum-post-signature-position {
        display: none;
    }

    .forum-post-signature-position-only {
        display: none;
    }

    .forum-vow-badge {
        grid-column: 3;
        justify-self: end;
        margin: 0;
    }

    .forum-post-author small {
        grid-column: 3;
        justify-self: end;
        display: inline-flex;
        align-items: center;
        min-height: 1.55rem;
        padding: 0.18rem 0.58rem;
        border: 1px solid rgba(201, 161, 74, 0.34);
        border-radius: 999px;
        background: rgba(255, 249, 232, 0.86);
        color: var(--ink-soft);
        font-size: 0.64rem;
        font-weight: 900;
        letter-spacing: 0.08em;
        line-height: 1;
        box-shadow: 0 5px 12px rgba(26,24,21,0.045);
    }

    .forum-post-body {
        padding: 0.95rem;
    }

    .forum-post-meta {
        align-items: flex-start;
        gap: 0.6rem;
    }

    .forum-post-meta-left {
        gap: 0.25rem;
    }

    .forum-post-date,
    .forum-post-edited {
        font-size: 0.78rem;
    }

    .forum-post-content {
        font-size: 1rem;
        line-height: 1.7;
    }

    .forum-post-actions {
        gap: 0.45rem;
    }
}

/* Jedi Positions */
.jedi-positions-shell {
    max-width: 1180px;
    margin: 0 auto;
    padding: 3rem 2rem 4rem;
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(320px, 0.8fr);
    gap: 2rem;
    align-items: start;
}
.jedi-positions-shell-public {
    grid-template-columns: minmax(0, 1fr);
}
.jedi-position-list {
    display: grid;
    gap: 1rem;
}
.jedi-position-card {
    display: flex;
    justify-content: space-between;
    gap: 1.25rem;
    align-items: start;
    padding: 1.35rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
    box-shadow: 0 10px 28px rgba(26,24,21,0.05);
}
.jedi-position-card h2 {
    margin: 0 0 0.45rem;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.65rem;
    color: var(--ink);
}
.jedi-position-description {
    color: var(--ink-soft);
    line-height: 1.65;
}
.jedi-position-description p:last-child {
    margin-bottom: 0;
}
.jedi-position-more {
    margin-top: 1rem;
    border: 1px solid rgba(201, 161, 74, 0.34);
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(244, 237, 224, 0.54), rgba(255, 255, 255, 0.86));
    overflow: hidden;
}
.jedi-position-more summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    padding: 0.78rem 0.95rem;
    color: var(--burgundy);
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    list-style: none;
    text-transform: uppercase;
}
.jedi-position-more summary::-webkit-details-marker {
    display: none;
}
.jedi-position-more summary i {
    position: relative;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: var(--surface);
    border: 1px solid rgba(201, 161, 74, 0.4);
    flex: 0 0 auto;
}
.jedi-position-more summary i::before,
.jedi-position-more summary i::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0.72rem;
    height: 2px;
    border-radius: 999px;
    background: var(--gold);
    transform: translate(-50%, -50%);
    transition: transform 0.16s ease, opacity 0.16s ease;
}
.jedi-position-more summary i::after {
    transform: translate(-50%, -50%) rotate(90deg);
}
.jedi-position-more[open] summary {
    border-bottom: 1px solid rgba(201, 161, 74, 0.25);
}
.jedi-position-more[open] summary i::after {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(0);
}
.jedi-position-more-body {
    padding: 0.95rem;
    color: var(--ink-soft);
    line-height: 1.65;
}
.jedi-position-more-body p:last-child,
.jedi-position-more-body ul:last-child,
.jedi-position-more-body ol:last-child {
    margin-bottom: 0;
}
.jedi-position-more-body ul,
.jedi-position-more-body ol {
    padding-left: 1.25rem;
}
.jedi-position-apply {
    position: sticky;
    top: 1rem;
    padding: 1.5rem;
    border: 1px solid var(--line);
    border-top: 3px solid var(--gold);
    border-radius: 14px;
    background: var(--surface);
}
.jedi-position-apply h2 {
    margin: 0 0 1rem;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.7rem;
}
.jedi-position-apply .flash {
    padding: 0.85rem 1rem;
    border-radius: 10px;
    border: 1px solid var(--line);
    margin-bottom: 1rem;
    font-weight: 700;
}
.jedi-position-apply .flash.success {
    background: #eef7ed;
    border-color: #b9d7b6;
    color: #2f5a31;
}
.jedi-position-apply .flash.error {
    background: #fff1f1;
    border-color: #e6b9b9;
    color: #7a2d2d;
}
.jedi-position-apply .muted {
    color: var(--ink-mute);
}
.jedi-position-form {
    display: grid;
    gap: 1rem;
}
.jedi-position-form label {
    display: grid;
    gap: 0.4rem;
    color: var(--ink);
    font-weight: 800;
}
.jedi-position-form label small {
    color: var(--ink-mute);
    font-weight: 600;
}
.jedi-position-form input,
.jedi-position-form select,
.jedi-position-form textarea {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 0.75rem 0.85rem;
    font: inherit;
    color: var(--ink);
    background: var(--surface-elevated);
}
.jedi-position-check {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-weight: 700;
    color: var(--ink-soft);
}
.jedi-position-check input {
    width: auto;
}

.cookie-consent {
    position: fixed;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    z-index: 2000;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    width: min(980px, calc(100% - 2rem));
    margin: 0 auto;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: 0 18px 48px rgba(26, 24, 21, 0.18);
}
.cookie-consent[hidden] {
    display: none;
}
.cookie-consent__copy {
    display: grid;
    gap: 0.25rem;
}
.cookie-consent__copy strong {
    color: var(--ink);
}
.cookie-consent__copy p {
    margin: 0;
    color: var(--ink-soft);
    line-height: 1.45;
}
.cookie-consent__copy a {
    color: var(--burgundy);
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 0.18em;
}
.cookie-consent__copy a:hover {
    color: var(--gold);
}
.cookie-consent__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.6rem;
    flex-wrap: wrap;
}
@media (max-width: 900px) {
    .jedi-positions-shell {
        grid-template-columns: 1fr;
        padding: 2rem 1.25rem 3rem;
    }
    .jedi-position-apply {
        position: static;
    }
    .jedi-position-card {
        flex-direction: column;
    }
    .cookie-consent {
        grid-template-columns: 1fr;
        align-items: stretch;
    }
    .cookie-consent__actions {
        justify-content: flex-start;
    }
}

/* ============================================================
   MOBILE POLISH PASS
   Desktop rules above remain the source of truth. These overrides
   only target tablet/phone widths.
   ============================================================ */

@media (max-width: 968px) {
    html,
    body {
        max-width: 100%;
        overflow-x: hidden;
    }

    body.mobile-nav-open { overflow: hidden; }

    .topbar { display: none; }

    .site-announcement-inner {
        grid-template-columns: auto minmax(0, 1fr);
        padding: 0.85rem 1rem;
        gap: 0.75rem;
    }

    .site-announcement-icon {
        width: 38px;
        height: 38px;
    }

    .site-announcement-copy {
        display: grid;
        gap: 0.2rem;
    }

    .site-announcement-copy strong + span {
        padding-left: 0;
        padding-top: 0.45rem;
        border-top: 2px solid rgba(255, 255, 255, 0.34);
    }

    .site-announcement-copy strong + span::before {
        content: none;
    }

    .site-announcement-copy strong {
        font-size: 1.08rem;
        white-space: normal;
    }

    .site-announcement-copy span {
        font-size: 0.9rem;
        line-height: 1.35;
    }

    .site-announcement-link {
        grid-column: 1 / -1;
        width: 100%;
        min-height: 42px;
    }

    header.site-header {
        min-height: 66px;
        position: sticky;
        top: 0;
        box-shadow: 0 8px 24px rgba(26, 24, 21, 0.08);
    }

    .header-container {
        height: 66px;
        padding: 0 1rem;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0.75rem;
    }

    .logo {
        height: 66px;
        min-width: 0;
        gap: 0.6rem;
        position: relative;
        z-index: 120;
    }

    .logo img {
        width: 52px;
        height: 52px;
        flex: 0 0 auto;
    }

    .logo-text {
        min-width: 0;
        font-size: clamp(1.35rem, 6vw, 1.9rem);
        line-height: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .header-right {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 0.45rem;
    }

    .header-right > :not(.mobile-toggle) {
        display: none !important;
    }

    .mobile-toggle {
        display: inline-flex;
        position: relative;
        z-index: 120;
        width: 44px;
        height: 44px;
        border-radius: 12px;
        background: var(--surface-elevated);
        border-color: var(--line);
        box-shadow: 0 4px 12px rgba(26, 24, 21, 0.06);
    }

    .mobile-toggle[aria-expanded="true"] {
        background: var(--ink);
        border-color: var(--ink);
    }

    .mobile-toggle[aria-expanded="true"] span {
        background: transparent;
    }

    .mobile-toggle[aria-expanded="true"] span::before,
    .mobile-toggle[aria-expanded="true"] span::after {
        top: 0;
        background: var(--cream);
    }

    .mobile-toggle[aria-expanded="true"] span::before {
        transform: rotate(45deg);
    }

    .mobile-toggle[aria-expanded="true"] span::after {
        transform: rotate(-45deg);
    }

    .nav-row {
        height: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    .nav-row .nav {
        display: none !important;
    }

    .nav-row .nav.open {
        display: flex;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100dvh;
        max-width: none;
        margin: 0;
        padding: calc(76px + env(safe-area-inset-top)) 1rem max(2rem, env(safe-area-inset-bottom));
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 0.7rem;
        overflow-y: auto;
        background:
            linear-gradient(180deg, rgba(255,255,255,0.98), rgba(250,247,242,0.98)),
            var(--surface);
        box-shadow: none;
        z-index: 90;
        animation: mobileNavIn 0.18s ease-out;
        -webkit-overflow-scrolling: touch;
    }

    body.mobile-nav-open::before {
        content: none;
    }

    @keyframes mobileNavIn {
        from { transform: translateY(-8px); opacity: 0; }
        to { transform: translateX(0); opacity: 1; }
    }

    .mobile-nav-panel {
        display: grid;
        gap: 0.75rem;
        padding-bottom: 0.4rem;
    }

    .mobile-nav-search input {
        width: 100%;
        min-height: 44px;
        border: 1px solid var(--line);
        border-radius: 12px;
        background: white;
        color: var(--ink);
        font: inherit;
        font-size: 1rem;
        padding: 0.7rem 0.85rem;
        box-shadow: 0 6px 18px rgba(26, 24, 21, 0.05);
    }

    .mobile-nav-search input:focus {
        outline: none;
        border-color: var(--gold);
        box-shadow: 0 0 0 3px rgba(201, 161, 74, 0.16);
    }

    .mobile-nav-account,
    .mobile-nav-create,
    .mobile-nav-auth {
        border: 1px solid var(--line);
        border-radius: 14px;
        background: white;
        box-shadow: 0 8px 24px rgba(26, 24, 21, 0.06);
        overflow: hidden;
    }

    .mobile-nav-profile {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.9rem;
        color: var(--ink);
        text-decoration: none;
    }

    .mobile-nav-profile img {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        object-fit: cover;
        border: 2px solid var(--cream);
    }

    .mobile-nav-profile span {
        min-width: 0;
        display: grid;
        gap: 0.1rem;
    }

    .mobile-nav-profile strong {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: var(--ink);
        font-size: 0.95rem;
    }

    .mobile-nav-profile small {
        color: var(--ink-mute);
        font-size: 0.78rem;
    }

    .mobile-nav-alerts {
        display: grid;
        grid-template-columns: 1fr 1fr;
        border-top: 1px solid var(--line);
    }

    .mobile-nav-alerts a {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 42px;
        padding: 0.65rem;
        color: var(--burgundy);
        font-size: 0.78rem;
        font-weight: 850;
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }

    .mobile-nav-alerts a + a {
        border-left: 1px solid var(--line);
    }

    .mobile-nav-create {
        padding: 0.85rem;
    }

    .mobile-nav-create > span {
        display: block;
        margin-bottom: 0.65rem;
        color: var(--ink-mute);
        font-size: 0.72rem;
        font-weight: 850;
        letter-spacing: 0.14em;
        text-transform: uppercase;
    }

    .mobile-nav-create > div {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }

    .mobile-nav-create a,
    .mobile-nav-auth .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 40px;
        border-radius: 999px;
        background: var(--surface-elevated);
        color: var(--ink);
        border: 1px solid var(--line);
        font-size: 0.78rem;
        font-weight: 850;
        letter-spacing: 0.07em;
        text-transform: uppercase;
    }

    .mobile-nav-create a:first-child {
        background: var(--gold);
        border-color: var(--gold);
    }

    .mobile-nav-auth {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.6rem;
        padding: 0.85rem;
    }

    .nav.open .nav-item {
        display: block;
        width: 100%;
        border: 1px solid var(--line);
        border-radius: 12px;
        background: white;
        overflow: visible;
        box-shadow: 0 6px 18px rgba(26, 24, 21, 0.045);
    }

    .nav.open .nav-item > a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative;
        min-height: 0;
        padding: 0.95rem 3.65rem 0.95rem 1rem;
        color: var(--ink);
        font-size: 0.86rem;
        font-weight: 850;
        letter-spacing: 0.12em;
        white-space: normal;
        overflow: visible;
    }

    .nav.open .nav-item.active > a {
        color: var(--burgundy);
        background: #fbf4e5;
    }

    .nav.open .nav-item.active > a::after {
        content: none;
    }

    .nav.open .caret {
        position: absolute;
        top: 50%;
        right: 0.85rem;
        display: grid;
        place-items: center;
        width: 34px;
        height: 34px;
        margin: 0;
        border-radius: 999px;
        background: var(--surface-elevated);
        color: var(--gold);
        font-size: 0;
        transform: translateY(-50%) !important;
        transition: transform 0.16s, background 0.16s, color 0.16s;
    }

    .nav.open .caret::before {
        content: '';
        width: 10px;
        height: 10px;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: rotate(45deg) translate(-1px, -1px);
    }

    .nav.open .mobile-expanded > a .caret {
        background: var(--gold);
        color: var(--ink);
        transform: translateY(-50%) rotate(180deg) !important;
    }

    .nav.open .dropdown,
    .nav.open .mega-menu {
        display: none;
        position: static;
        width: 100%;
        min-width: 0;
        opacity: 1;
        visibility: visible;
        transform: none;
        border: 0;
        border-top: 1px solid rgba(232, 226, 214, 0.8);
        border-radius: 0 0 12px 12px;
        box-shadow: none;
        background: #faf7f2;
        padding: 0;
        overflow: hidden;
    }

    .nav.open .mobile-expanded > .dropdown,
    .nav.open .mobile-expanded > .mega-menu {
        display: block;
    }

    .nav.open .dropdown a,
    .nav.open .mega-links a {
        display: block;
        width: 100%;
        box-sizing: border-box;
        padding: 0.78rem 1.15rem 0.78rem 1.45rem;
        color: var(--ink-soft);
        font-size: 0.9rem;
        font-weight: 650;
        line-height: 1.35;
        white-space: normal;
        border-top: 1px solid rgba(232, 226, 214, 0.55);
    }

    .nav.open .mega-inner {
        display: block !important;
        grid-template-columns: 1fr !important;
        gap: 0;
        width: 100%;
    }

    .nav.open .mega-feature-link {
        width: auto;
        margin: 0.75rem;
        border-radius: 14px;
        flex-direction: column;
        gap: 0.2rem;
    }

    .nav.open .mega-col {
        display: block !important;
        margin: 0;
        padding: 0;
        border-bottom: 1px solid rgba(232, 226, 214, 0.72);
        width: 100%;
        min-width: 0;
        max-width: none;
    }

    .nav.open .mega-col:last-child {
        border-bottom: 0;
    }

    .nav.open .mega-col-title {
        display: block;
        width: 100%;
        box-sizing: border-box;
        margin: 0;
        padding: 0.85rem 1.15rem;
        border: 0;
        color: var(--burgundy);
        font-family: Inter, system-ui, sans-serif;
        font-size: 0.78rem;
        font-weight: 850;
        letter-spacing: 0.1em;
        text-transform: uppercase;
    }

    .nav.open .mega-links {
        display: grid;
        width: 100%;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .nav.open .mega-links li {
        margin: 0;
        padding: 0;
    }

    main {
        min-width: 0;
    }

    .hero {
        padding: 3rem 1.15rem 3.5rem;
    }

    .hero::before {
        width: 100%;
        opacity: 0.72;
    }

    .hero-container {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1.5rem;
        width: 100%;
    }

    .hero-title {
        font-size: clamp(2.55rem, 13vw, 3.8rem);
        line-height: 1.02;
        letter-spacing: 0;
        overflow-wrap: anywhere;
    }

    .hero-subtitle {
        max-width: none;
        font-size: 1rem;
        line-height: 1.65;
        margin-bottom: 1.65rem;
    }

    .hero-actions {
        display: grid;
        gap: 0.75rem;
    }

    .hero-actions .btn {
        width: 100%;
        justify-content: center;
        text-align: center;
        min-height: 48px;
    }

    .hero-quote-card {
        padding: 1.4rem;
    }

    .page-header,
    .forum-hero,
    .events-hero,
    .guilds-hero,
    .holocron-hero,
    .kharis-hero,
    .vow-hero,
    .vow-wall-hero,
    .community-hub-hero {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .page-header-container,
    .section-container,
    .blog-container,
    .gallery-container,
    .guilds-container,
    .community-hub-container,
    .community-hub-hero-inner,
    .footer-container {
        width: min(100% - 2rem, 1180px);
        padding-left: 0;
        padding-right: 0;
    }

    .blog-container {
        margin-inline: auto;
    }

    .blog-card,
    .gallery-card,
    .forum-category-card,
    .forum-panel,
    .forum-topic-form,
    .quick-reply,
    .chat-main,
    .chat-sidebar {
        border-radius: 12px;
    }

    .blog-edit-layout,
    .blog-hub-layout,
    .chat-container,
    .messages-container,
    .holocron-layout,
    .events-layout,
    .community-hub-layout,
    .kharis-course-layout {
        grid-template-columns: 1fr !important;
    }

    .blog-edit-side,
    .page-sidebar,
    .kharis-lesson-nav {
        position: static !important;
    }

    .forum-row,
    .forum-topic-row,
    .post-manage-row,
    .gallery-manage-row,
    .event-row,
    .message-row {
        max-width: 100%;
    }
}

@media (max-width: 620px) {
    .page-title,
    .forum-view-hero h1,
    .topic-hero h1,
    .events-hero h1,
    .guilds-hero h1,
    .holocron-hero h1,
    .kharis-hero h1,
    .community-hub-hero h1 {
        font-size: clamp(2.15rem, 12vw, 3.25rem);
        line-height: 1.03;
        overflow-wrap: anywhere;
    }

    .page-subtitle,
    .forum-hero p,
    .forum-view-hero p,
    .events-hero p,
    .guilds-hero p,
    .holocron-hero p,
    .kharis-hero p,
    .community-hub-hero p {
        font-size: 0.98rem;
        line-height: 1.6;
    }

    .blog-page,
    .forum-page,
    .section {
        padding-top: 1.5rem;
        padding-bottom: 3rem;
    }

    .blog-container,
    .forum-page > .container,
    .forum-hero > .container,
    .guilds-container,
    .community-hub-container,
    .community-hub-hero-inner {
        width: min(100% - 1.5rem, 1180px);
    }

    .blog-card {
        padding: 1rem;
        margin-bottom: 1rem;
    }

    .blog-publish-panel-head,
    .blog-publish-fields,
    .blog-publish-actions,
    .form-actions,
    .forum-view-hero-actions,
    .events-hero-actions,
    .guilds-hero-inner,
    .holocron-hero-inner,
    .community-hub-hero-inner {
        display: grid;
        align-items: stretch;
    }

    .blog-status-toggle,
    .blog-publish-date,
    .blog-publish-date input,
    .blog-publish-actions .btn,
    .blog-publish-actions a.btn {
        width: 100%;
    }

    .blog-status-toggle label {
        flex: 1;
    }

    .blog-status-toggle span {
        width: 100%;
        min-width: 0;
    }

    .btn,
    button.btn,
    a.btn {
        max-width: 100%;
        white-space: normal;
    }

    .forum-row,
    .forum-topic-row,
    .post-manage-row {
        grid-template-columns: 1fr !important;
        gap: 0.75rem;
    }

    .forum-row-icon,
    .forum-topic-avatar-stack,
    .post-manage-cover {
        justify-self: start;
    }

    .forum-row-latest,
    .forum-topic-last,
    .forum-topic-stats {
        min-width: 0;
        width: 100%;
    }

    .forum-presence-sidebar {
        grid-template-columns: 1fr;
    }

    .forum-presence-card {
        grid-column: 1 / -1;
    }

    .thread-composer,
    .chat-page .thread-composer {
        align-items: stretch;
        gap: 0.45rem;
    }

    .thread-composer textarea {
        min-width: 0;
    }
}

@media (max-width: 968px) {
    .nav.open .nav-item {
        display: none !important;
    }

    .mobile-nav-list {
        display: grid;
        gap: 0.7rem;
    }

    .mobile-nav-link,
    .mobile-nav-group {
        width: 100%;
        border: 1px solid var(--line);
        border-radius: 12px;
        background: white;
        box-shadow: 0 6px 18px rgba(26, 24, 21, 0.045);
        overflow: hidden;
    }

    .mobile-nav-link,
    .mobile-nav-group > summary {
        display: flex;
        align-items: center;
        position: relative;
        min-height: 54px;
        padding: 0.95rem 3.65rem 0.95rem 1rem;
        color: var(--ink);
        font-size: 0.86rem;
        font-weight: 850;
        letter-spacing: 0.12em;
        line-height: 1.35;
        text-transform: uppercase;
        white-space: normal;
        list-style: none;
        cursor: pointer;
    }

    .mobile-nav-group > summary::-webkit-details-marker {
        display: none;
    }

    .mobile-nav-link.active,
    .mobile-nav-group.active > summary {
        color: var(--burgundy);
        background: #fbf4e5;
    }

    .mobile-nav-group > summary::after {
        content: '';
        position: absolute;
        top: 50%;
        right: 0.85rem;
        width: 34px;
        height: 34px;
        border-radius: 999px;
        background: var(--surface-elevated);
        transform: translateY(-50%);
        transition: background 0.16s;
    }

    .mobile-nav-group > summary::before {
        content: '';
        position: absolute;
        top: 50%;
        right: 1.55rem;
        z-index: 1;
        width: 10px;
        height: 10px;
        border-right: 2px solid var(--gold);
        border-bottom: 2px solid var(--gold);
        transform: translateY(-65%) rotate(45deg);
        transition: transform 0.16s, border-color 0.16s;
    }

    .mobile-nav-group[open] > summary::after {
        background: var(--gold);
    }

    .mobile-nav-group[open] > summary::before {
        border-color: var(--ink);
        transform: translateY(-35%) rotate(225deg);
    }

    .mobile-nav-submenu {
        display: grid;
        width: 100%;
        border-top: 1px solid rgba(232, 226, 214, 0.8);
        background: #faf7f2;
    }

    .mobile-nav-submenu a {
        display: block;
        width: 100%;
        box-sizing: border-box;
        padding: 0.78rem 1.15rem 0.78rem 1.45rem;
        color: var(--ink-soft);
        font-size: 0.9rem;
        font-weight: 650;
        line-height: 1.35;
        white-space: normal;
        border-top: 1px solid rgba(232, 226, 214, 0.55);
    }

    .mobile-nav-submenu > a:first-child,
    .mobile-nav-subgroup:first-child .mobile-nav-subgroup-title {
        border-top: 0;
    }

    .mobile-nav-subgroup {
        display: block;
        width: 100%;
        border-bottom: 1px solid rgba(232, 226, 214, 0.72);
    }

    .mobile-nav-subgroup:last-child {
        border-bottom: 0;
    }

    .mobile-nav-subgroup-title {
        display: block;
        width: 100%;
        box-sizing: border-box;
        margin: 0;
        padding: 0.85rem 1.15rem;
        color: var(--burgundy);
        font-family: Inter, system-ui, sans-serif;
        font-size: 0.78rem;
        font-weight: 850;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        text-decoration: underline;
        text-decoration-color: var(--gold);
        text-decoration-thickness: 2px;
        text-underline-offset: 0.35em;
    }
}

/* Final mobile overrides for dense community/forum screens. Kept last on purpose. */
@media (max-width: 620px) {
    .profile-page {
        width: 100%;
        padding-top: 0;
    }

    .profile-cover {
        min-height: 0;
        border-radius: 0;
        background-position: center top;
    }

    .profile-cover::before,
    .profile-cover.has-cover::before {
        background:
            linear-gradient(180deg, rgba(26,24,21,0.18) 0%, rgba(26,24,21,0.58) 58%, rgba(26,24,21,0.78) 100%);
    }

    .profile-cover-edit {
        top: 0.65rem;
        right: 0.65rem;
        min-height: 38px;
        padding: 0.42rem 0.62rem;
        border-radius: 12px;
        background: rgba(20, 28, 44, 0.86);
        color: #fff;
        font-size: 0.72rem;
        box-shadow: 0 10px 24px rgba(0,0,0,0.18);
    }

    .profile-cover-edit svg {
        width: 15px;
        height: 15px;
    }

    .profile-hero-panel {
        min-height: 0;
        grid-template-columns: 94px minmax(0, 1fr);
        grid-template-areas:
            "avatar identity"
            "stats stats"
            "actions actions";
        align-items: end;
        gap: 0.65rem 0.85rem;
        padding: 5.2rem 0.9rem 0.9rem;
    }

    .profile-avatar-wrap {
        justify-self: start;
        align-self: end;
    }

    .profile-avatar {
        width: 94px;
        height: 94px;
        border-width: 4px;
        box-shadow: 0 12px 28px rgba(0,0,0,0.28);
    }

    .profile-online-dot {
        width: 17px;
        height: 17px;
        right: 0.2rem;
        bottom: 0.45rem;
        border-width: 3px;
    }

    .profile-id-name {
        align-self: end;
        text-align: left;
        min-width: 0;
    }

    .profile-id-name h1 {
        font-size: clamp(1.85rem, 9.5vw, 2.55rem);
        line-height: 0.96;
        margin-bottom: 0.18rem;
        overflow-wrap: anywhere;
    }

    .profile-handle-line,
    .profile-hero-groups,
    .profile-hero-meta {
        justify-content: flex-start;
    }

    .profile-handle-line {
        font-size: 0.9rem;
    }

    .profile-hero-groups {
        gap: 0.32rem;
        margin-top: 0.35rem;
    }

    .profile-hero-badge {
        min-height: 1.28rem;
        padding: 0.14rem 0.48rem;
        font-size: 0.61rem;
        letter-spacing: 0.07em;
    }

    .profile-id-name p,
    .profile-hero-meta {
        display: none;
    }

    .profile-id-stats {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        margin-top: 0.35rem;
        padding: 0.58rem 0 0;
        border-top: 1px solid rgba(255,255,255,0.24);
        border-bottom: 0;
    }

    .profile-stat,
    .profile-stat:nth-child(-n+2),
    .profile-stat:nth-child(2) {
        border-bottom: 0;
        border-right: 1px solid rgba(255,255,255,0.2);
        margin: 0;
        padding: 0 0.3rem;
    }

    .profile-stat:last-child {
        border-right: 0;
    }

    .profile-stat strong {
        font-size: 1.35rem;
        line-height: 1;
    }

    .profile-stat small {
        margin-top: 0.24rem;
        font-size: 0.57rem;
        font-weight: 800;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .profile-id-actions {
        padding-top: 0;
    }

    .profile-id-actions .btn {
        min-height: 42px;
    }

    .forum-row {
        grid-template-columns: 50px minmax(0, 1fr) !important;
        align-items: start;
        gap: 0.58rem 0.65rem;
        padding: 0.75rem;
    }

    .forum-row-icon {
        width: 48px;
        height: 48px;
        font-size: 0.96rem;
    }

    .forum-row-main h3 {
        font-size: 1rem;
        line-height: 1.18;
    }

    .forum-row-main p {
        margin-top: 0.22rem;
        font-size: 0.85rem;
        line-height: 1.35;
    }

    .forum-row-stats {
        justify-content: flex-start;
        padding-left: 50px;
    }

    .forum-topic-row,
    .forum-view-page.is-admin .forum-topic-row {
        grid-template-columns: 42px minmax(0, 1fr) auto !important;
    }

    .forum-row-stats,
    .forum-row-latest {
        grid-column: 1 / -1;
    }

    .forum-topic-stats,
    .forum-topic-last {
        grid-column: 2 / -1;
        width: auto;
    }

    .forum-topic-checkbox {
        grid-column: 3;
        grid-row: 1;
    }

    .forum-post-author {
        grid-template-columns: 56px minmax(0, 1fr) minmax(112px, auto) !important;
        text-align: left;
        align-items: center;
        gap: 0.22rem 0.65rem;
        padding: 0.7rem 0.75rem;
    }

    .forum-post-avatar-wrap {
        grid-row: 1 / span 3;
        padding: 3px;
    }

    .forum-post-author img {
        width: 50px;
        height: 50px;
        border-width: 2px;
    }

    .forum-post-online-dot {
        right: 0.1rem;
        bottom: 0.1rem;
        width: 0.8rem;
        height: 0.8rem;
        border-width: 2px;
    }

    .forum-post-author strong {
        grid-column: 2;
        margin-top: 0;
        font-size: 1rem;
        line-height: 1.05;
        align-self: end;
    }

    .forum-post-author .group-badges,
    .forum-post-author .jedi-position-badges-forum,
    .forum-post-author-positions {
        flex-direction: row !important;
        align-items: center;
        justify-content: flex-start;
        gap: 0.25rem;
        margin: 0.05rem 0 0;
    }

    .forum-post-author .group-badges {
        grid-column: 2;
    }

    .forum-post-author-positions {
        grid-column: 3;
        grid-row: 1 / span 2;
        justify-self: end;
        align-self: end;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .forum-post-author .group-badge {
        max-width: none;
        padding: 0.22rem 0.5rem 0.22rem 0.62rem;
        font-size: 0.6rem;
        letter-spacing: 0.06em;
    }

    .forum-vow-badge {
        grid-column: 3;
        justify-self: end;
        min-height: 1.65rem;
        margin: 0.08rem 0 0;
        padding: 0.18rem 0.55rem;
        gap: 0.35rem;
        font-size: 0.68rem;
    }

    .forum-vow-badge span {
        width: 1.12rem;
        height: 1.12rem;
        font-size: 0.72rem;
    }

    .forum-post-author small {
        grid-column: 3;
        justify-self: end;
        display: inline-flex;
        align-items: center;
        min-height: 1.55rem;
        padding: 0.18rem 0.58rem;
        border: 1px solid rgba(201, 161, 74, 0.34);
        border-radius: 999px;
        background: rgba(255, 249, 232, 0.86);
        color: var(--ink-soft);
        font-size: 0.64rem;
        font-weight: 900;
        letter-spacing: 0.08em;
        line-height: 1;
        box-shadow: 0 5px 12px rgba(26,24,21,0.045);
    }

    .chat-page .thread-composer {
        align-items: center;
    }

    .chat-page .composer-send {
        white-space: nowrap;
    }
}

@media (max-width: 420px) {
    .forum-post-author {
        grid-template-columns: 50px minmax(0, 1fr) auto !important;
        gap: 0.2rem 0.5rem;
    }

    .forum-post-author img {
        width: 46px;
        height: 46px;
    }

    .forum-post-author .group-badge,
    .forum-post-author-positions .jedi-position-badge {
        padding-inline: 0.45rem;
        font-size: 0.56rem;
    }

    .forum-vow-badge,
    .forum-post-author small {
        font-size: 0.6rem;
    }

    .forum-post-author-main {
        padding: 0.34rem 0.4rem;
    }

    .forum-post-author-side {
        padding-left: 0.48rem;
        gap: 0.28rem;
    }
}

@media (max-width: 900px) {
    .forum-post-author {
        width: 100%;
        grid-template-columns: 58px minmax(0, 1fr) auto !important;
        align-items: center;
        justify-content: stretch;
        column-gap: 0.7rem;
    }

    .forum-post-avatar-wrap {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }

    .forum-post-author-main {
        grid-column: 2 !important;
        grid-row: 1 !important;
        justify-self: start;
        align-self: center;
        display: grid;
        gap: 0.28rem;
        min-width: 0;
        padding: 0.42rem 0.55rem;
        border-radius: 10px;
        background: rgba(255,255,255,0.36);
    }

    .forum-post-author-side {
        grid-column: 3 !important;
        grid-row: 1 !important;
        justify-self: end;
        align-self: center;
        display: grid;
        justify-items: end;
        gap: 0.34rem;
        min-width: max-content;
        padding-left: 0.75rem;
        border-left: 1px solid rgba(232, 226, 214, 0.74);
    }

    .forum-post-author strong,
    .forum-post-author .group-badges,
    .forum-post-author-positions {
        grid-column: auto !important;
        grid-row: auto !important;
        justify-self: start !important;
        margin-left: 0;
    }

    .forum-vow-badge,
    .forum-post-author small {
        justify-self: end !important;
        margin-left: auto;
    }

    .forum-post-author-positions {
        width: auto;
        max-width: 100%;
        justify-content: flex-start !important;
    }

    .forum-vow-badge {
        grid-column: auto !important;
        grid-row: auto !important;
    }

    .forum-post-author small {
        grid-column: auto !important;
        grid-row: auto !important;
    }
}

@media (max-width: 700px) {
    .profile-mobile-shell {
        width: 100% !important;
        max-width: none !important;
        margin-top: 0.75rem !important;
        border-left: 0 !important;
        border-right: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    .profile-mobile-cover {
        height: auto !important;
        min-height: 0 !important;
        background-position: center top !important;
    }

    .profile-mobile-cover > .absolute.inset-0 {
        background: linear-gradient(180deg, rgba(26,24,21,0.16) 0%, rgba(26,24,21,0.58) 58%, rgba(26,24,21,0.82) 100%) !important;
    }

    .profile-mobile-cover-edit {
        top: 0.65rem !important;
        right: 0.65rem !important;
        padding: 0.46rem 0.68rem !important;
        border-radius: 12px !important;
        background: rgba(22, 30, 46, 0.88) !important;
        font-size: 0.78rem !important;
        line-height: 1 !important;
    }

    .profile-mobile-hero {
        position: relative !important;
        bottom: auto !important;
        display: grid !important;
        grid-template-columns: 96px minmax(0, 1fr) !important;
        align-items: end !important;
        gap: 0.8rem 0.95rem !important;
        padding: 4.6rem 1rem 1rem !important;
    }

    .profile-mobile-identity-wrap {
        display: contents !important;
    }

    .profile-header-avatar-wrap {
        grid-column: 1 !important;
        align-self: end !important;
        bottom: auto !important;
    }

    .profile-header-avatar-wrap img {
        width: 96px !important;
        height: 96px !important;
        border-width: 4px !important;
        box-shadow: 0 14px 32px rgba(0,0,0,0.28) !important;
    }

    .profile-header-online-dot {
        right: 0.25rem !important;
        bottom: 0.45rem !important;
        width: 1rem !important;
        height: 1rem !important;
        border-width: 3px !important;
    }

    .profile-mobile-info {
        grid-column: 2 !important;
        align-self: end !important;
        margin-bottom: 0 !important;
        min-width: 0 !important;
    }

    .profile-mobile-name-row {
        gap: 0.35rem !important;
    }

    .profile-mobile-name-row h1 {
        width: 100% !important;
        font-size: clamp(2rem, 10vw, 2.65rem) !important;
        line-height: 0.95 !important;
        margin: 0 !important;
        overflow-wrap: anywhere !important;
    }

    .profile-mobile-name-row span {
        padding: 0.24rem 0.48rem !important;
        border-radius: 7px !important;
        font-size: 0.66rem !important;
        letter-spacing: 0.08em !important;
    }

    .profile-mobile-info > p {
        margin-top: 0.28rem !important;
        color: rgba(255,255,255,0.86) !important;
        font-size: 0.95rem !important;
    }

    .profile-mobile-info .jedi-position-badges-profile {
        margin-top: 0.45rem !important;
    }

    .profile-mobile-info .jedi-position-badge {
        padding: 0.24rem 0.6rem !important;
        font-size: 0.66rem !important;
    }

    .profile-status-warning {
        margin-top: 0.55rem !important;
        padding: 0.55rem 0.65rem !important;
        font-size: 0.8rem !important;
    }

    .profile-mobile-stats {
        grid-column: 1 / -1 !important;
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        justify-items: stretch !important;
        align-items: stretch !important;
        gap: 0 !important;
        width: 100% !important;
        margin: 0.35rem 0 0 !important;
        padding-top: 0.75rem !important;
        border-top: 1px solid rgba(255,255,255,0.24) !important;
    }

    .profile-mobile-stats > :not([hidden]) ~ :not([hidden]) {
        margin-left: 0 !important;
    }

    .profile-mobile-stats > div {
        display: grid !important;
        justify-items: center !important;
        align-content: center !important;
        text-align: center !important;
        min-width: 0 !important;
        padding: 0 0.2rem !important;
        border-right: 1px solid rgba(255,255,255,0.2) !important;
    }

    .profile-mobile-stats > div:last-child {
        border-right: 0 !important;
    }

    .profile-mobile-stats .text-2xl {
        font-size: 1.45rem !important;
        line-height: 1 !important;
    }

    .profile-mobile-stats .text-xs {
        display: block !important;
        width: 100% !important;
        margin-top: 0.25rem !important;
        font-size: 0.58rem !important;
        letter-spacing: 0.08em !important;
        color: rgba(255,255,255,0.76) !important;
        text-align: center !important;
    }

    .profile-mobile-actionbar {
        justify-content: stretch !important;
        padding: 0.75rem 1rem !important;
    }

    .profile-mobile-actionbar > div {
        width: 100% !important;
        justify-content: stretch !important;
    }

    .profile-mobile-actionbar a,
    .profile-mobile-actionbar button {
        flex: 1 1 auto !important;
        text-align: center !important;
    }
}

/* ===== Front-end finishing pass ===== */
:where(a, button, input, select, textarea, summary, [role="button"]):focus-visible {
    outline: 3px solid rgba(201, 161, 74, 0.5);
    outline-offset: 3px;
    border-radius: 8px;
}

:where(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="file"]) {
    transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

:where(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus {
    border-color: rgba(201, 161, 74, 0.88) !important;
    box-shadow: 0 0 0 4px rgba(201, 161, 74, 0.13) !important;
}

select {
    background-image:
        linear-gradient(45deg, transparent 50%, var(--burgundy) 50%),
        linear-gradient(135deg, var(--burgundy) 50%, transparent 50%);
    background-position:
        calc(100% - 18px) 50%,
        calc(100% - 12px) 50%;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
}

.auth-error,
.auth-success,
.auth-notice,
.flash,
.form-message {
    border-radius: 12px;
    border: 1px solid rgba(222, 213, 196, 0.9);
    box-shadow: 0 10px 26px rgba(26,24,21,0.06);
}

.form-is-loading {
    position: relative;
}

.form-is-loading button[type="submit"],
.form-is-loading input[type="submit"],
.is-loading {
    cursor: wait !important;
    opacity: 0.78;
}

.btn-spinner {
    width: 0.9em;
    height: 0.9em;
    margin-right: 0.45rem;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    display: inline-block;
    vertical-align: -0.12em;
    animation: tjw-spin 0.75s linear infinite;
}

.reaction-btn.is-loading,
.follow-btn.is-loading {
    position: relative;
}

.reaction-btn.is-loading::after,
.follow-btn.is-loading::after {
    content: "";
    width: 0.85em;
    height: 0.85em;
    margin-left: 0.45rem;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    display: inline-block;
    vertical-align: -0.12em;
    animation: tjw-spin 0.75s linear infinite;
}

@keyframes tjw-spin {
    to { transform: rotate(360deg); }
}

.tap-feedback {
    transform: translateY(1px) scale(0.99);
}

.forum-empty,
.gallery-empty,
.holocron-empty,
.events-empty,
.guild-empty,
.vow-empty,
.kharis-empty,
.notifications-empty-state,
.gallery-photos-empty {
    border: 1px solid rgba(222, 213, 196, 0.86);
    border-radius: 16px;
    background:
        radial-gradient(circle at top left, rgba(201, 161, 74, 0.12), transparent 34%),
        rgba(255,255,255,0.78);
    box-shadow: 0 14px 34px rgba(26,24,21,0.06);
}

.forum-empty,
.gallery-empty,
.holocron-empty,
.events-empty,
.vow-empty,
.notifications-empty-state {
    padding: clamp(1.35rem, 4vw, 2.4rem) !important;
}

.gallery-empty-icon,
.holocron-empty::before,
.events-empty::before,
.forum-empty::before,
.notifications-empty-state::before {
    display: inline-grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    margin: 0 auto 0.75rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #fff8e5, #d6b45c);
    color: var(--burgundy);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.78), 0 8px 18px rgba(92,63,24,0.12);
}

.forum-empty::before { content: "New"; font-size: 0.62rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; }
.holocron-empty::before { content: "File"; font-size: 0.62rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; }
.events-empty::before { content: "Event"; font-size: 0.58rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; }
.notifications-empty-state::before { content: "Ok"; font-size: 0.74rem; font-weight: 900; }

.muted {
    color: var(--ink-mute);
}

.page-header {
    border-bottom: 1px solid rgba(201, 161, 74, 0.18);
}

.page-title {
    text-wrap: balance;
}

.page-subtitle {
    max-width: 720px;
    text-wrap: pretty;
}

.notification-dropdown {
    width: min(320px, calc(100vw - 24px));
}

.notification-dropdown a,
.notification-list-page a {
    position: relative;
}

.notification-dropdown a.unread::before,
.notification-list-page a.unread::before {
    content: "";
    width: 0.48rem;
    height: 0.48rem;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 0 3px rgba(201, 161, 74, 0.16);
    flex: 0 0 auto;
}

.notification-dropdown a.unread {
    padding-left: 1.25rem;
}

.notification-dropdown a.unread::before {
    position: absolute;
    top: 0.86rem;
    left: 0.48rem;
}

.notification-list-page a.unread {
    background: linear-gradient(90deg, rgba(201, 161, 74, 0.1), rgba(255,255,255,0.82));
}

.site-toast {
    position: fixed;
    right: max(1rem, env(safe-area-inset-right));
    bottom: max(1rem, env(safe-area-inset-bottom));
    z-index: 9999;
    max-width: min(340px, calc(100vw - 2rem));
    padding: 0.78rem 0.95rem;
    border-radius: 12px;
    border: 1px solid rgba(222, 213, 196, 0.88);
    background: rgba(26, 24, 21, 0.94);
    color: var(--cream);
    box-shadow: 0 18px 42px rgba(26,24,21,0.24);
    font-size: 0.9rem;
    font-weight: 700;
    transform: translateY(10px);
    opacity: 0;
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.site-toast.show {
    transform: translateY(0);
    opacity: 1;
}

.site-toast.success {
    border-color: rgba(105, 154, 89, 0.44);
}

.site-toast.error {
    border-color: rgba(107, 44, 44, 0.65);
}

.profile-hover-card {
    position: absolute;
    z-index: 980;
    width: 260px;
    pointer-events: auto;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.profile-hover-card.show {
    opacity: 1;
    transform: translateY(0);
}

.profile-hover-card-inner {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 0.8rem;
    align-items: center;
    padding: 0.85rem;
    border-radius: 14px;
    border: 1px solid rgba(222, 213, 196, 0.92);
    background: rgba(255,255,255,0.96);
    color: var(--ink);
    text-decoration: none;
    box-shadow: 0 18px 42px rgba(26,24,21,0.15), 0 3px 10px rgba(26,24,21,0.07);
    backdrop-filter: blur(10px);
}

.profile-hover-avatar-wrap {
    position: relative;
    width: 54px;
    height: 54px;
}

.profile-hover-avatar-wrap img {
    width: 54px;
    height: 54px;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid var(--gold);
}

.profile-hover-avatar-wrap .online-dot {
    position: absolute;
    right: -1px;
    bottom: -1px;
}

.profile-hover-copy {
    min-width: 0;
    display: grid;
    gap: 0.12rem;
}

.profile-hover-copy strong {
    color: var(--burgundy);
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.2rem;
    line-height: 1.1;
}

.profile-hover-copy small {
    color: var(--ink-mute);
    font-size: 0.78rem;
}

.profile-hover-copy em {
    width: fit-content;
    max-width: 100%;
    margin-top: 0.25rem;
    padding: 0.18rem 0.5rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--profile-card-color, var(--gold)) 48%, white);
    background: color-mix(in srgb, var(--profile-card-color, var(--gold)) 14%, white);
    color: var(--profile-card-color, var(--burgundy));
    font-size: 0.62rem;
    font-style: normal;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (hover: hover) {
    .member-card,
    .conversation-row,
    .notification-list-page a,
    .forum-row,
    .topic-row,
    .blog-card,
    .event-card {
        transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease, background 0.16s ease;
    }

    .member-card:hover,
    .conversation-row:hover,
    .forum-row:hover,
    .topic-row:hover,
    .event-card:hover {
        transform: translateY(-1px);
    }
}

@media (max-width: 760px) {
    :where(a, button, summary, [role="button"]) {
        -webkit-tap-highlight-color: rgba(201, 161, 74, 0.16);
    }

    .page-header {
        padding: 2.35rem 1rem 2rem;
    }

    .page-subtitle {
        font-size: 1rem;
        line-height: 1.5;
    }

    .site-toast {
        left: 1rem;
        right: 1rem;
        bottom: max(0.85rem, env(safe-area-inset-bottom));
    }

    .notification-list-page a.unread::before {
        position: absolute;
        top: 1rem;
        right: 1rem;
    }
}

@media (max-width: 420px) {
    .forum-post-author {
        grid-template-columns: 50px minmax(0, 1fr) auto !important;
        gap: 0.2rem 0.5rem;
    }

    .forum-post-author img {
        width: 46px;
        height: 46px;
    }

    .forum-post-author .group-badge,
    .forum-post-author-positions .jedi-position-badge {
        padding-inline: 0.45rem;
        font-size: 0.56rem;
    }

    .forum-vow-badge,
    .forum-post-author small {
        font-size: 0.6rem;
    }

    .forum-post-author-main {
        padding: 0.34rem 0.4rem;
    }

    .forum-post-author-side {
        padding-left: 0.48rem;
        gap: 0.28rem;
    }
}

/* ===== Member Map ===== */
.member-map-page { padding: 2rem 0 4rem; }
.member-map-layout {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 1.25rem;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1.25rem;
}
@media (max-width: 900px) { .member-map-layout { grid-template-columns: 1fr; } }

.member-map-sidebar {
    background: rgba(12, 16, 24, 0.85);
    border: 1px solid rgba(196, 168, 92, 0.25);
    border-radius: 10px;
    padding: 1.25rem;
    color: var(--text-color, #e6e6e6);
}
.member-map-cta { width: 100%; margin-bottom: 1rem; }
.member-map-pending { font-size: 0.85rem; color: #f5c46b; margin: -0.5rem 0 1rem; }
.member-map-heading {
    font-size: 0.78rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #c4a85c;
    margin: 1.25rem 0 0.6rem;
}
.member-map-stat-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem;
}
.member-map-stat {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(196, 168, 92, 0.18);
    border-radius: 8px;
    padding: 0.6rem 0.75rem;
    display: flex; flex-direction: column;
}
.member-map-stat .num { font-size: 1.4rem; font-weight: 600; color: #f5d28a; }
.member-map-stat .lbl { font-size: 0.72rem; letter-spacing: 1px; text-transform: uppercase; color: #a99b78; }

.member-map-filter label {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.4rem 0.5rem; border-radius: 6px;
    font-size: 0.9rem; cursor: pointer;
}
.member-map-filter label:hover { background: rgba(255,255,255,0.04); }
.member-map-count { margin-left: auto; color: #8a8270; font-size: 0.8rem; }

.member-map-swatch {
    width: 12px; height: 12px; border-radius: 50%;
    box-shadow: 0 0 8px currentColor;
    display: inline-block; flex-shrink: 0;
}
.member-map-swatch-jedi { background: #c4a85c; color: #c4a85c; }

.member-map-recent { list-style: none; padding: 0; margin: 0; }
.member-map-recent li {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.5rem 0; border-bottom: 1px solid rgba(196,168,92,0.12);
    font-size: 0.85rem;
}
.member-map-recent li:last-child { border-bottom: none; }
.member-map-recent strong { display: block; color: #f0e2bf; }
.member-map-recent small { color: #8a8270; font-size: 0.75rem; }

.member-map-canvas-wrap { position: relative; z-index: 0; isolation: isolate; }
.member-map-canvas {
    height: 70vh; min-height: 500px;
    border-radius: 10px;
    border: 1px solid rgba(196, 168, 92, 0.25);
    overflow: hidden;
    background: #050810;
    position: relative;
    z-index: 0;
}
.member-map-canvas .leaflet-pane,
.member-map-canvas .leaflet-top,
.member-map-canvas .leaflet-bottom { z-index: auto; }
.member-map-legend {
    position: absolute; bottom: 1rem; right: 1rem; z-index: 500;
    background: rgba(12,16,24,0.92);
    border: 1px solid rgba(196,168,92,0.25);
    border-radius: 8px;
    padding: 0.6rem 0.8rem;
    font-size: 0.8rem;
    color: #d6d0bd;
}
.member-map-legend div { display: flex; align-items: center; gap: 0.5rem; margin: 0.2rem 0; }

/* Pin markers — Jedi sapphire */
.jedi-pin {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #b9e8ff 0%, #3fa8ff 45%, #0a4f9c 100%);
    border: 3px solid #fff;
    box-shadow:
        0 0 0 2px rgba(10, 79, 156, 0.55),
        0 0 18px rgba(63, 168, 255, 0.95),
        0 4px 10px rgba(0, 0, 0, 0.55);
    animation: jedi-pin-pulse 2.2s ease-in-out infinite;
    cursor: pointer;
}
.jedi-pin:hover {
    transform: scale(1.15);
    transition: transform .15s ease-out;
}
@keyframes jedi-pin-pulse {
    0%,100% {
        box-shadow:
            0 0 0 2px rgba(10, 79, 156, 0.55),
            0 0 14px rgba(63, 168, 255, 0.85),
            0 4px 10px rgba(0, 0, 0, 0.55);
    }
    50% {
        box-shadow:
            0 0 0 6px rgba(63, 168, 255, 0.28),
            0 0 30px rgba(120, 200, 255, 1),
            0 4px 12px rgba(0, 0, 0, 0.6);
    }
}
.pin-jedi { color: #3fa8ff; }

/* Popup — high specificity to override site defaults */
.leaflet-container .leaflet-popup-content-wrapper {
    background: linear-gradient(160deg, #14181f 0%, #1d2230 100%) !important;
    color: #f4ecd6 !important;
    border: 1px solid rgba(245, 210, 138, 0.55) !important;
    border-radius: 14px !important;
    box-shadow:
        0 0 0 1px rgba(0,0,0,0.4),
        0 12px 32px rgba(0,0,0,0.55),
        0 0 24px rgba(63, 168, 255, 0.25) !important;
    padding: 2px !important;
}
.leaflet-container .leaflet-popup-content {
    margin: 14px 18px 12px !important;
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
    color: #f4ecd6 !important;
}
.leaflet-container .leaflet-popup-tip {
    background: #1d2230 !important;
    border: 1px solid rgba(245, 210, 138, 0.55) !important;
    box-shadow: 0 4px 14px rgba(0,0,0,0.5) !important;
}
.leaflet-container .leaflet-popup-content .popup .name {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: #ffe9a8 !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.6);
    margin-bottom: 0.25rem;
    letter-spacing: 0.3px;
}
.leaflet-container .leaflet-popup-content .popup .path {
    font-size: 0.78rem !important;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #c4a85c !important;
    margin-bottom: 0.35rem;
}
.leaflet-container .leaflet-popup-content .popup .popup-link {
    display: inline-block !important;
    margin-top: 0.5rem !important;
    padding: 0.4rem 0.9rem !important;
    background: linear-gradient(135deg, #f0c75a, #b8902e) !important;
    color: #14181f !important;
    font-weight: 700 !important;
    font-size: 0.82rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    border-radius: 999px !important;
    text-decoration: none !important;
    border: none !important;
    transition: filter .15s, transform .15s;
}
.leaflet-container .leaflet-popup-content .popup .popup-link:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}
.leaflet-container .leaflet-popup-close-button {
    color: #c4a85c !important;
    font-size: 22px !important;
    padding: 6px 10px !important;
    top: 6px !important;
    right: 8px !important;
    width: auto !important;
    height: auto !important;
}
.leaflet-container .leaflet-popup-close-button:hover { color: #ffe9a8 !important; }

/* Pin form modal */
.member-map-modal[hidden] { display: none; }
.member-map-modal {
    position: fixed; inset: 0; z-index: 9000;
    display: flex; align-items: center; justify-content: center;
}
.member-map-modal-backdrop {
    position: absolute; inset: 0; background: rgba(2,4,8,0.78); backdrop-filter: blur(4px);
}
.member-map-modal-card {
    position: relative; z-index: 1;
    width: min(640px, 92vw); max-height: 90vh; overflow: auto;
    background: #0e1119; color: #e6e6e6;
    border: 1px solid rgba(196,168,92,0.35);
    border-radius: 12px;
    padding: 1.5rem 1.5rem 1.25rem;
}
.member-map-modal-close {
    position: absolute; top: 0.5rem; right: 0.75rem;
    background: none; border: none; color: #c4a85c;
    font-size: 1.6rem; cursor: pointer;
}
.member-map-picker {
    height: 240px; border-radius: 8px; margin: 0.75rem 0 1rem;
    border: 1px solid rgba(196,168,92,0.25);
}
.member-map-form-row {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.6rem; margin-bottom: 0.6rem;
}
.member-map-form-row label, .member-map-block { display: flex; flex-direction: column; font-size: 0.8rem; color: #a99b78; }
.member-map-form-row input, .member-map-form-row select, .member-map-block input {
    margin-top: 0.2rem; padding: 0.45rem 0.5rem;
    background: #1a1f2b; color: #e6e6e6;
    border: 1px solid rgba(196,168,92,0.25); border-radius: 6px;
}
.member-map-block { margin-bottom: 0.6rem; }
.member-map-checkbox {
    display: flex; align-items: center; gap: 0.5rem;
    margin: 0.4rem 0; font-size: 0.9rem; color: #d6d0bd;
}
.member-map-form-actions {
    display: flex; align-items: center; gap: 0.5rem;
    margin-top: 1rem; padding-top: 1rem;
    border-top: 1px solid rgba(196,168,92,0.18);
}
.member-map-form-actions .flex-spacer { flex: 1; }
.member-map-form-error { color: #ff8080; font-size: 0.85rem; margin-top: 0.6rem; }
body.member-map-modal-open { overflow: hidden; }

/* ============================================================
   Jedi Chapters
   ============================================================ */
.chapters-hero { background: linear-gradient(180deg, rgba(201,161,74,0.12), transparent); padding: 3rem 1.5rem 2rem; border-bottom: 1px solid var(--border, rgba(255,255,255,0.08)); }
.chapters-hero-inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.chapters-hero h1 { font-size: 2.4rem; margin: .25rem 0 .5rem; }
.chapters-page { padding: 2rem 1.5rem 4rem; }
.chapters-container { max-width: 1200px; margin: 0 auto; }
.chapter-search { display: flex; gap: .5rem; margin-bottom: 1.5rem; }
.chapter-search input { flex: 1; padding: .65rem .9rem; border-radius: 6px; border: 1px solid var(--border, rgba(255,255,255,0.12)); background: var(--card, rgba(255,255,255,0.04)); color: inherit; }
.chapter-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.25rem; }
.chapter-card { display: block; background: var(--card, rgba(255,255,255,0.04)); border: 1px solid var(--border, rgba(255,255,255,0.08)); border-radius: 10px; overflow: hidden; text-decoration: none; color: inherit; transition: transform .15s, border-color .15s; }
.chapter-card:hover { transform: translateY(-2px); border-color: var(--gold, #c9a14a); }
.chapter-card-cover { height: 130px; background: linear-gradient(135deg, #2a3a4a, #1a2a3a); background-size: cover; background-position: center; position: relative; }
.chapter-card-cover span { position: absolute; left: 1rem; bottom: -22px; width: 56px; height: 56px; border-radius: 50%; background: var(--card, #1a1a1a); border: 3px solid var(--card, #1a1a1a); display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 1.5rem; overflow: hidden; }
.chapter-card-cover span img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.chapter-card-body { padding: 2rem 1.25rem 1.25rem; }
.chapter-card-body h2 { font-size: 1.15rem; margin: 0 0 .25rem; }
.chapter-card-region { font-size: .85rem; color: var(--ink-mute, #999); margin: 0 0 .5rem; }
.chapter-card-meta { display: flex; gap: 1rem; margin-top: .75rem; font-size: .85rem; color: var(--ink-mute, #999); }

.chapter-create-page { padding: 2rem 1.5rem 4rem; }
.chapter-create-shell { max-width: 1100px; margin: 0 auto; }
.chapter-create-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 2rem; flex-wrap: wrap; }
.chapter-create-card { display: grid; grid-template-columns: 1fr 340px; gap: 2rem; background: var(--card, rgba(255,255,255,0.04)); border: 1px solid var(--border, rgba(255,255,255,0.08)); border-radius: 10px; padding: 1.5rem; }
.chapter-create-main, .chapter-create-side { display: grid; gap: 1rem; align-content: start; }
.chapter-create-actions { display: flex; gap: .5rem; margin-top: .5rem; }
.chapter-form-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .75rem; }

.chapter-detail { padding: 2rem 1.5rem 4rem; max-width: 1200px; margin: 0 auto; }
.chapter-header-shell { margin-bottom: 1.5rem; }
.chapter-cover-card { border-radius: 10px; overflow: hidden; margin-bottom: 1rem; }
.chapter-cover { height: 220px; background: linear-gradient(135deg, #2a3a4a, #1a2a3a); background-size: cover; background-position: center; position: relative; }
.chapter-cover-edit-btn { position: absolute; top: 1rem; right: 1rem; background: rgba(0,0,0,0.6); color: #fff; padding: .35rem .65rem; border-radius: 4px; text-decoration: none; font-size: .85rem; }
.chapter-id-bar { display: grid; grid-template-columns: auto 1fr auto; gap: 1.25rem; align-items: center; margin-bottom: 1rem; }
.chapter-id-avatar { width: 80px; height: 80px; border-radius: 50%; overflow: hidden; background: var(--card); display: flex; align-items: center; justify-content: center; font-size: 2rem; font-weight: bold; border: 2px solid var(--border); }
.chapter-id-avatar img { width: 100%; height: 100%; object-fit: cover; }
.chapter-id-text h1 { margin: 0; }
.chapter-region, .chapter-home { margin: .25rem 0; font-size: .9rem; color: var(--ink-mute, #aaa); }
.chapter-id-actions { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.chapter-tabs { display: flex; gap: 1rem; border-bottom: 1px solid var(--border, rgba(255,255,255,0.08)); margin-top: 1rem; }
.chapter-tab { padding: .75rem 1rem; text-decoration: none; color: inherit; border-bottom: 3px solid transparent; }
.chapter-tab.is-active { border-bottom-color: var(--gold, #c9a14a); }
.chapter-detail-grid { display: grid; grid-template-columns: 1fr 320px; gap: 1.5rem; }
.chapter-panel { background: var(--card, rgba(255,255,255,0.04)); border: 1px solid var(--border, rgba(255,255,255,0.08)); border-radius: 10px; padding: 1.25rem; margin-bottom: 1.25rem; }
.chapter-panel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .75rem; }
.chapter-panel-head h2 { margin: 0; font-size: 1.1rem; }
.chapter-empty { color: var(--ink-mute, #888); padding: .75rem 0; }
.chapter-stack-form { display: grid; gap: .5rem; margin-bottom: 1rem; }
.chapter-stack-form input, .chapter-stack-form textarea, .chapter-stack-form select { padding: .55rem .75rem; border-radius: 5px; border: 1px solid var(--border, rgba(255,255,255,0.12)); background: rgba(0,0,0,0.2); color: inherit; }

.chapter-topic-list { display: grid; gap: .25rem; }
.chapter-topic-row { display: grid; grid-template-columns: auto 1fr auto; gap: .75rem; align-items: center; padding: .75rem; border-radius: 6px; text-decoration: none; color: inherit; transition: background .12s; }
.chapter-topic-row:hover { background: rgba(255,255,255,0.04); }
.chapter-topic-row h3 { margin: 0; font-size: 1rem; }
.chapter-pin { font-size: 1rem; }

.chapter-album-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .75rem; }
.chapter-album-card { display: block; text-decoration: none; color: inherit; }
.chapter-album-thumb { aspect-ratio: 4/3; background: var(--card); background-size: cover; background-position: center; border-radius: 6px; border: 1px solid var(--border); }
.chapter-album-meta { padding: .5rem 0; }
.chapter-album-meta h3 { margin: 0; font-size: .95rem; }

.chapter-photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .75rem; }
.chapter-photo { position: relative; margin: 0; }
.chapter-photo img { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 6px; }
.chapter-photo figcaption { font-size: .8rem; color: var(--ink-mute); margin-top: .25rem; }
.chapter-photo .btn-icon { position: absolute; top: .25rem; right: .25rem; background: rgba(0,0,0,0.7); color: #fff; border: none; width: 26px; height: 26px; border-radius: 50%; cursor: pointer; }

.chapter-mini-list { list-style: none; padding: 0; display: grid; gap: .65rem; }
.chapter-mini-list li { padding-bottom: .65rem; border-bottom: 1px solid var(--border, rgba(255,255,255,0.06)); }
.chapter-facts { list-style: none; padding: 0; display: grid; gap: .35rem; font-size: .9rem; }
.chapter-about { line-height: 1.6; margin-bottom: .75rem; }

.chapter-topic-thread { display: grid; gap: 1rem; margin-bottom: 1.5rem; }
.chapter-post { background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 1rem 1.25rem; }
.chapter-post header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .5rem; }
.chapter-post-body { line-height: 1.6; }
.chapter-reply-form { display: grid; gap: .5rem; }
.chapter-reply-form textarea { padding: .65rem; border-radius: 6px; border: 1px solid var(--border); background: rgba(0,0,0,0.2); color: inherit; }

.chapter-mod-actions { display: flex; gap: .5rem; margin-top: .5rem; }
.chapter-member-list { list-style: none; padding: 0; display: grid; gap: .5rem; }
.chapter-member-row { display: flex; justify-content: space-between; align-items: center; padding: .65rem .85rem; background: rgba(255,255,255,0.03); border-radius: 6px; }
.badge-leader { background: #c9a14a; color: #000; }
.badge-moderator { background: #4a7ac9; color: #fff; }
.badge-member { background: rgba(255,255,255,0.1); color: inherit; }

.event-pill-chapter { background: rgba(201,161,74,0.15); border: 1px solid rgba(201,161,74,0.4); color: var(--gold, #c9a14a); }

.admin-checkbox-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .5rem; margin: 1rem 0; }

@media (max-width: 900px) {
    .chapter-detail-grid, .chapter-create-card { grid-template-columns: 1fr; }
    .chapter-form-grid { grid-template-columns: 1fr; }
    .chapter-id-bar { grid-template-columns: auto 1fr; }
    .chapter-id-actions { grid-column: 1 / -1; }
}