:root {
    --attach-signac-navy: #252d4a;
    --attach-signac-blue: #526f93;
    --attach-signac-cyan: #6caeae;
    --attach-signac-violet: #72658e;
    --attach-signac-coral: #bd5c52;
    --attach-signac-rose: #d48779;
    --attach-signac-yellow: #e2bf69;
    --attach-signac-cream: #f2ead8;
}

.attachment-database-page { background: var(--attach-signac-cream); }

.attachment-database-page .site-header {
    background: var(--attach-signac-navy);
    border-bottom-color: rgba(242, 234, 216, .42);
}

.attachment-database-page main { overflow: hidden; }

.attachment-database-page .hero {
    position: relative;
    isolation: isolate;
    width: 100%;
    min-height: 650px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    color: var(--attach-signac-cream);
    background:
        radial-gradient(circle at 82% 19%, #f2cf77 0 6.2%, #d98876 6.5% 8.3%, transparent 8.6%),
        linear-gradient(165deg, transparent 0 41%, rgba(189, 92, 82, .92) 41.4% 45%, transparent 45.4%),
        linear-gradient(172deg, transparent 0 50%, rgba(226, 191, 105, .78) 50.4% 54%, transparent 54.4%),
        linear-gradient(177deg, transparent 0 59%, rgba(114, 101, 142, .86) 59.4% 64%, transparent 64.4%),
        linear-gradient(180deg, #9fc7c1 0 37%, #688fa7 37% 61%, #4f5d83 61% 78%, #252d4a 78% 100%);
}

.attachment-database-page .hero::before {
    content: "";
    position: absolute;
    z-index: -2;
    inset: 0;
    background-image:
        radial-gradient(ellipse at center, rgba(243, 211, 125, .94) 0 1.4px, transparent 1.8px),
        radial-gradient(ellipse at center, rgba(206, 93, 85, .88) 0 1.2px, transparent 1.7px),
        radial-gradient(ellipse at center, rgba(83, 107, 151, .9) 0 1.5px, transparent 2px),
        radial-gradient(ellipse at center, rgba(228, 229, 207, .82) 0 1px, transparent 1.6px);
    background-position: 0 0, 7px 4px, 3px 9px, 10px 12px;
    background-size: 14px 13px, 17px 15px, 19px 17px, 23px 21px;
    mix-blend-mode: color-dodge;
    opacity: .65;
    transform: rotate(-1deg) scale(1.04);
}

.attachment-database-page .hero::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(30, 36, 61, .95) 0, rgba(30, 36, 61, .84) 43%, rgba(30, 36, 61, .28) 70%, rgba(30, 36, 61, .08) 100%),
        linear-gradient(180deg, transparent 54%, rgba(30, 36, 61, .66) 100%);
}

.attachment-database-page .hero-content {
    position: relative;
    z-index: 1;
    width: min(1160px, calc(100% - 64px));
    margin: 0 auto;
    padding: 76px 0 62px;
}

.attachment-database-page .hero h1 {
    max-width: 790px;
    margin: 0 0 22px;
    color: var(--attach-signac-cream);
    font-size: clamp(44px, 5.55vw, 72px);
    line-height: 1.03;
    letter-spacing: -2.6px;
    text-wrap: balance;
}

.attachment-database-page .hero-lead {
    max-width: 690px;
    padding: 18px 22px 19px;
    border-left: 10px solid var(--attach-signac-yellow);
    color: #fffaf0;
    background: rgba(30, 36, 61, .6);
    font-size: 17px;
}

.attachment-database-page .hero-meta {
    grid-template-columns: 170px 170px minmax(250px, 1fr);
    max-width: 760px;
    margin-top: 42px;
    border: 2px solid rgba(242, 234, 216, .9);
    background: rgba(30, 36, 61, .72);
    box-shadow: 11px 11px 0 rgba(189, 92, 82, .7);
}

.attachment-database-page .hero-stat,
.attachment-database-page .hero-version {
    min-height: 84px;
    padding: 14px 18px;
}

.attachment-database-page .hero-stat { border-right-color: rgba(242, 234, 216, .5); }
.attachment-database-page .hero-stat strong { color: var(--attach-signac-cream); font-size: 31px; }
.attachment-database-page .hero-stat span { color: rgba(255, 250, 240, .78); font-size: 12px; }
.attachment-database-page .hero-version strong { color: var(--attach-signac-cream); font-size: 16px; }

.attachment-database-page .hero-actions {
    max-width: 760px;
    margin-top: 28px;
    gap: 14px;
}

.attachment-database-page .hero-actions .button {
    min-height: 68px;
    border: 2px solid var(--attach-signac-cream);
    color: var(--attach-signac-cream);
    background: rgba(30, 36, 61, .74);
    font-size: 18px;
}

.attachment-database-page .hero-actions .button:hover {
    color: var(--attach-signac-navy);
    background: var(--attach-signac-cream);
}

.attachment-database-page .hero-actions .view-link.active {
    color: var(--attach-signac-cream);
    background: var(--attach-signac-coral);
}

.attachment-database-page .hero-actions .view-link.active:hover {
    color: var(--attach-signac-navy);
    background: var(--attach-signac-yellow);
}

.attachment-database-page .scope-section {
    margin-top: 42px;
    padding: 32px 34px;
    border: 1px solid var(--ink);
    border-left: 14px solid var(--attach-signac-coral);
    background:
        linear-gradient(90deg, rgba(226, 191, 105, .29) 0 62%, rgba(108, 174, 174, .2) 62% 100%),
        #fffaf1;
    box-shadow: 10px 10px 0 rgba(37, 45, 74, .18);
}

.attachment-database-page .scope-label { font-size: 15px; }
.attachment-database-page .scope-section p { color: #303545; font-size: 16px; }

.attachment-database-page .taxonomy-dialog-open {
    min-height: 54px;
    padding: 12px 18px;
    border-width: 2px;
    background: rgba(255, 250, 241, .72);
    font-size: 14px;
}

.attachment-database-page .database-section { padding-top: 66px; }

.attachment-database-page .database-heading {
    margin-bottom: 20px;
    padding: 13px 0 13px 22px;
    border-left: 14px solid var(--attach-signac-violet);
    background: linear-gradient(90deg, rgba(108, 174, 174, .2), transparent 72%);
}

.attachment-database-page .database-heading h2 { font-size: 30px; }
.attachment-database-page .filter-panel { border-width: 2px; background: #fffaf5; }
.attachment-database-page .type-filter.active { color: var(--attach-signac-violet); border-bottom-color: var(--attach-signac-violet); }
.attachment-database-page .information-note { background: #e5dcc8; }
.attachment-database-page .site-footer { background: var(--attach-signac-navy); }

@media (max-width: 820px) {
    .attachment-database-page .hero { min-height: 620px; }
    .attachment-database-page .hero::after {
        background:
            linear-gradient(90deg, rgba(30, 36, 61, .91) 0, rgba(30, 36, 61, .66) 74%, rgba(30, 36, 61, .25) 100%),
            linear-gradient(180deg, transparent 48%, rgba(30, 36, 61, .74) 100%);
    }
    .attachment-database-page .scope-section {
        background:
            linear-gradient(180deg, rgba(226, 191, 105, .26) 0 58%, rgba(108, 174, 174, .18) 58% 100%),
            #fffaf1;
    }
}

@media (max-width: 580px) {
    .attachment-database-page .hero {
        min-height: 0;
        background:
            radial-gradient(circle at 84% 14%, #f2cf77 0 7%, #d98876 7.3% 9.4%, transparent 9.7%),
            linear-gradient(168deg, transparent 0 39%, rgba(189, 92, 82, .92) 39.4% 43.5%, transparent 43.9%),
            linear-gradient(176deg, transparent 0 53%, rgba(226, 191, 105, .74) 53.4% 57.5%, transparent 57.9%),
            linear-gradient(180deg, #95c0ba 0 34%, #648ca5 34% 57%, #4f5d83 57% 76%, #252d4a 76% 100%);
    }
    .attachment-database-page .hero-content { width: min(100% - 28px, 1160px); padding: 50px 0 46px; }
    .attachment-database-page .hero h1 { max-width: 360px; margin-bottom: 18px; font-size: 39px; letter-spacing: -1.5px; }
    .attachment-database-page .hero-lead { padding: 15px 16px; border-left-width: 8px; font-size: 16px; }
    .attachment-database-page .hero-meta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-top: 28px;
        box-shadow: 7px 7px 0 rgba(189, 92, 82, .68);
    }
    .attachment-database-page .hero-version {
        grid-column: 1 / -1;
        min-height: 62px;
        align-items: flex-start;
        border-top: 1px solid rgba(242, 234, 216, .5);
        text-align: left;
    }
    .attachment-database-page .hero-stat,
    .attachment-database-page .hero-version { padding: 11px 10px; }
    .attachment-database-page .hero-actions .button { min-height: 58px; padding: 10px 8px; font-size: 16px; }
    .attachment-database-page .scope-section {
        width: min(100% - 28px, 1160px);
        margin-top: 28px;
        padding: 25px 20px;
        border-left-width: 9px;
        box-shadow: 7px 7px 0 rgba(37, 45, 74, .16);
    }
    .attachment-database-page .database-section { padding-top: 48px; }
    .attachment-database-page .database-heading { padding-left: 16px; border-left-width: 9px; }
    .attachment-database-page .database-heading h2 { font-size: 25px; }
}

@media (prefers-reduced-motion: reduce) {
    .attachment-database-page .hero::before { transform: none; }
}