.home-hero {
    position: relative;
    height: clamp(500px, calc(100svh - 190px), 640px);
    min-height: 500px;
    overflow: hidden;
    color: var(--white);
    background-color: #263033;
    background-image: url('/assets/images/hero-smart-living.jpg');
    background-repeat: no-repeat;
    background-position: center 48%;
    background-size: cover;
}

.home-hero__shade {
    position: absolute;
    inset: 0;
    background: rgba(9, 14, 16, .64);
}

.home-hero__inner {
    position: relative;
    display: flex;
    height: 100%;
    align-items: center;
}

.home-hero__content {
    width: min(690px, 70%);
}

.home-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 16px;
    color: #dce1e2;
    font-size: 12px;
    font-weight: 800;
}

.home-eyebrow span {
    width: 30px;
    height: 3px;
    background: var(--signal);
}

.home-hero h1 {
    margin: 0;
    font-size: 76px;
    line-height: 1;
}

.home-hero__lead {
    margin: 20px 0 0;
    color: var(--signal);
    font-size: 25px;
    font-weight: 800;
}

.home-hero__copy {
    max-width: 620px;
    margin: 15px 0 0;
    color: #e1e5e5;
    font-size: 17px;
}

.home-search {
    display: flex;
    width: min(610px, 100%);
    min-height: 54px;
    margin-top: 28px;
    background: var(--white);
}

.home-search input {
    min-width: 0;
    flex: 1;
    padding: 13px 18px;
    border: 0;
    outline: 0;
    color: var(--ink);
}

.home-search button {
    min-width: 118px;
    border: 0;
    color: var(--ink);
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    background: var(--signal);
}

.home-hero__quicklinks {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin-top: 17px;
    color: #d6dbdc;
    font-size: 12px;
}

.home-hero__quicklinks span {
    color: #90999b;
}

.home-hero__quicklinks a {
    border-bottom: 1px solid #788184;
}

.home-hero__quicklinks a:hover {
    color: var(--signal);
    border-color: var(--signal);
}

.home-hero__stamp {
    position: absolute;
    right: max(24px, calc((100vw - var(--container)) / 2));
    bottom: 28px;
    display: grid;
    width: 116px;
    height: 116px;
    place-content: center;
    border: 2px solid var(--signal);
    color: var(--signal);
    text-align: center;
    transform: rotate(-5deg);
}

.home-hero__stamp strong,
.home-hero__stamp span {
    display: block;
}

.home-hero__stamp strong {
    font-size: 15px;
}

.home-hero__stamp span {
    font-size: 12px;
}

.home-signal {
    color: var(--white);
    background: var(--green);
}

.home-signal__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.home-signal__grid p {
    display: grid;
    grid-template-columns: 34px 1fr;
    margin: 0;
    padding: 19px 30px;
    border-right: 1px solid rgba(255, 255, 255, .22);
}

.home-signal__grid p:first-child {
    padding-left: 0;
}

.home-signal__grid p:last-child {
    border-right: 0;
}

.home-signal__grid span {
    grid-row: 1 / 3;
    color: #a5d3bf;
    font-size: 12px;
    font-weight: 800;
}

.home-signal__grid strong {
    font-size: 14px;
}

.home-signal__grid small {
    color: #cbe4d9;
    font-size: 11px;
}

.home-decisions,
.home-latest {
    padding: 88px 0;
}

.home-decisions__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.decision-entry {
    position: relative;
    display: flex;
    min-height: 220px;
    flex-direction: column;
    justify-content: space-between;
    padding: 28px;
    border-right: 1px solid var(--line);
    background: rgba(255, 255, 255, .34);
}

.decision-entry:last-child {
    border-right: 0;
}

.decision-entry:hover {
    color: var(--white);
    background: var(--ink);
}

.decision-entry__number {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid currentColor;
    font-size: 12px;
    font-weight: 800;
}

.decision-entry p,
.decision-entry h3 {
    margin: 0;
}

.decision-entry p {
    color: var(--muted);
    font-size: 12px;
}

.decision-entry:hover p {
    color: #aab2b4;
}

.decision-entry h3 {
    font-size: 25px;
}

.decision-entry strong {
    color: var(--green);
    font-size: 13px;
}

.decision-entry--budget strong {
    color: var(--blue);
}

.decision-entry--solve strong {
    color: var(--red);
}

.decision-entry:hover strong {
    color: var(--signal);
}

.home-categories {
    padding: 88px 0 94px;
    color: var(--white);
    background: var(--ink);
}

.section-heading--dark .section-kicker,
.section-heading--dark h2 {
    color: var(--white);
}

.section-heading--dark > p {
    color: #a9b1b3;
}

.home-categories__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid #40484b;
    border-left: 1px solid #40484b;
}

.category-cluster {
    min-height: 300px;
    padding: 25px;
    border-right: 1px solid #40484b;
    border-bottom: 1px solid #40484b;
}

.category-cluster:hover {
    background: #20272a;
}

.category-cluster__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #818b8e;
    font-size: 11px;
}

.category-cluster__head a {
    color: var(--signal);
}

.category-cluster h3 {
    margin: 34px 0 7px;
    font-size: 25px;
}

.category-cluster > p {
    min-height: 42px;
    margin: 0;
    color: #aeb6b8;
    font-size: 13px;
}

.category-cluster__children {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 24px;
}

.category-cluster__children a {
    padding: 6px 9px;
    border: 1px solid #485154;
    color: #d4d9da;
    font-size: 11px;
}

.category-cluster__children a:hover {
    border-color: var(--signal);
    color: var(--signal);
}

.home-latest__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 34px 24px;
}

.latest-entry__media {
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--paper-2);
}

.latest-entry__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .25s ease;
}

.latest-entry:hover .latest-entry__image {
    transform: scale(1.025);
}

.latest-entry__meta {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    margin-top: 15px;
    color: var(--muted);
    font-size: 11px;
}

.latest-entry__meta a {
    color: var(--green);
    font-weight: 800;
}

.latest-entry h3 {
    margin: 8px 0 0;
    font-size: 19px;
    line-height: 1.45;
}

.latest-entry h3 a:hover {
    color: var(--green);
}

.latest-entry > p {
    display: -webkit-box;
    margin: 8px 0 0;
    overflow: hidden;
    color: var(--muted);
    font-size: 13px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.home-method {
    padding: 90px 0;
    background: var(--signal);
}

.home-method__layout {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 90px;
}

.home-method__intro .section-kicker {
    color: #51620f;
}

.home-method__intro h2 {
    margin: 7px 0 0;
    max-width: 480px;
    font-size: 38px;
    line-height: 1.2;
}

.home-method__intro > p:not(.section-kicker) {
    margin: 20px 0 0;
    color: #3d461c;
}

.home-method__intro > a {
    display: inline-block;
    margin-top: 26px;
    padding-bottom: 4px;
    border-bottom: 2px solid var(--ink);
    font-size: 13px;
    font-weight: 800;
}

.home-method__steps {
    margin: 0;
    padding: 0;
    border-top: 2px solid var(--ink);
    list-style: none;
}

.home-method__steps li {
    display: grid;
    grid-template-columns: 55px 1fr;
    gap: 10px;
    padding: 18px 0;
    border-bottom: 1px solid rgba(22, 27, 29, .28);
}

.home-method__steps span {
    font-size: 11px;
    font-weight: 800;
}

.home-method__steps strong {
    font-size: 16px;
}

.home-method__steps p {
    margin: 3px 0 0;
    color: #4d5726;
    font-size: 13px;
}

.home-friends {
    padding: 24px 0;
    border-top: 1px solid var(--line);
    background: var(--paper);
}

.home-friends__inner {
    display: flex;
    align-items: center;
    gap: 28px;
}

.home-friends h2 {
    margin: 0;
    font-size: 13px;
}

.home-friends__inner > div {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    color: var(--muted);
    font-size: 12px;
}

@media (max-width: 980px) {
    .home-hero {
        height: clamp(520px, calc(100svh - 130px), 620px);
    }

    .home-hero__content {
        width: min(700px, 88%);
    }

    .home-hero h1 {
        font-size: 60px;
    }

    .home-hero__stamp {
        display: none;
    }

    .home-decisions__grid,
    .home-categories__grid,
    .home-latest__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .decision-entry:nth-child(2) {
        border-right: 0;
    }

    .decision-entry:last-child {
        grid-column: 1 / -1;
        border-top: 1px solid var(--line);
    }

    .home-method__layout {
        gap: 50px;
    }
}

@media (max-width: 680px) {
    .home-hero {
        height: clamp(530px, calc(100svh - 105px), 590px);
        min-height: 530px;
        background-position: 64% center;
    }

    .home-hero__shade {
        background: rgba(9, 14, 16, .72);
    }

    .home-hero__content {
        width: 100%;
    }

    .home-hero h1 {
        font-size: 48px;
    }

    .home-hero__lead {
        font-size: 21px;
    }

    .home-hero__copy {
        font-size: 15px;
    }

    .home-search {
        min-height: 50px;
    }

    .home-search button {
        min-width: 96px;
    }

    .home-signal__grid {
        grid-template-columns: 1fr;
    }

    .home-signal__grid p,
    .home-signal__grid p:first-child {
        padding: 13px 0;
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, .2);
    }

    .home-signal__grid p:last-child {
        border-bottom: 0;
    }

    .home-decisions,
    .home-latest,
    .home-categories,
    .home-method {
        padding: 62px 0;
    }

    .home-decisions__grid,
    .home-categories__grid,
    .home-latest__grid,
    .home-method__layout {
        grid-template-columns: 1fr;
    }

    .decision-entry,
    .decision-entry:nth-child(2) {
        min-height: 190px;
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .decision-entry:last-child {
        grid-column: auto;
        border-top: 0;
        border-bottom: 0;
    }

    .category-cluster {
        min-height: auto;
    }

    .home-latest__grid {
        gap: 34px;
    }

    .home-method__layout {
        gap: 42px;
    }

    .home-method__intro h2 {
        font-size: 31px;
    }

    .home-friends__inner {
        display: block;
    }

    .home-friends__inner > div {
        margin-top: 10px;
    }
}