:root {
    color: #172027;
    background: #f6f8f6;
    font-family:
        Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 16px;
    line-height: 1.5;
    text-rendering: optimizeLegibility;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    min-width: 320px;
}

body {
    margin: 0;
    min-height: 100vh;
}

body,
button,
input {
    font: inherit;
}

a {
    color: inherit;
}

img {
    max-width: 100%;
}

button {
    -webkit-appearance: none;
    appearance: none;
}

:focus-visible {
    outline: 3px solid #f0b84f;
    outline-offset: 3px;
}

.app-shell {
    min-height: 100vh;
}

.app-shell__main {
    margin: 0 auto;
    max-width: 1160px;
    padding: 48px 24px 64px;
}

.site-header {
    background: #ffffff;
    border-bottom: 1px solid #d7dfd9;
    padding: 18px 24px;
}

.site-header::after,
.cause-card__meta::after,
.cause-detail__checklist-item::after {
    clear: both;
    content: "";
    display: table;
}

.site-header__brand {
    color: #172027;
    float: left;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.35;
    max-width: 38%;
    overflow-wrap: anywhere;
    text-decoration: none;
}

.site-header__brand:hover,
.site-header__brand:focus-visible,
.site-header__link:hover,
.site-header__link:focus-visible,
.cause-card__link:hover,
.cause-card__link:focus-visible {
    color: #125a75;
}

.site-header__nav {
    float: right;
    line-height: 1.35;
    max-width: 62%;
    text-align: right;
}

.site-header__link {
    color: #42505a;
    display: inline-block;
    font-size: 0.9375rem;
    font-weight: 700;
    margin-left: 18px;
    padding: 2px 0;
    text-decoration: none;
}

.site-footer {
    background: #ffffff;
    border-top: 1px solid #d7dfd9;
    padding: 20px 24px;
}

.site-footer__text {
    color: #5f6b67;
    font-size: 0.9375rem;
    margin: 0 auto;
    max-width: 1160px;
    overflow-wrap: anywhere;
}

.home-page,
.about-page,
.submit-page,
.tags-page,
.cause-detail,
.not-found {
    max-width: 100%;
}

.home-page__eyebrow,
.submit-page__eyebrow,
.cause-detail__eyebrow {
    color: #2f665b;
    font-size: 0.8125rem;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1.35;
    margin: 0 0 8px;
    text-transform: uppercase;
}

.home-page__title,
.about-page__title,
.submit-page__title,
.tags-page__title,
.cause-detail__title,
.not-found__title {
    color: #172027;
    font-size: 2.25rem;
    line-height: 1.14;
    margin: 0 0 16px;
    max-width: 900px;
    overflow-wrap: anywhere;
}

.home-page__intro,
.submit-page__intro,
.about-page__body,
.tags-page__body,
.cause-detail__body,
.not-found__body {
    color: #3d4945;
    font-size: 1.0625rem;
    line-height: 1.65;
    margin: 0;
    max-width: 760px;
    overflow-wrap: anywhere;
}

.home-page__controls {
    margin-top: 30px;
    max-width: 840px;
}

.home-page__summary {
    color: #2f665b;
    font-size: 0.9375rem;
    font-weight: 800;
    margin: 24px 0 0;
    overflow-wrap: anywhere;
}

.home-page__grid {
    margin-top: 16px;
}

.home-page__empty {
    background: #ffffff;
    border: 1px solid #d7dfd9;
    border-radius: 8px;
    margin-top: 16px;
    max-width: 760px;
    padding: 24px;
}

.home-page__empty-title {
    color: #172027;
    font-size: 1.125rem;
    line-height: 1.3;
    margin: 0 0 8px;
}

.home-page__empty-body {
    color: #5f6b67;
    line-height: 1.55;
    margin: 0;
    overflow-wrap: anywhere;
}

.search-bar {
    display: block;
    max-width: 720px;
}

.search-bar__label,
.filter-panel__label {
    color: #2f3c42;
    display: block;
    font-size: 0.875rem;
    font-weight: 800;
    line-height: 1.35;
    margin: 0 0 8px;
}

.search-bar__input {
    background: #ffffff;
    border: 1px solid #aebbb5;
    border-radius: 8px;
    color: #172027;
    display: block;
    min-height: 46px;
    padding: 10px 12px;
    width: 100%;
}

.search-bar__input::placeholder {
    color: #6f7b76;
}

.search-bar__input:focus {
    border-color: #125a75;
    outline: 3px solid #c9e7f1;
    outline-offset: 0;
}

.filter-panel {
    margin-top: 20px;
}

.filter-panel__controls {
    margin: -8px 0 0 -8px;
}

.filter-panel__button {
    background: #ffffff;
    border: 1px solid #aebbb5;
    border-radius: 8px;
    color: #2f3c42;
    cursor: pointer;
    display: inline-block;
    font-size: 0.9375rem;
    font-weight: 800;
    line-height: 1.2;
    margin: 8px 0 0 8px;
    min-height: 40px;
    max-width: 100%;
    overflow-wrap: anywhere;
    padding: 9px 12px;
    text-align: center;
    vertical-align: top;
}

.filter-panel__button:hover,
.filter-panel__button:focus-visible {
    border-color: #125a75;
    color: #125a75;
}

.filter-panel__button--active,
.filter-panel__button--active:hover,
.filter-panel__button--active:focus-visible {
    background: #125a75;
    border-color: #125a75;
    color: #ffffff;
}

.cause-card {
    background: #ffffff;
    border: 1px solid #d7dfd9;
    border-radius: 8px;
    margin-top: 16px;
    max-width: 840px;
    padding: 20px;
}

.cause-card__meta {
    min-height: 28px;
}

.cause-card__category,
.cause-card__severity {
    vertical-align: top;
}

.cause-card__category {
    color: #2f665b;
    display: inline-block;
    font-size: 0.8125rem;
    font-weight: 800;
    line-height: 1.4;
    max-width: calc(100% - 112px);
    overflow-wrap: anywhere;
    padding-right: 12px;
    text-transform: uppercase;
}

.cause-card__severity {
    border-radius: 999px;
    float: right;
    font-size: 0.8125rem;
    font-weight: 800;
    line-height: 1;
    text-align: right;
}

.cause-card__severity,
.cause-detail__severity {
    font-weight: 800;
}

.cause-card__severity--low {
    background: #e4f1e6;
    color: #2c6232;
}

.cause-card__severity--medium {
    background: #fff0cf;
    color: #7a5308;
}

.cause-card__severity--high {
    background: #ffe0dc;
    color: #9a2d24;
}

.cause-card__severity--low,
.cause-card__severity--medium,
.cause-card__severity--high {
    display: inline-block;
    max-width: 100%;
    overflow-wrap: anywhere;
    padding: 6px 8px;
}

.cause-card__title {
    color: #172027;
    font-size: 1.25rem;
    line-height: 1.3;
    margin: 14px 0 8px;
    overflow-wrap: anywhere;
}

.cause-card__link {
    text-decoration-color: transparent;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

.cause-card__link:hover,
.cause-card__link:focus-visible {
    text-decoration-color: currentColor;
}

.cause-card__impact {
    color: #3d4945;
    line-height: 1.58;
    margin: 0;
    overflow-wrap: anywhere;
}

.cause-card__tags,
.cause-detail__tags {
    margin: 8px 0 0 -8px;
}

.tag-pill {
    background: #e9efec;
    border: 1px solid #d8e1dc;
    border-radius: 999px;
    color: #2f3c42;
    display: inline-block;
    font-size: 0.8125rem;
    font-weight: 800;
    line-height: 1.15;
    margin: 8px 0 0 8px;
    max-width: 100%;
    overflow-wrap: anywhere;
    padding: 7px 9px;
    vertical-align: top;
}

.cause-detail__metadata,
.cause-detail__content,
.image-gallery,
.about-page__section,
.submit-page__panel,
.tags-page__index {
    margin-top: 32px;
}

.cause-detail__section-title,
.image-gallery__title,
.about-page__section-title,
.submit-page__section-title {
    color: #172027;
    font-size: 1.25rem;
    line-height: 1.3;
    margin: 0 0 14px;
    overflow-wrap: anywhere;
}

.cause-detail__checklist {
    background: #ffffff;
    border: 1px solid #d7dfd9;
    border-radius: 8px;
    margin: 0;
    max-width: 840px;
    overflow: hidden;
}

.cause-detail__checklist-item {
    border-top: 1px solid #d7dfd9;
    display: table;
    table-layout: fixed;
    width: 100%;
}

.cause-detail__checklist-item:first-child {
    border-top: 0;
}

.cause-detail__checklist-key,
.cause-detail__checklist-value {
    display: table-cell;
    line-height: 1.55;
    padding: 14px 16px;
    vertical-align: top;
}

.cause-detail__checklist-key {
    background: #f6f8f6;
    color: #2f665b;
    font-size: 0.8125rem;
    font-weight: 800;
    text-transform: uppercase;
    width: 190px;
}

.cause-detail__checklist-value {
    color: #172027;
    margin: 0;
    overflow-wrap: anywhere;
}

.cause-detail__severity--low {
    color: #2c6232;
}

.cause-detail__severity--medium {
    color: #7a5308;
}

.cause-detail__severity--high {
    color: #9a2d24;
}

.cause-detail__prose {
    color: #27332e;
    line-height: 1.68;
    max-width: 780px;
    overflow-wrap: anywhere;
}

.cause-detail__prose h2 {
    color: #172027;
    font-size: 1.125rem;
    line-height: 1.35;
    margin: 28px 0 8px;
}

.cause-detail__prose h2:first-child {
    margin-top: 0;
}

.cause-detail__prose p,
.cause-detail__prose ul,
.cause-detail__prose ol {
    margin: 0 0 16px;
}

.cause-detail__prose ul,
.cause-detail__prose ol {
    padding-left: 22px;
}

.cause-detail__prose li {
    margin-top: 6px;
}

.cause-detail__prose code {
    background: #eef2ef;
    border-radius: 4px;
    color: #1f3d55;
    font-size: 0.9375em;
    padding: 2px 4px;
}

.cause-detail--missing {
    max-width: 760px;
}

.image-gallery__items {
    margin-top: -16px;
}

.image-gallery__item {
    background: #ffffff;
    border: 1px solid #d7dfd9;
    border-radius: 8px;
    margin: 16px 0 0;
    max-width: 780px;
    overflow: hidden;
}

.image-gallery__image,
.image-gallery__fallback {
    background: #e9efec;
    display: block;
    min-height: 240px;
    width: 100%;
}

.image-gallery__image {
    height: auto;
}

.image-gallery__fallback {
    color: #5f6b67;
    font-weight: 800;
    padding: 108px 16px;
    text-align: center;
}

.image-gallery__caption {
    border-top: 1px solid #d7dfd9;
    padding: 12px 14px 14px;
}

.image-gallery__caption-text {
    color: #27332e;
    display: block;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.image-gallery__path {
    color: #5f6b67;
    display: block;
    font-size: 0.8125rem;
    margin-top: 8px;
    overflow-wrap: anywhere;
}

.about-page {
    max-width: 840px;
}

.submit-page {
    max-width: 840px;
}

.about-page__section {
    border-top: 1px solid #d7dfd9;
    padding-top: 28px;
}

.submit-page__panel {
    background: #ffffff;
    border: 1px solid #d7dfd9;
    border-radius: 8px;
    max-width: 780px;
    padding: 24px;
}

.about-page__text {
    color: #3d4945;
    line-height: 1.68;
    margin: 0 0 16px;
    max-width: 780px;
    overflow-wrap: anywhere;
}

.submit-page__text {
    color: #3d4945;
    line-height: 1.68;
    margin: 0 0 16px;
    max-width: 720px;
    overflow-wrap: anywhere;
}

.submit-page__button {
    background: #125a75;
    border: 1px solid #125a75;
    border-radius: 8px;
    color: #ffffff;
    display: inline-block;
    font-weight: 800;
    line-height: 1.2;
    margin-top: 8px;
    max-width: 100%;
    min-height: 44px;
    overflow-wrap: anywhere;
    padding: 12px 14px;
    text-align: center;
    text-decoration: none;
}

.submit-page__button:hover,
.submit-page__button:focus-visible {
    background: #0d455a;
    border-color: #0d455a;
}

.about-page__list {
    color: #3d4945;
    line-height: 1.65;
    margin: 12px 0 0;
    padding-left: 24px;
}

.about-page__list-item {
    margin-top: 10px;
    overflow-wrap: anywhere;
}

.about-page__list-item:first-child {
    margin-top: 0;
}

.about-page__list-item strong {
    color: #172027;
}

.contributors-page__list {
    border: 1px solid #d7dfd9;
    border-radius: 8px;
    margin-top: 14px;
    max-width: 760px;
    overflow: hidden;
}

.contributors-page__item {
    background: #ffffff;
    border-top: 1px solid #d7dfd9;
}

.contributors-page__item:first-child {
    border-top: 0;
}

.contributors-page__summary {
    color: #172027;
    cursor: pointer;
    font-weight: 800;
    line-height: 1.4;
    min-height: 48px;
    overflow-wrap: anywhere;
    padding: 13px 16px;
}

.contributors-page__summary::marker {
    color: #2f665b;
}

.contributors-page__name {
    text-decoration: none;
}

.contributors-page__name:hover,
.contributors-page__name:focus-visible,
.contributors-page__contribution a:hover,
.contributors-page__contribution a:focus-visible {
    color: #125a75;
}

.contributors-page__count {
    color: #5f6b67;
    font-weight: 700;
}

.contributors-page__contributions {
    border-top: 1px solid #d7dfd9;
    color: #3d4945;
    line-height: 1.55;
    list-style: none;
    margin: 0;
    padding: 10px 16px 14px 38px;
}

.contributors-page__contribution {
    margin-top: 8px;
    overflow-wrap: anywhere;
}

.contributors-page__contribution:first-child {
    margin-top: 0;
}

.tags-page {
    max-width: 900px;
}

.tags-page__index {
    border-top: 1px solid #d7dfd9;
    max-width: 760px;
}

.tags-page__group {
    border-bottom: 1px solid #d7dfd9;
    display: table;
    table-layout: fixed;
    width: 100%;
}

.tags-page__letter {
    color: #2f665b;
    display: table-cell;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.4;
    margin: 0;
    padding: 14px 16px 14px 0;
    text-transform: uppercase;
    vertical-align: top;
    width: 56px;
}

.tags-page__list {
    display: table-cell;
    list-style: none;
    margin: 0;
    padding: 8px 0;
    vertical-align: top;
}

.tags-page__item {
    margin: 0;
}

.tags-page__link {
    border-radius: 6px;
    color: #172027;
    display: table;
    min-height: 34px;
    padding: 5px 8px;
    text-decoration: none;
    width: 100%;
}

.tags-page__link:hover,
.tags-page__link:focus-visible {
    background: #eef4f1;
    color: #125a75;
}

.tags-page__name,
.tags-page__count {
    display: table-cell;
    line-height: 1.45;
    vertical-align: middle;
}

.tags-page__name {
    font-weight: 800;
    overflow-wrap: anywhere;
    padding-right: 8px;
}

.tags-page__count {
    color: #5f6b67;
    font-size: 0.875rem;
    font-weight: 800;
    text-align: right;
    white-space: nowrap;
    width: 44px;
}

@media (max-width: 720px) {
    .site-header__brand,
    .site-header__nav {
        float: none;
        max-width: none;
        text-align: left;
    }

    .site-header__nav {
        margin: 14px 0 0 -16px;
    }

    .site-header__link {
        margin: 0 0 0 16px;
    }

    .app-shell__main {
        padding: 36px 18px 52px;
    }

    .home-page__title,
    .about-page__title,
    .tags-page__title,
    .cause-detail__title,
    .not-found__title {
        font-size: 1.875rem;
    }

    .home-page__intro,
    .about-page__body,
    .tags-page__body,
    .cause-detail__body,
    .not-found__body {
        font-size: 1rem;
    }

    .cause-card,
    .home-page__empty {
        padding: 18px;
    }

    .cause-card__category {
        display: block;
        float: none;
        max-width: none;
        text-align: left;
        width: auto;
    }

    .cause-card__severity {
        display: inline-block;
        float: none;
        margin-top: 8px;
        text-align: left;
        width: auto;
    }

    .cause-detail__checklist-item,
    .cause-detail__checklist-key,
    .cause-detail__checklist-value {
        display: block;
        width: auto;
    }

    .cause-detail__checklist-key {
        padding-bottom: 4px;
    }

    .cause-detail__checklist-value {
        padding-top: 4px;
    }

    .tags-page__group,
    .tags-page__letter,
    .tags-page__list,
    .tags-page__link,
    .tags-page__name,
    .tags-page__count {
        display: block;
        width: auto;
    }

    .tags-page__letter {
        padding: 14px 0 4px;
    }

    .tags-page__list {
        padding: 0 0 8px;
    }

    .tags-page__link {
        min-height: 0;
        padding: 6px 0;
    }

    .tags-page__name {
        padding-right: 0;
    }

    .tags-page__count {
        margin-top: 2px;
        text-align: left;
        white-space: normal;
    }
}

@media (max-width: 420px) {
    .site-header,
    .site-footer {
        padding-left: 16px;
        padding-right: 16px;
    }

    .app-shell__main {
        padding-left: 16px;
        padding-right: 16px;
    }

    .filter-panel__button {
        width: 100%;
    }
}