/* January Residency landing page */
:root {
    --res-forest: #2F3D34;
    --res-forest-soft: #3E5044;
    --res-sage: #7C9483;
    --res-sage-light: #DCE3DA;
    --res-sand: #F3EFE4;
    --res-line: rgba(47, 61, 52, 0.16);
}

.residency {
    max-width: 960px;
    margin: 0 auto;
    padding: 170px 20px 40px;
    box-sizing: border-box;
}

.residency h2 {
    font-family: var(--font-display);
    font-size: 2.2rem;
    text-align: left;
    margin: 0 0 0.8rem;
    color: var(--res-forest);
}

.residency h3 {
    font-family: var(--font-display);
    color: var(--res-forest);
}

.resSection {
    padding: 48px 0 8px;
    scroll-margin-top: 110px;
}

.resSectionLead {
    max-width: 640px;
    margin: 0 0 28px;
}

/* Hero */
.resHero {
    color: var(--brighter);
    padding: 48px 0;
    margin: 40px 0;
    position: relative;
}

/* Solid green image that BubbleFx turns into an organic blob. It bleeds past the hero so the
   text stays aligned with the rest of the page. !important because BubbleFx sets its container
   to position: relative inline. */
.resHeroBg {
    --bleed-x: min(88px, calc((100vw - 100%) / 2 - 8px));
    position: absolute !important;
    top: -56px;
    bottom: -56px;
    left: calc(-1 * var(--bleed-x));
    right: calc(-1 * var(--bleed-x));
    z-index: 0;
}

.resHeroBg img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.resHeroBg canvas {
    pointer-events: none;
}

.resHero > :not(.resHeroBg) {
    position: relative;
    z-index: 1;
}

/* Same sprout illustration as the home promo, drawn white on the green blob */
.resHero > .resHeroArt {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 300px;
    aspect-ratio: 10 / 7;
    background: url('../imgs/residency-sprout-2027.png') center 56% / 136% auto no-repeat;
    filter: brightness(0) invert(1);
    pointer-events: none;
}

.resEyebrow {
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.78rem;
    color: var(--res-sage-light);
    margin: 0 0 12px;
}

.resHero h1 {
    font-family: var(--font-display);
    font-size: 3.4rem;
    line-height: 1.05;
    text-align: left;
    margin: 0 0 18px;
    max-width: 640px;
    color: var(--brighter);
}

.resHeroLead {
    font-size: 1.1rem;
    max-width: 600px;
    margin: 0 0 28px;
    color: var(--res-sand);
}

.resFacts {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    list-style: none;
    padding: 0;
    margin: 0 0 12px;
}

.resFacts li {
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 14px;
    padding: 10px 18px;
    min-width: 120px;
}

.resFacts strong {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 600;
    color: var(--res-sage-light);
}

.resFacts span {
    font-family: var(--font-display);
    font-size: 1.35rem;
}

.resXmasNote {
    font-size: 0.9rem;
    color: var(--res-sage-light);
    margin: 0 0 28px;
}

.resCtas {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* Buttons */
.resBtn {
    display: inline-block;
    border-radius: 999px;
    padding: 12px 26px;
    font-weight: 600;
    text-decoration: none;
    border: 1.5px solid transparent;
    cursor: pointer;
    font-size: 0.95rem;
    font-family: inherit;
    transition: transform 0.15s ease, background-color 0.15s ease;
}

.resBtn:hover {
    transform: translateY(-1px);
}

.resBtnLight {
    background: var(--brighter);
    color: var(--res-forest) !important;
}

.resBtnGhost {
    color: var(--brighter) !important;
    border-color: rgba(255, 255, 255, 0.5);
}

.resBtnDark {
    background: var(--res-forest);
    color: var(--brighter) !important;
}

.resBtnDark:hover {
    background: var(--res-forest-soft);
}

.resBtn:disabled {
    opacity: 0.6;
    cursor: wait;
    transform: none;
}

/* Notice */
.resNotice {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    margin: 24px 0 0;
    padding: 18px 22px;
    border-radius: 16px;
    background: var(--res-sage-light);
    color: var(--res-forest);
}

.resNotice p {
    margin: 0;
}

.resNoticeIcon {
    font-size: 1.2rem;
    line-height: 1.5;
}

/* Intro */
.resIntroText {
    font-family: var(--font-display);
    font-size: 1.55rem;
    line-height: 1.35;
    color: var(--res-forest);
    max-width: 760px;
    margin: 0 0 32px;
}

.resIntroText strong {
    font-weight: normal;
    color: var(--res-sage);
}

.resPhotos {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr;
    gap: 12px;
}

.resPhotos img {
    width: 100%;
    height: 260px;
    object-fit: cover;
    border-radius: 18px;
    display: block;
}

/* Is / isn't */
.resCompare {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.resCompareCol {
    border-radius: 18px;
    padding: 24px 26px;
}

.resCompareCol h3 {
    margin: 0 0 12px;
    font-size: 1.3rem;
}

.resCompareCol ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.resCompareCol li {
    padding: 8px 0 8px 28px;
    position: relative;
    border-top: 1px solid var(--res-line);
}

.resCompareCol li:first-child {
    border-top: none;
}

.resCompareCol li::before {
    position: absolute;
    left: 0;
    font-weight: 700;
}

.resIs {
    background: var(--brighter);
    border: 1px solid var(--res-line);
}

.resIs li::before {
    content: '✓';
    color: var(--res-sage);
}

.resIsnt {
    background: transparent;
    border: 1px dashed var(--res-line);
}

.resIsnt li::before {
    content: '✕';
    color: #A07A6A;
}

/* Timeline */
.resTimeline {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.resTimeline li {
    background: var(--brighter);
    border: 1px solid var(--res-line);
    border-radius: 16px;
    padding: 18px 20px;
}

.resTime {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 700;
    color: var(--res-sage);
}

.resTimeline p {
    margin: 6px 0 0;
    font-size: 0.95rem;
}

/* Weeks */
.resWeeks {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}

.resWeek {
    border-top: 3px solid var(--res-forest);
    padding: 14px 4px 0;
}

.resWeekNum {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 700;
    color: var(--res-sage);
}

.resWeek h3 {
    font-size: 1.25rem;
    line-height: 1.2;
    margin: 6px 0 8px;
}

.resWeek p {
    margin: 0;
    font-size: 0.92rem;
}

/* Included */
.resIncluded {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    background: var(--res-sand);
    border-radius: 20px;
    padding: 12px;
}

.resIncludedItem {
    padding: 14px 16px;
}

.resIncludedItem h3 {
    font-size: 1.15rem;
    margin: 0 0 6px;
    line-height: 1.3;
}

.resIncludedItem p {
    margin: 0;
    font-size: 0.93rem;
}

/* Packages */
.resPackages {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    align-items: stretch;
}

.resPackage {
    background: var(--brighter);
    border: 1px solid var(--res-line);
    border-radius: 20px;
    padding: 28px 24px 24px;
    display: flex;
    flex-direction: column;
    position: relative;
}

.resPackage h3 {
    font-size: 1.2rem;
    margin: 0;
}

.resPrice {
    font-family: var(--font-display);
    font-size: 2.6rem;
    margin: 6px 0 4px;
    color: var(--res-forest);
}

.resPackage p:not(.resPrice) {
    font-size: 0.95rem;
    margin: 0 0 20px;
    flex: 1;
}

.resPackage .resBtn {
    align-self: flex-start;
}

.resPackageFeatured {
    background: var(--res-forest);
    color: var(--res-sand);
    border-color: var(--res-forest);
}

.resPackageFeatured h3,
.resPackageFeatured .resPrice {
    color: var(--brighter);
}

.resBadge {
    position: absolute;
    top: -12px;
    left: 24px;
    background: var(--res-sage);
    color: var(--brighter);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 999px;
}

.resAddonsTitle {
    font-size: 1.4rem;
    margin: 36px 0 12px;
}

.resAddons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.resAddon {
    border: 1px dashed var(--res-line);
    border-radius: 16px;
    padding: 16px 20px;
}

.resAddonHead {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: var(--res-forest);
}

.resAddonHead span {
    font-size: 0.85rem;
    color: var(--res-sage);
    white-space: nowrap;
}

.resAddon p {
    margin: 6px 0 0;
    font-size: 0.93rem;
}

/* Xmas */
.resXmas {
    margin-top: 48px;
    padding: 32px 36px;
    border-radius: 20px;
    background: var(--brighter);
    border: 1px solid var(--res-line);
}

.resXmas p {
    margin: 0;
    max-width: 700px;
}

/* Apply form */
.resForm {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 20px;
    background: var(--brighter);
    border: 1px solid var(--res-line);
    border-radius: 20px;
    padding: 28px;
}

.resField {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.resFieldWide,
.resChecks,
.resFormFooter {
    grid-column: 1 / -1;
}

.resField label,
.resField legend {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--res-forest);
}

.resField input,
.resField select,
.resField textarea {
    font: inherit;
    color: var(--dark);
    background: #fff;
    border: 1px solid var(--res-line);
    border-radius: 10px;
    padding: 10px 12px;
    width: 100%;
    box-sizing: border-box;
}

.resField input:focus,
.resField select:focus,
.resField textarea:focus {
    outline: 2px solid var(--res-sage);
    outline-offset: 1px;
}

.resField [aria-invalid="true"] {
    border-color: #B5543C;
}

.resChecks {
    border: none;
    padding: 0;
    margin: 0;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px 22px;
}

.resChecks legend {
    margin-bottom: 6px;
    padding: 0;
}

.resChecks label {
    font-weight: 400;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.resChecks input {
    width: auto;
    accent-color: var(--res-forest);
}

.resHoney {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.resFormFooter {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.resFormStatus {
    margin: 0;
    font-size: 0.95rem;
}

.resFormStatus.is-error {
    color: #B5543C;
}

.resFormStatus.is-success {
    color: var(--res-forest);
    font-weight: 600;
}

.resOr {
    margin: 18px 0 0;
    text-align: center;
}

.resOr a {
    font-weight: 600;
    margin-left: 6px;
}

/* FAQ */
.residency .faq-item {
    margin: 1.5rem 0;
}

.residency .faq-item h3 {
    font-size: 1.3rem;
}

/* Footer */
.resFooter {
    --lang-accent: var(--res-forest);
    max-width: 960px;
    margin: 0 auto;
    padding: 24px 20px 60px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px 28px;
    flex-wrap: wrap;
}

.resFooter > a {
    font-weight: 700;
    text-decoration: none;
}


/* Home page promo for the residency */
.residencyPromoSection {
    padding-top: 24px;
}

.residencyPromo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 250px;
    align-items: center;
    gap: 28px;
    position: relative;
    color: var(--res-sand);
    padding: 64px 72px;
    margin: 10px 0 0;
    text-decoration: none;
}

/* Solid green image that BubbleFx turns into the organic blob behind the text */
.residencyPromoBg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.residencyPromo canvas {
    z-index: 0;
    pointer-events: none;
}

.residencyPromo > span,
.residencyPromo > div {
    position: relative;
    z-index: 1;
}

.residencyPromo .residencyPromoEyebrow {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--res-sage-light);
}

.residencyPromo .residencyPromoTitle {
    display: block;
    font-family: var(--font-display);
    font-size: 1.7rem;
    line-height: 1.2;
    color: var(--brighter);
    margin: 4px 0 6px;
}

.residencyPromo .residencyPromoText {
    font-size: 0.98rem;
    line-height: 1.5;
}

.residencyPromoText > * {
    display: block;
    margin-top: 10px;
}

.residencyPromoText strong {
    font-weight: 700;
    color: var(--brighter);
}

.residencyPromoText .residencyPromoMeta {
    margin-top: 2px;
    font-size: 0.9rem;
    letter-spacing: 0.02em;
}

.residencyPromoText .residencyPromoList {
    font-size: 0.9rem;
    color: var(--res-sage-light);
}

.residencyPromoText .residencyPromoOnly {
    margin-top: 16px;
}

.residencyPromo .residencyPromoCopy {
    align-self: start;
}

.residencyPromoAside {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.residencyPromoArt {
    display: block;
    width: 250px;
    max-width: 100%;
    height: auto;
    aspect-ratio: 10 / 7;
    background: url('../imgs/residency-sprout-2027.png') center 56% / 136% auto no-repeat;
    filter: brightness(0) invert(1);
}

.residencyPromo .residencyPromoCta {
    display: inline-block;
    background: var(--brighter);
    color: var(--res-forest);
    border-radius: 999px;
    padding: 10px 22px;
    font-weight: 600;
    white-space: nowrap;
}

.menu a.navResidency {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.menu a.navResidency::before {
    content: "";
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    background: url('../imgs/residency-nav-spark.svg') center / contain no-repeat;
}

/* The extra nav link needs room: tighten spacing on mid-size screens, drop it when there's none */
@media screen and (max-width: 1200px) {
    .menu li {
        padding: 0 12px;
    }
}

@media screen and (max-width: 960px) {
    .menu li:has(.navResidency) {
        display: none;
    }
}

/* Not enough room for the hero blob to bleed past the column: pad the text inside it instead */
@media screen and (max-width: 1150px) {
    .resHero {
        padding-left: 40px;
        padding-right: 40px;
    }

    .resHero > .resHeroArt {
        right: 32px;
        width: 210px;
    }
}

/* Too narrow to sit beside the text: show it above the eyebrow instead */
@media screen and (max-width: 960px) {
    .resHero > .resHeroArt {
        position: relative;
        right: auto;
        top: auto;
        transform: none;
        display: block;
        width: 190px;
        margin: 0 0 12px -8px;
    }
}

@media screen and (max-width: 900px) {
    .resWeeks {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 24px;
    }

    .resTimeline,
    .resIncluded {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 768px) {
    .residency {
        padding: 90px 16px 32px;
    }

    .resHero {
        padding: 40px 36px;
        margin: 32px 0 40px;
    }

    .resHero h1 {
        font-size: 2.4rem;
    }

    .resSection {
        scroll-margin-top: 70px;
    }

    .residency h2 {
        font-size: 1.8rem;
    }

    .resIntroText {
        font-size: 1.25rem;
    }

    .resPhotos {
        grid-template-columns: 1fr 1fr;
    }

    .resPhotos img {
        height: 180px;
    }

    .resPhotos img:first-child {
        grid-column: 1 / -1;
    }

    .resCompare,
    .resPackages,
    .resAddons,
    .resForm,
    .resTimeline,
    .resIncluded,
    .resWeeks {
        grid-template-columns: 1fr;
    }

    .resPackages {
        gap: 24px;
    }

    .resForm {
        padding: 20px;
    }

    .resXmas {
        padding: 24px;
    }

    .resFooter {
        padding: 16px 16px 90px;
    }

    .residencyPromo {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 56px 46px;
    }

    .residencyPromoAside {
        width: 100%;
    }

    .residencyPromoArt {
        width: min(230px, 100%);
    }
}