/* YouthConnect landing page. Scoped to keep existing pages independent. */
.yc-home {
    --ink: #123c29;
    --muted: #52635a;
    --line: #dce8df;
    color: #243129;
    background: #fff;
    padding: 20px 0 34px;
    overflow-wrap: anywhere
}

    .yc-home * {
        box-sizing: border-box
    }

    .yc-home [hidden] {
        display: none !important
    }

.yc-shell {
    width: min(100% - 32px,1120px);
    margin: auto
}

.yc-home h1, .yc-home h2, .yc-home h3, .yc-home p {
    margin: 0
}

.yc-home a {
    text-decoration: none
}

    .yc-home a:focus-visible, .yc-home button:focus-visible, .yc-home summary:focus-visible {
        outline: 3px solid #d9a441;
        outline-offset: 4px
    }

.yc-welcome {
    position: relative;
    display: grid;
    overflow: hidden;
    background: #176b3a;
    border-radius: 22px;
    color: white
}

.yc-welcome-copy {
    padding: 26px 24px;
    position: relative;
    z-index: 1
}

.yc-kicker {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #e4f2e8 !important;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .015em
}

    .yc-kicker > span {
        width: 6px;
        height: 6px;
        background: #e7c36d;
        border-radius: 50%;
        flex-shrink: 0
    }

.yc-home .yc-welcome h1 {
    margin: 14px 0 12px;
    color: white;
    font-size: clamp(1.9rem,4.5vw,2.65rem);
    font-weight: 750;
    line-height: 1.06;
    letter-spacing: -.045em
}

.yc-welcome h1 em {
    font-style: normal;
    color: #cbe9d3
}

.yc-welcome-copy > p:not(.yc-kicker) {
    color: #e0eee5;
    font-size: .87rem;
    max-width: 430px;
    line-height: 1.65
}

.yc-main-button {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 46px;
    padding: 11px 18px;
    background: #fff;
    color: #0e4d2b;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 700;
    line-height: 1.4
}

    .yc-main-button:hover {
        background: #edf7f0;
        color: #0e4d2b
    }

.yc-welcome .yc-main-button {
    margin-top: 20px
}

.yc-welcome-art {
    display: none;
    position: relative;
    overflow: hidden;
    background: #0e4d2b;
    min-height: 250px
}

.yc-orbit {
    position: absolute;
    border: 1px solid #ffffff18;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    right: -100px;
    top: -80px
}

.yc-orbit-two {
    width: 280px;
    height: 280px;
    right: -50px;
    top: -30px
}

.yc-art-label {
    position: absolute;
    top: 26px;
    left: 28px;
    color: #c8dfce;
    font-size: .7rem;
    line-height: 1.5
}

.yc-connection {
    position: absolute;
    right: 24px;
    top: 26px;
    display: flex;
    padding-left: 9px
}

    .yc-connection span {
        width: 33px;
        height: 33px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        border: 2px solid #0e4d2b;
        margin-left: -9px;
        background: #daeddf;
        color: #0e4d2b;
        font-size: .6rem;
        font-weight: 750
    }

        .yc-connection span:nth-child(2) {
            background: #d9a441
        }

        .yc-connection span:nth-child(3) {
            background: #a8cbbc
        }

        .yc-connection span:nth-child(4) {
            background: #f3e5bd
        }

.yc-art-word {
    position: absolute;
    left: 28px;
    bottom: 28px;
    color: #fff;
    font-size: 2.8rem;
    font-weight: 650;
    line-height: 1.02;
    letter-spacing: -.055em
}

    .yc-art-word em {
        font-weight: 450;
        font-style: italic;
        color: #e7c36d
    }

    .yc-art-word > span {
        position: absolute;
        font-size: 4.5rem;
        left: 215px;
        bottom: 0;
        color: #cbe9d3
    }

.yc-path {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 4px 14px;
    padding: 14px 0;
    border-bottom: 1px solid var(--line)
}

    .yc-path a {
        display: flex;
        align-items: center;
        gap: 8px;
        min-height: 44px;
        color: var(--ink);
        font-size: .71rem;
        font-weight: 600;
        line-height: 1.4
    }

        .yc-path a > span {
            color: #69927a;
            font-size: .65rem
        }

    .yc-path b {
        font-weight: 400;
        margin-left: auto;
        color: #176b3a
    }

    .yc-path a:hover {
        color: #176b3a;
        text-decoration: underline;
        text-underline-offset: 4px
    }

.yc-personal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 20px;
    background: #f4f8f5;
    padding: 16px;
    border-radius: 14px;
    margin-top: 22px
}

    .yc-personal > div:first-child {
        display: flex;
        align-items: center;
        gap: 10px
    }

    .yc-personal h2 {
        font-size: .85rem;
        letter-spacing: 0;
        line-height: 1.4
    }

        .yc-personal h2 small {
            display: block;
            color: var(--muted);
            font-weight: 400;
            font-size: .7rem
        }

.yc-personal-icon {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    background: #dceddf;
    border-radius: 50%;
    color: #176b3a
}

.yc-personal > .yc-link {
    margin-left: auto
}

.yc-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    flex: 1 1 250px
}

    .yc-chips > span {
        background: #fff;
        border: 1px solid #dce8df;
        padding: 5px 9px;
        border-radius: 999px;
        font-size: .7rem;
        color: #176b3a
    }

    .yc-chips p {
        font-size: .78rem
    }

.yc-section {
    padding-top: 34px;
    scroll-margin-top: 100px
}

.yc-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px
}

.yc-eyebrow {
    font-size: .65rem !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: #176b3a !important;
    margin-bottom: 7px !important
}

.yc-home h2 {
    color: var(--ink);
    font-size: clamp(1.2rem,2.7vw,1.6rem);
    line-height: 1.25;
    letter-spacing: -.035em
}

.yc-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    color: #176b3a;
    font-size: .76rem;
    font-weight: 650;
    flex-shrink: 0
}

    .yc-link:hover {
        color: #0e4d2b;
        text-decoration: underline;
        text-underline-offset: 4px
    }

.yc-areas {
    display: grid;
    gap: 12px
}

.yc-area {
    background: #edf7f0;
    border: 1px solid #dce8df;
    border-radius: 16px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    min-width: 0
}

.yc-tone-1 {
    background: #f8f4e9;
    border-color: #e9dfc9
}

.yc-tone-2 {
    background: #eef3f6;
    border-color: #dde6ec
}

.yc-tone-3 {
    background: #f4f0f6;
    border-color: #e8dfec
}

.yc-area-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 20px
}

.yc-area-symbol {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    background: #fff;
    border-radius: 12px;
    color: #176b3a;
    font-size: 1.45rem;
    font-weight: 650
}

.yc-tone-1 .yc-area-symbol {
    color: #80631b
}

.yc-tone-2 .yc-area-symbol {
    color: #345b72
}

.yc-tone-3 .yc-area-symbol {
    color: #715483
}

.yc-area-count {
    font-size: .66rem;
    color: var(--muted)
}

.yc-home .yc-area h3 {
    font-size: 1rem;
    line-height: 1.3;
    color: var(--ink);
    letter-spacing: -.025em;
    margin-bottom: 8px
}

.yc-area > p {
    font-size: .79rem;
    line-height: 1.6;
    color: var(--muted);
    margin-bottom: 22px;
    flex: 1
}

.yc-area-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: .65rem
}

    .yc-area-footer > span {
        display: flex;
        align-items: center;
        gap: 5px;
        color: var(--muted)
    }

    .yc-area-footer i {
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: #176b3a
    }

    .yc-area-footer a {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-weight: 700;
        color: #0e4d2b
    }

.yc-topic-preview {
    border-top: 1px solid #24312914;
    margin-top: 5px
}

    .yc-topic-preview summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 44px;
        font-size: .7rem;
        color: #52635a;
        cursor: pointer;
        list-style: none
    }

        .yc-topic-preview summary::-webkit-details-marker {
            display: none
        }

        .yc-topic-preview summary::after {
            content: "+";
            font-size: 1rem
        }

    .yc-topic-preview[open] summary::after {
        content: "−"
    }

    .yc-topic-preview ul {
        margin: 0;
        padding: 0 0 5px 15px;
        font-size: .73rem;
        line-height: 1.8;
        color: var(--ink)
    }

.yc-filters {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    margin-bottom: 16px
}

    .yc-filters button {
        border: 1px solid #dce8df;
        background: #fff;
        border-radius: 999px;
        padding: 9px 14px;
        min-height: 44px;
        color: #52635a;
        font: inherit;
        font-size: .75rem;
        cursor: pointer
    }

        .yc-filters button.is-active {
            background: #176b3a;
            border-color: #176b3a;
            color: white
        }

        .yc-filters button:hover:not(.is-active) {
            background: #edf7f0
        }

.yc-previews {
    display: grid;
    gap: 14px
}

.yc-preview {
    display: block;
    border: 1px solid var(--line);
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    color: var(--ink);
    transition: box-shadow .18s ease
}

    .yc-preview:hover {
        color: var(--ink);
        box-shadow: 0 8px 24px #0e4d2b12
    }

.yc-preview-cover {
    height: 140px;
    position: relative;
    overflow: hidden;
    padding: 18px;
    background: #163e31;
    color: #dcebdd
}

.yc-cover-word {
    position: relative;
    z-index: 1;
    font-size: 1.4rem;
    font-weight: 750;
    letter-spacing: -.045em;
    line-height: 1.05
}

.yc-cover-tag {
    position: absolute;
    right: 14px;
    bottom: 14px;
    border: 1px solid #ffffff55;
    border-radius: 999px;
    padding: 4px 9px;
    font-size: .62rem;
    background: #ffffff10
}

.yc-road {
    position: absolute;
    right: 15px;
    top: -20px;
    height: 220px;
    width: 65px;
    border-inline: 1px solid #8bb898;
    transform: rotate(28deg);
    background: repeating-linear-gradient(180deg,transparent 0 18px,#c7e0cc 18px 35px,transparent 35px 50px) center/2px 100% no-repeat
}

.yc-cover-farm {
    background: #d9a441;
    color: #372c13
}

    .yc-cover-farm::after {
        content: "";
        position: absolute;
        width: 240px;
        height: 170px;
        border-radius: 50%;
        border: 1px solid #725a2438;
        box-shadow: 0 0 0 15px #725a2410,0 0 0 30px #725a2410;
        right: -60px;
        bottom: -110px;
        transform: rotate(-15deg)
    }

    .yc-cover-farm .yc-cover-tag {
        border-color: #725a2444;
        background: #fff3
    }

.yc-cover-city {
    background: #d5e9df;
    color: #0e4d2b
}

    .yc-cover-city::after {
        content: "";
        position: absolute;
        right: 22px;
        bottom: -20px;
        width: 50px;
        height: 90px;
        background: #8cae9b;
        border-radius: 20px 20px 0 0;
        box-shadow: -60px 25px 0 #b1cabc,60px -15px 0 #b1cabc
    }

    .yc-cover-city .yc-cover-tag {
        z-index: 1;
        background: #edf7f0;
        border-color: #9fbeab
    }

.yc-preview-copy {
    padding: 18px
}

    .yc-preview-copy small {
        font-size: .63rem;
        color: #52635a
    }

.yc-home .yc-preview-copy h3 {
    font-size: 1rem;
    line-height: 1.35;
    margin: 7px 0 18px;
    letter-spacing: -.025em
}

.yc-preview-copy > span {
    display: flex;
    justify-content: space-between;
    font-size: .73rem;
    font-weight: 650;
    color: #176b3a
}

.yc-preview-copy b {
    font-weight: 400
}

.yc-mini-preview {
    border: 1px solid var(--line);
    background: #f6faf7;
    border-radius: 16px;
    padding: 22px;
    color: var(--ink)
}

    .yc-mini-preview > span {
        display: block;
        color: #176b3a;
        font-size: 1.7rem;
        margin-bottom: 20px
    }

    .yc-mini-preview small {
        color: #52635a;
        font-size: .65rem
    }

    .yc-mini-preview h3 {
        font-size: 1rem;
        line-height: 1.3;
        margin: 8px 0 !important
    }

    .yc-mini-preview p {
        font-size: .8rem;
        line-height: 1.6
    }

    .yc-mini-preview b {
        display: block;
        font-size: .73rem;
        color: #176b3a;
        margin-top: 24px
    }

    .yc-mini-preview:hover {
        background: #edf7f0;
        color: var(--ink)
    }

.yc-sample-note {
    color: #52635a;
    font-size: .67rem;
    margin-top: 12px !important
}

.yc-closing {
    margin-top: 34px;
    padding: 24px;
    background: #edf7f0;
    border: 1px solid #d3e5d9;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px
}

    .yc-closing h2 {
        font-size: 1.2rem
    }

    .yc-closing .yc-main-button {
        background: #176b3a;
        color: white
    }

        .yc-closing .yc-main-button:hover {
            background: #0e4d2b
        }

.yc-empty {
    background: #edf7f0;
    padding: 18px;
    border-radius: 14px;
    font-size: .85rem
}

.yc-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap
}

@media(min-width:576px) {
    .yc-areas {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }

    .yc-welcome-copy {
        padding: 30px
    }

    .yc-previews {
        grid-template-columns: repeat(3,minmax(0,1fr))
    }

    .yc-preview-cover {
        height: 145px
    }

    .yc-cover-word {
        font-size: 1.15rem
    }

    .yc-preview-copy {
        padding: 16px
    }

    .yc-preview {
        display: flex;
        flex-direction: column
    }

    .yc-preview-copy {
        display: flex;
        flex-direction: column;
        flex: 1
    }

        .yc-preview-copy > span {
            margin-top: auto
        }

    .yc-section-head h2 {
        max-width: 550px
    }
}

@media(min-width:768px) {
    .yc-home {
        padding-top: 24px
    }

    .yc-welcome {
        grid-template-columns: 1.35fr 1fr
    }

    .yc-welcome-art {
        display: block
    }

    .yc-path {
        grid-template-columns: repeat(4,minmax(0,1fr));
        gap: 24px;
        padding: 16px 6px
    }

        .yc-path a {
            font-size: .73rem
        }

    .yc-section {
        padding-top: 40px
    }

    .yc-preview-cover {
        height: 160px
    }

    .yc-cover-word {
        font-size: 1.55rem
    }

    .yc-closing {
        padding: 28px
    }
}

@media(min-width:992px) {
    .yc-areas {
        grid-template-columns: repeat(4,minmax(0,1fr))
    }

    .yc-welcome-copy {
        padding: 30px 36px
    }

    .yc-welcome-art {
        min-height: 280px
    }

    .yc-personal {
        flex-wrap: nowrap
    }

        .yc-personal h2 {
            font-size: .85rem;
            white-space: nowrap
        }

    .yc-area {
        padding: 20px 18px
    }

    .yc-home .yc-area h3 {
        min-height: 2.6em
    }

    .yc-art-word {
        font-size: 3.2rem
    }

        .yc-art-word > span {
            left: 245px
        }
}

@media(prefers-reduced-motion:reduce) {
    .yc-home * {
        transition: none !important
    }
}