:root {
    --document-ink: #20271f;
    --document-muted: #667063;
    --document-line: #dfe4da;
    --document-paper: #f4f5f0;
    --document-white: #fff;
    --document-dark: #1c2b20;
    --document-green: #667c32;
    --document-accent: #a8bd69;
}

.document-library {
    min-height: 70vh;
    overflow: clip;
    background: var(--document-paper);
    color: var(--document-ink);
}

.document-hero {
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    background:
        radial-gradient(circle at 86% 24%, rgba(168, 189, 105, .13), transparent 27rem),
        linear-gradient(132deg, #142118, #2f4028);
}

.document-hero::after {
    position: absolute;
    right: -8rem;
    bottom: -18rem;
    width: 35rem;
    height: 35rem;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 50%;
    box-shadow: 0 0 0 5rem rgba(255, 255, 255, .018), 0 0 0 10rem rgba(255, 255, 255, .012);
    content: "";
    pointer-events: none;
}

.document-hero__inner {
    position: relative;
    z-index: 1;
    width: min(1180px, calc(100% - 2rem));
    margin: auto;
    padding: 1.65rem 0 2.9rem;
}

.document-hero nav {
    display: flex;
    gap: .65rem;
    margin-bottom: 2rem;
    color: #b8c2af;
    font-size: .76rem;
}

.document-hero nav a {
    color: #e2e9dd;
    text-decoration: none;
}

.document-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 3rem;
}

.document-eyebrow {
    margin: 0 0 .55rem !important;
    color: var(--document-accent) !important;
    font-size: .72rem !important;
    font-weight: 800;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.document-hero h1 {
    margin: 0;
    color: #fff;
    font-family: Rajdhani, sans-serif;
    font-size: clamp(2.9rem, 6vw, 5.2rem);
    font-weight: 600;
    line-height: .95;
    letter-spacing: -.035em;
}

.document-hero__grid > div > p:last-child {
    max-width: 42rem;
    margin: 1rem 0 0;
    color: #d0d8cc;
    font-size: 1rem;
    line-height: 1.6;
}

.document-hero dl {
    display: flex;
    margin: 0;
}

.document-hero dl div {
    display: flex;
    min-width: 8.5rem;
    flex-direction: column-reverse;
    border-left: 1px solid rgba(255, 255, 255, .15);
    padding-left: 1.4rem;
}

.document-hero dt {
    color: #aab5a6;
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.document-hero dd {
    margin: 0;
    color: #f4f7f0;
    font-family: Rajdhani, sans-serif;
    font-size: 2.4rem;
    font-weight: 600;
}

.document-layout {
    display: grid;
    width: min(1180px, calc(100% - 2rem));
    margin: auto;
    grid-template-columns: 16rem minmax(0, 1fr);
    gap: 2rem;
    padding: 2.5rem 0 5rem;
}

.document-sidebar {
    position: sticky;
    top: 7rem;
    align-self: start;
    overflow: hidden;
    border: 1px solid var(--document-line);
    border-radius: 1rem;
    background: var(--document-white);
    box-shadow: 0 14px 40px rgba(32, 45, 30, .04);
}

.document-sidebar__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #e8ebe4;
    padding: 1rem 1.1rem;
}

.document-sidebar__head p {
    margin: 0;
    font-size: .69rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.document-sidebar__head small {
    display: none;
}

.document-sidebar__head > span {
    display: grid;
    width: 1.8rem;
    height: 1.8rem;
    place-items: center;
    border-radius: 50%;
    background: #edf1e3;
    color: #596b31;
    font-size: .68rem;
    font-weight: 800;
}

.document-sidebar nav {
    max-height: calc(100vh - 13rem);
    overflow-y: auto;
    padding: .55rem;
}

.document-sidebar nav a {
    display: flex;
    min-height: 2.75rem;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    border-radius: .7rem;
    padding: .7rem;
    color: #596257;
    font-size: .8rem;
    font-weight: 600;
    text-decoration: none;
    transition: background .18s ease, color .18s ease, transform .18s ease;
}

.document-sidebar nav a:hover {
    background: #f5f7f1;
    color: #344022;
    transform: translateX(2px);
}

.document-sidebar nav a.is-active {
    background: var(--document-dark);
    color: #fff;
}

.document-sidebar nav b {
    display: grid;
    min-width: 1.6rem;
    height: 1.6rem;
    place-items: center;
    border-radius: 999px;
    background: rgba(111, 133, 55, .11);
    padding: 0 .3rem;
    font-size: .65rem;
}

.document-sidebar nav a.is-active b {
    background: rgba(255, 255, 255, .14);
}

.document-results {
    min-width: 0;
}

.document-filter {
    overflow: hidden;
    border: 1px solid rgba(47, 61, 43, .12);
    border-radius: 1.15rem;
    background: linear-gradient(145deg, rgba(255, 255, 255, .99), rgba(249, 251, 246, .97));
    box-shadow: 0 18px 50px rgba(34, 46, 32, .06), inset 0 1px rgba(255, 255, 255, .9);
}

.document-filter__search-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: .8rem;
    padding: 1.2rem;
}

.document-filter__controls {
    display: grid;
    grid-template-columns: minmax(11rem, 1.6fr) repeat(3, minmax(8rem, 1fr));
    gap: .7rem;
    border-top: 1px solid #e7ebe3;
    background: rgba(241, 244, 236, .54);
    padding: 1rem 1.2rem 1.2rem;
}

.document-filter__field {
    display: grid;
    min-width: 0;
    gap: .42rem;
}

.document-filter__field > label {
    margin: 0;
    color: #596057;
    font-size: .65rem;
    font-weight: 850;
    letter-spacing: .09em;
    line-height: 1.1;
    text-transform: uppercase;
}

.document-search-control {
    position: relative;
    width: 100%;
    height: 3.35rem;
}

.document-filter input,
.document-filter select {
    width: 100%;
    height: 3rem;
    min-height: 3rem;
    margin: 0;
    border: 1px solid rgba(57, 72, 51, .17);
    border-radius: .8rem;
    background: #fff;
    padding: 0 .95rem;
    color: #242c22;
    font: 600 .82rem/1 Roboto, sans-serif;
    outline: 0;
    box-shadow: inset 0 1px 2px rgba(34, 45, 31, .025);
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.document-filter input {
    height: 3.35rem;
    min-height: 3.35rem;
    padding-right: 3rem;
    padding-left: 3rem;
    font-size: .92rem;
}

.document-filter select {
    padding-right: 2.25rem;
    cursor: pointer;
}

.document-filter input:hover,
.document-filter select:hover {
    border-color: rgba(94, 117, 49, .4);
}

.document-filter input:focus,
.document-filter select:focus {
    border-color: #758c3d;
    box-shadow: 0 0 0 4px rgba(117, 140, 61, .12), 0 8px 20px rgba(48, 64, 38, .05);
}

.document-search-icon {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 1rem;
    display: grid;
    width: 1.3rem;
    height: 1.3rem;
    place-items: center;
    color: #6f7c69;
    pointer-events: none;
    transform: translateY(-50%);
}

.document-search-icon svg,
.document-filter__search-button svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.document-search-clear {
    position: absolute;
    top: 50%;
    right: .65rem;
    display: grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    border-radius: 50%;
    color: #65705f;
    font-size: 1.3rem;
    text-decoration: none;
    transform: translateY(-50%);
}

.document-search-clear:hover {
    background: #edf1e7;
    color: #263226;
}

.document-filter__search-button {
    display: inline-flex;
    height: 3.35rem;
    min-width: 8rem;
    align-items: center;
    justify-content: center;
    gap: .65rem;
    border: 0;
    border-radius: .85rem;
    background: linear-gradient(135deg, #71883a, #536a27);
    padding: 0 1.35rem;
    box-shadow: 0 10px 25px rgba(79, 99, 37, .23), inset 0 1px rgba(255, 255, 255, .2);
    color: #fff;
    font: 800 .78rem/1 Roboto, sans-serif;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.document-filter__search-button svg {
    width: 1.1rem;
    height: 1.1rem;
}

.document-filter__search-button:hover {
    background: linear-gradient(135deg, #7c9344, #5c722d);
    box-shadow: 0 14px 29px rgba(79, 99, 37, .27);
    transform: translateY(-1px);
}

.document-filter__search-button:focus-visible,
.document-search-clear:focus-visible,
.document-sidebar a:focus-visible,
.document-card a:focus-visible,
.document-pagination a:focus-visible,
.document-active-filters a:focus-visible {
    outline: 3px solid rgba(117, 140, 61, .35);
    outline-offset: 2px;
}

.document-active-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .45rem;
    border-top: 1px solid #e6eae1;
    padding: .8rem 1.2rem 1rem;
}

.document-active-filters > span {
    margin-right: .2rem;
    color: #687262;
    font-size: .67rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.document-active-filters a {
    display: inline-flex;
    min-height: 2rem;
    align-items: center;
    gap: .45rem;
    border: 1px solid #dce3d1;
    border-radius: 999px;
    background: #f2f5ec;
    padding: .35rem .7rem;
    color: #46533d;
    font-size: .7rem;
    font-weight: 750;
    text-decoration: none;
}

.document-active-filters a b {
    color: #6a7c3a;
    font-size: .9rem;
}

.document-active-filters .document-filter__reset {
    border-color: transparent;
    background: transparent;
    color: #687262;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.document-results__head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    padding: 2rem .15rem 1rem;
}

.document-results__head p {
    margin: 0 0 .25rem;
    color: #74806f;
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.document-results__head h2 {
    margin: 0;
    color: #222a21;
    font-family: Rajdhani, sans-serif;
    font-size: 1.8rem;
    font-weight: 650;
    line-height: 1.08;
}

.document-results__head > span {
    color: #687166;
    font-size: .78rem;
}

.document-results__head > span strong {
    color: #33402d;
    font-size: 1rem;
}

.document-list {
    display: grid;
    gap: .75rem;
}

.document-card {
    display: grid;
    grid-template-columns: 4.2rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    border: 1px solid #dde2d8;
    border-radius: 1rem;
    background: rgba(255, 255, 255, .94);
    padding: 1rem;
    box-shadow: 0 9px 30px rgba(35, 45, 32, .035);
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.document-card:hover {
    border-color: #c5ceb5;
    box-shadow: 0 15px 38px rgba(35, 45, 32, .08);
    transform: translateY(-2px);
}

.document-type {
    display: grid;
    width: 3.6rem;
    height: 4.25rem;
    place-items: end center;
    border-radius: .35rem .35rem .65rem .35rem;
    background: #e8ece2;
    padding-bottom: .55rem;
    color: #536043;
    clip-path: polygon(0 0, 72% 0, 100% 23%, 100% 100%, 0 100%);
}

.document-type span {
    font-size: .61rem;
    font-weight: 900;
    letter-spacing: .05em;
}

.document-type--pdf { background: #f5dfdc; color: #973c34; }
.document-type--doc,
.document-type--docx { background: #dde9f5; color: #35638f; }
.document-type--xls,
.document-type--xlsx,
.document-type--csv,
.document-type--ods { background: #dcefe5; color: #2d704f; }
.document-type--ppt,
.document-type--pptx,
.document-type--odp { background: #f5e5d8; color: #98532e; }
.document-type--zip { background: #ece3f1; color: #704b80; }

.document-card__body {
    min-width: 0;
}

.document-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .9rem;
    color: #747e71;
    font-size: .68rem;
}

.document-card__meta span {
    color: #607332;
    font-weight: 850;
    letter-spacing: .045em;
    text-transform: uppercase;
}

.document-card__meta em {
    font-style: normal;
}

.document-card h3 {
    margin: .35rem 0 .25rem;
    font-family: Rajdhani, sans-serif;
    font-size: 1.18rem;
    font-weight: 650;
    line-height: 1.25;
}

.document-card__title-link {
    color: #222a21;
    text-decoration: none;
}

.document-card__title-link:hover {
    color: #5b702c;
}

.document-card__body > p {
    display: -webkit-box;
    max-width: 42rem;
    overflow: hidden;
    margin: .15rem 0 .45rem;
    color: #667064;
    font-size: .78rem;
    line-height: 1.5;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.document-card__body > small {
    color: #7d867a;
    font-size: .68rem;
    font-weight: 750;
    letter-spacing: .045em;
}

.document-card__actions {
    display: flex;
    gap: .45rem;
}

.document-card__actions a {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    justify-content: center;
    border: 1px solid #d5dbd0;
    border-radius: 999px;
    padding: .55rem .95rem;
    color: #43503e;
    font-size: .72rem;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}

.document-card__actions a:hover {
    border-color: #bfc9b3;
    background: #f5f7f1;
}

.document-card__actions a.is-primary {
    border-color: var(--document-dark);
    background: var(--document-dark);
    color: #fff;
}

.document-card__actions a.is-primary:hover {
    background: #2c402e;
}

.document-card__actions a span {
    margin-left: .38rem;
    font-size: 1rem;
}

.document-empty {
    display: grid;
    justify-items: center;
    border: 1px dashed #c8d0be;
    border-radius: 1rem;
    background: rgba(255, 255, 255, .65);
    padding: 3.2rem 1.5rem;
    text-align: center;
}

.document-empty > span {
    display: grid;
    width: 3.5rem;
    height: 3.5rem;
    margin-bottom: 1rem;
    place-items: center;
    border-radius: 50%;
    background: #edf2e4;
    color: #5f7432;
    font: 500 2rem/1 Rajdhani, sans-serif;
}

.document-empty strong {
    font-family: Rajdhani, sans-serif;
    font-size: 1.35rem;
}

.document-empty p {
    max-width: 30rem;
    margin: .65rem 0 1rem;
    color: #697367;
    font-size: .84rem;
}

.document-empty a {
    color: #52682a;
    font-weight: 800;
}

.document-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .8rem;
    margin-top: 2rem;
}

.document-pagination a,
.document-pagination > span {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    border: 1px solid #d5dbd0;
    border-radius: 999px;
    background: #fff;
    padding: .65rem 1rem;
    color: #4b5747;
    font-size: .75rem;
    font-weight: 700;
    text-decoration: none;
}

.document-pagination > span {
    background: transparent;
    font-weight: 600;
}

@media (max-width: 1050px) {
    .document-filter__controls {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .document-card {
        grid-template-columns: 3.6rem minmax(0, 1fr);
    }

    .document-card__actions {
        grid-column: 2;
        justify-self: start;
    }
}

@media (max-width: 900px) {
    .document-layout {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .document-sidebar {
        position: static;
        top: auto;
    }

    .document-sidebar nav {
        display: flex;
        max-height: none;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
    }

    .document-sidebar nav::-webkit-scrollbar {
        display: none;
    }

    .document-sidebar nav a {
        flex: 0 0 auto;
    }
}

.document-filter-toggle {
    display: none;
}

.document-filter__controls[hidden] {
    display: none !important;
}
@media (max-width: 620px) {
    .document-filter-toggle {
        display: flex;
        width: 100%;
        min-height: 3rem;
        align-items: center;
        gap: .55rem;
        border: 0;
        border-top: 1px solid #e7ebe3;
        background: rgba(241, 244, 236, .54);
        padding: .75rem .95rem;
        color: #3f4c39;
        font: 800 .72rem/1 Roboto, sans-serif;
        letter-spacing: .04em;
        cursor: pointer;
    }

    .document-filter-toggle b {
        display: grid;
        min-width: 1.45rem;
        height: 1.45rem;
        margin-left: auto;
        place-items: center;
        border-radius: 50%;
        background: #e3ead5;
        color: #586e2c;
        font-size: .66rem;
    }

    .document-filter-toggle b:empty {
        display: none;
    }

    .document-filter-toggle svg {
        width: 1rem;
        height: 1rem;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        transition: transform .2s ease;
    }

    .document-filter-toggle[aria-expanded="true"] svg {
        transform: rotate(180deg);
    }

    .document-hero__inner {
        padding: 1.2rem 0 2rem;
    }

    .document-hero nav {
        margin-bottom: 1.25rem;
        font-size: .7rem;
    }

    .document-hero__grid {
        grid-template-columns: 1fr;
    }

    .document-hero h1 {
        font-size: clamp(2.55rem, 13vw, 3.35rem);
    }

    .document-hero__grid > div > p:last-child {
        margin-top: .8rem;
        font-size: .9rem;
        line-height: 1.5;
    }

    .document-hero dl {
        display: none;
    }

    .document-layout {
        display: flex;
        width: min(100% - 1.5rem, 1180px);
        flex-direction: column;
        gap: 1rem;
        padding: 1rem 0 4rem;
    }

    .document-sidebar,
    .document-results {
        position: static;
        top: auto;
        width: 100%;
        min-width: 0;
        margin: 0;
        transform: none;
    }

    .document-sidebar {
        overflow: hidden;
        border-radius: .95rem;
    }

    .document-sidebar__head {
        padding: .8rem .9rem .7rem;
    }

    .document-sidebar__head > div {
        min-width: 0;
    }

    .document-sidebar__head small {
        display: block;
        margin-top: .2rem;
        color: #778174;
        font-size: .62rem;
    }

    .document-sidebar nav {
        min-height: 4rem;
        align-items: center;
        gap: .5rem;
        padding: .55rem .7rem .75rem;
        scroll-padding-inline: .7rem;
        scroll-snap-type: x proximity;
    }

    .document-sidebar nav a {
        min-height: 2.75rem;
        max-width: 80vw;
        scroll-snap-align: start;
        padding: .65rem .78rem;
        white-space: nowrap;
    }

    .document-sidebar nav a span {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .document-filter {
        border-radius: 1rem;
    }

    .document-filter__search-row {
        grid-template-columns: minmax(0, 1fr) 3.35rem;
        gap: .55rem;
        padding: .9rem;
    }

    .document-filter__search-button {
        min-width: 0;
        width: 3.35rem;
        padding: 0;
        border-radius: .85rem;
    }

    .document-filter__search-button span {
        position: absolute;
        overflow: hidden;
        width: 1px;
        height: 1px;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .document-filter__search-button svg {
        width: 1.25rem;
        height: 1.25rem;
    }

    .document-filter__field > label {
        font-size: .62rem;
    }

    .document-filter__controls {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .65rem;
        padding: .85rem .9rem 1rem;
    }

    .document-filter__controls .document-filter__field:first-child,
    .document-filter__controls .document-filter__field:last-child {
        grid-column: 1 / -1;
    }

    .document-filter input,
    .document-filter select {
        min-height: 3rem;
        font-size: .8rem;
    }

    .document-active-filters {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding: .75rem .9rem .9rem;
        scrollbar-width: none;
    }

    .document-active-filters::-webkit-scrollbar {
        display: none;
    }

    .document-active-filters > span,
    .document-active-filters a {
        flex: 0 0 auto;
    }

    .document-results__head {
        align-items: start;
        flex-direction: column;
        gap: .35rem;
        padding: 1.45rem .15rem .8rem;
    }

    .document-results__head h2 {
        font-size: 1.55rem;
    }

    .document-card {
        grid-template-columns: 3rem minmax(0, 1fr);
        gap: .8rem;
        border-radius: .95rem;
        padding: .85rem;
    }

    .document-type {
        width: 2.85rem;
        height: 3.6rem;
    }

    .document-card__meta {
        gap: .25rem .7rem;
        font-size: .66rem;
    }

    .document-card h3 {
        margin-top: .3rem;
        font-size: 1.08rem;
    }

    .document-card__body > p {
        font-size: .75rem;
        -webkit-line-clamp: 2;
    }

    .document-card__actions {
        grid-column: 1 / -1;
        width: 100%;
        justify-self: stretch;
    }

    .document-card__actions a {
        min-height: 3rem;
        flex: 1;
        font-size: .75rem;
    }

    .document-pagination {
        gap: .45rem;
    }

    .document-pagination a,
    .document-pagination > span {
        min-height: 2.8rem;
        padding: .6rem .8rem;
    }
}

@media (max-width: 370px) {
    .document-layout {
        width: min(100% - 1rem, 1180px);
    }

    .document-filter__search-row {
        padding: .75rem;
    }

    .document-filter__controls {
        padding-inline: .75rem;
    }

    .document-filter select {
        padding-inline: .7rem 1.8rem;
        font-size: .74rem;
    }

    .document-card {
        padding: .75rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .document-sidebar nav a,
    .document-filter__search-button,
    .document-card {
        transition: none;
    }

    .document-card:hover,
    .document-filter__search-button:hover {
        transform: none;
    }
}