/* T-003: sliced artwork remains decorative; content and controls stay HTML. */
body {
    background: linear-gradient(#170b0980, #090807a8), url('../assets/backgrounds/page.jpg') repeat;
    background-size: auto, 512px 512px;
}
.hero::before {
    background-image: linear-gradient(0deg, #0b0908 0%, transparent 25%, #08050430 75%, #08050488), var(--hero-image);
    background-position: center, center 70px;
    background-repeat: no-repeat;
}
/* Once the viewport is wider than the hero art, fade its sides into the page instead of a hard edge. */
@media (min-width: 1800px) {
    .hero::before {
        -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
        mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
    }
}
.hero-tagline, .hero-values {
    text-shadow: 0 2px 4px #000, 0 0 12px #000;
}
.panel {
    border: 0;
    border-image: url('../assets/borders/panel-frame.png') 64 / 28px / 6px round;
    background: linear-gradient(#101110f5, #0c0d0cf5), url('../assets/backgrounds/page.jpg') center / 512px;
    box-shadow: 0 8px 24px #000b;
    padding: 12px;
}
.panel::before, .panel::after {
    width: 48px;
    height: 48px;
    border: 0;
    background: url('../assets/borders/corner.png') center / contain no-repeat;
    transform: none;
}
.panel::before {
    top: -9px;
    left: -9px;
}
.panel::after {
    bottom: -9px;
    right: -9px;
    transform: rotate(180deg);
}
/* Heavy spiked iron bar (A-001): 3-slice — 200px end caps with chains, seamlessly tiling middle.
   The art is 128px tall; it is drawn 96px tall around a 64px header (16px outset above/below for the spikes). */
.site-header {
    min-height: 64px;
    border: 0;
    border-image-source: url('../assets/borders/nav-bar.png');
    border-image-slice: 0 200 fill;
    border-image-width: 0 150px;
    border-image-outset: 16px 0;
    border-image-repeat: round stretch;
    background: none;
    filter: drop-shadow(0 8px 14px #000c);
}
.login-box::before {
    content: '';
    position: absolute;
    width: 56px;
    height: 56px;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    background: url('../assets/images/emblem-small.png') center / contain no-repeat;
    pointer-events: none;
}
.login-box {
    padding: 32px 24px 24px;
}
.panel-heading {
    border-bottom: 0;
    background: url('../assets/borders/divider.png') center bottom / 100% 9px no-repeat;
    padding: 14px 12px 18px;
}
.news-list, .event-list {
    padding-inline: 10px;
}
.discord-panorama {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 5 / 2;
    object-fit: cover;
}
.discord-content {
    padding: 16px 12px;
    background: #101110;
}
.raid-size {
    color: #c8a477;
}
@media (min-width: 1200px) {
    .hero {
        min-height: 430px;
    }
    .news-item {
        grid-template-columns: 88px minmax(0, 1fr) 10px;
        gap: 10px;
    }
    .news-thumbnail {
        width: 88px;
    }
}
@media (max-width: 767px) {
    .hero::before {
        background-position: center, 35% top;
    }
    .panel {
        border-image-width: 18px;
        border-image-outset: 2px;
        padding: 8px;
    }
    .panel::after, .panel::before {
        display: none;
    }
    .login-box::before {
        display: block;
    }
    .login-box {
        padding: 30px 20px 20px;
        margin-top: 10px;
    }
    .site-header {
        margin-top: 26px;
        padding-inline: 12px;
        border-image-slice: 24 160;
        border-image-width: 12px 28px;
        border-image-outset: 3px;
    }
    .panel-heading {
        padding-inline: 8px;
    }
    .event-row {
        grid-template-columns: 42px minmax(0, 1fr) auto 8px;
        gap: 5px;
    }
    .event-date {
        width: 42px;
    }
    .progress-list {
        padding-inline: 6px;
    }
}