/*
 * Home page — section styles
 * Desktop grid: 5 columns inside the container, 16px gap (see header.css).
 */

/* ── Hero ───────────────────────────────────────────────────────────────── */
.hero { padding-bottom: 64px; }

/* Photo runs to the outer grid lines (container padding − 16px) */
.hero__media {
    margin:     -8px -16px 0;
    aspect-ratio: 1376 / 541;
    overflow:   hidden;
}
.hero__img {
    display:         block;
    width:           100%;
    height:          100%;
    object-fit:      cover;
    object-position: 50% 50%;
}

.hero__content {
    display:     flex;
    align-items: flex-end;
    gap:         16px;
    margin-top:  40px;
}

.hero__intro {
    order:          -1;
    display:        flex;
    flex:           0 0 calc((100% - 64px) / 5 * 1.5 + 8px);
    flex-direction: column;
    gap:            24px;
}
.hero__text { margin: 0; }

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

.hero__main {
    position:       relative;
    display:        flex;
    flex:           0 0 calc((100% - 64px) / 5 * 3 + 32px);
    flex-direction: column;
    gap:            16px;
    margin-left:    calc((100% - 64px) / 5 / 2 + 8px);
}

.hero__title {
    margin:    0;
    font-size: clamp(72px, 7.222vw, 104px);
}

.hero__note {
    position:       absolute;
    right:          0;
    bottom:         15px;
    width:          calc((100% - 32px) / 3 - 16px);
    margin:         0;
    font-family:    var(--font-mono);
    font-size:      var(--fs-small);
    line-height:    var(--line-height);
    letter-spacing: -0.02em;
    color:          var(--color-muted);
}

/* Narrow desktop: the note would run into the heading, so it drops below it */
@media (min-width: 1024px) and (max-width: 1359px) {
    .hero__note {
        position:  static;
        order:     3;
        width:     auto;
        max-width: calc((100% - 32px) / 3 * 2);
    }
}

/* ── Tablet / mobile ────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
    .hero { padding-bottom: 48px; }

    .hero__media {
        margin:       0;
        aspect-ratio: 16 / 9;
    }

    .hero__content {
        flex-direction: column;
        align-items:    stretch;
        gap:            24px;
        margin-top:     24px;
    }

    .hero__main {
        flex:        0 0 auto;
        margin-left: 0;
    }
    .hero__intro { order: 0; flex: 0 0 auto; }

    .hero__note {
        position: static;
        width:    auto;
        order:    -1;
        margin:   0 0 8px;
    }
    .hero__tag { align-self: flex-start; }
    .hero__title { font-size: var(--fs-display-l); }
}

@media (max-width: 767px) {
    .hero__media { aspect-ratio: 342 / 340; }
    .hero__title { font-size: 64px; }
}

/* ── Navigate (tabs) ────────────────────────────────────────────────────── */
.navigate { padding: 165px 0 300px; }

.navigate__head {
    display:        flex;
    flex-direction: column;
    align-items:    flex-start;
    gap:            16px;
    max-width:      calc((100% - 64px) / 5 * 3 + 32px);
}
.navigate__title {
    margin:    0;
    font-size: var(--fs-display-m);
}

.navigate__tabs {
    display:     flex;
    align-items: flex-start;
    gap:         16px;
    margin-top:  136px;
}

.nav-tab {
    display:        flex;
    flex:           0 0 calc((100% - 64px) / 5);
    flex-direction: column;
    min-width:      0;
    transition:     flex-basis .4s ease;
}
.nav-tab.is-active { flex-basis: calc((100% - 64px) / 5 * 2 + 16px); }

/* Desktop: the hover area reaches below the title (padding is cancelled by the negative margin, layout is unchanged) */
@media (min-width: 1024px) {
    .nav-tab { padding-bottom: 160px; margin-bottom: -160px; }
}

.nav-tab__media {
    display:      none;
    order:        -1;
    margin:       0 0 16px;
    aspect-ratio: 527 / 316;
    overflow:     hidden;
}
.nav-tab.is-active .nav-tab__media { display: block; }
.nav-tab__img {
    display:         block;
    width:           100%;
    height:          100%;
    object-fit:      cover;
    object-position: 50% 100%;
}

.nav-tab__title {
    margin:         0;
    font-size:      var(--fs-title);
    font-weight:    var(--fw-medium);
    line-height:    var(--line-height);
    letter-spacing: -0.04em;
}
.nav-tab__title button {
    display:        block;
    padding:        0;
    font:           inherit;
    letter-spacing: inherit;
    text-align:     left;
    color:          var(--color-faint);
    background:     none;
    border:         0;
    cursor:         pointer;
    transition:     color var(--transition);
}
.nav-tab__title button:hover { color: var(--color-muted); }
.nav-tab.is-active .nav-tab__title button { color: var(--color-text); cursor: default; }

.nav-tab__body {
    display:        flex;
    flex-direction: column;
    gap:            24px;
    max-width:      calc((100% - 16px) / 2);
    margin-top:     8px;
}
.nav-tab__body[hidden] { display: none; }
.nav-tab__text { margin: 0; }

/* Tab strip — tablet / mobile only */
.navigate__nav { display: none; }

/* ── Navigate: tablet / mobile ──────────────────────────────────────────── */
@media (max-width: 1023px) {
    .navigate { padding: 96px 0 120px; }
    .navigate__head { max-width: none; }

    .navigate__nav {
        display:             flex;
        gap:                 24px;
        margin:              24px calc(var(--container-padding) * -1) 0;
        padding:             0 var(--container-padding);
        overflow-x:          auto;
        scroll-padding-left: var(--container-padding);
        scrollbar-width:     none;
    }
    .navigate__nav::-webkit-scrollbar { display: none; }

    .navigate__nav-item {
        flex:           0 0 auto;
        padding:        0;
        font:           inherit;
        font-weight:    var(--fw-medium);
        letter-spacing: -0.04em;
        white-space:    nowrap;
        color:          var(--color-faint);
        background:     none;
        border:         0;
        cursor:         pointer;
        transition:     color var(--transition);
    }
    .navigate__nav-item.is-active { color: var(--color-text); cursor: default; }

    .navigate__tabs { display: block; margin-top: 16px; }

    .nav-tab { display: none; }
    .nav-tab.is-active { display: flex; }

    .nav-tab__media {
        order:        -1;
        margin:       0 0 16px;
        aspect-ratio: 341 / 316;
    }
    .nav-tab__title button:disabled { color: var(--color-text); cursor: default; }
    .nav-tab__body { gap: 12px; max-width: none; margin-top: 12px; }
}

@media (max-width: 767px) {
    .navigate__title { font-size: 48px; }
}

/* ── About (dark statement) ─────────────────────────────────────────────── */
.about { padding: 300px 0; }
.about .container { position: relative; z-index: 1; }

.about__body { position: relative; }
.about__tag  { position: absolute; top: 0; left: 0; }

.about__text {
    margin:         0;
    font-size:      clamp(40px, 3.889vw, 56px);
    font-weight:    var(--fw-book);
    line-height:    var(--lh-tight);
    letter-spacing: var(--ls-base);
    color:          var(--color-on-dark);
}
/* First two lines leave the first column to the tag */
.about__text::before {
    content: '';
    float:   left;
    width:   calc((100% - 64px) / 5 + 16px);
    height:  1.8em;
}

/* Scroll highlight: words below the reading line stay dim (js/pages/home.js) */
.about__text.is-reveal .reveal__word {
    color:      var(--color-on-dark-faint);
    transition: color .3s ease;
}
.about__text.is-reveal .reveal__word.is-lit { color: var(--color-on-dark); }

.about__row {
    display:     flex;
    align-items: flex-end;
    gap:         16px;
    margin-top:  158px;
}
.about__figure { flex: 0 0 calc((100% - 64px) / 5); margin: 0; overflow: hidden; }
.about__figure--tall { aspect-ratio: 255 / 316; }
.about__figure--wide { aspect-ratio: 255 / 180; }
.about__img {
    display:    block;
    width:      100%;
    height:     100%;
    object-fit: cover;
}
.about__note {
    flex:        0 0 calc((100% - 64px) / 5);
    margin:      0 0 0 auto;
    margin-left: calc((100% - 64px) / 5 * 2 + 32px);
    color:       var(--color-on-dark);
}

@media (max-width: 1023px) {
    .about { padding: 104px 0; }

    .about__tag { position: static; margin-bottom: 16px; }
    .about__text { font-size: 40px; }
    .about__text::before { display: none; }

    .about__row {
        flex-wrap:  wrap;
        gap:        8px;
        margin-top: 28px;
    }
    .about__figure { flex: 1 1 0; }
    .about__figure--tall { aspect-ratio: 165 / 202; }
    .about__figure--wide { aspect-ratio: 165 / 115; }
    .about__note {
        flex:        0 0 100%;
        margin:      16px 0 0;
    }
}

@media (max-width: 767px) {
    .about__text { font-size: 24px; }
}

/* ── Ecosystem (practices tabs) ─────────────────────────────────────────── */
.eco { padding: 264px 0 300px; }

.eco__head {
    display:        flex;
    flex-direction: column;
    align-items:    flex-start;
    gap:            16px;
}
.eco__title {
    margin:    0;
    font-size: var(--fs-display-m);
}

/* Scroll-driven: the body is pinned while the page scrolls through the stage's spacer (js/pages/home.js) */
.eco { --eco-step: 42vh; } /* scroll length per slide (short: there are many practices); the slide-over itself is timed, so a slide never stops half-way */
.eco__stage { margin-top: 136px; }
.eco__stage::after { content: ''; display: block; height: calc((var(--n, 1) - 1) * var(--eco-step)); }
.eco__body {
    position: sticky;
    top:      max(110px, calc(50vh - 260px));
    display:  flex;
    gap:      16px;
}

.eco__tabs {
    display:        flex;
    flex:           0 0 calc((100% - 64px) / 5);
    flex-direction: column;
    gap:            16px;
}
.eco__tab {
    padding:        0;
    font:           inherit;
    font-weight:    var(--fw-medium);
    letter-spacing: -0.04em;
    line-height:    var(--line-height);
    text-align:     left;
    color:          var(--color-faint);
    background:     none;
    border:         0;
    cursor:         pointer;
    transition:     color var(--transition);
}
.eco__tab:hover { color: var(--color-muted); }
.eco__tab.is-active { color: var(--color-text); }

.eco__panels { flex: 1; min-width: 0; overflow: hidden; }
.eco__track  { display: flex; width: calc(var(--n, 1) * 100%); will-change: translate; transition: translate .9s cubic-bezier(.45, 0, .2, 1); }

/* The panels that are not current disappear once the slide-over has finished (no edge of the next photo peeks out) */
.eco.is-ready .eco__panel { opacity: 0; transition: opacity 0s linear .9s; }
.eco.is-ready .eco__panel.is-current { opacity: 1; transition: none; }
@media (prefers-reduced-motion: reduce) { .eco__track { transition: none; } }

.eco__panel {
    display:   flex;
    flex:      0 0 calc(100% / var(--n, 1));
    gap:       16px;
    min-width: 0;
}

/* Images: cols 2–3, bottoms aligned */
.eco__media {
    display:     flex;
    flex:        0 0 calc((100% - 48px) / 4 * 2 + 16px);
    align-items: flex-end;
    gap:         16px;
}
.eco__figure { flex: 1 1 0; margin: 0; overflow: hidden; min-width: 0; }
.eco__figure--tall { aspect-ratio: 255 / 438; }
.eco__figure--wide { aspect-ratio: 255 / 219; }
.eco__img {
    display:         block;
    width:           100%;
    height:          100%;
    object-fit:      cover;
    object-position: 50% 100%;
}

/* Info: cols 4–5 */
.eco__info {
    display:        flex;
    flex:           1;
    flex-direction: column;
    min-width:      0;
}
.eco__name {
    margin:         0;
    font-size:      var(--fs-title);
    font-weight:    var(--fw-medium);
    line-height:    var(--line-height);
    letter-spacing: -0.04em;
}

.eco__row {
    display:    flex;
    gap:        16px;
    margin-top: 36px;
}
.eco__row + .eco__row { margin-top: 70px; }
.eco__row > * { flex: 0 0 calc((100% - 16px) / 2); margin: 0; min-width: 0; }

.eco__label {
    font-family:    var(--font-mono);
    letter-spacing: var(--ls-base);
    color:          var(--color-muted);
}
.eco__label,
.eco__text { padding-right: 24px; }

.eco__themes {
    display:        flex;
    flex-direction: column;
    gap:            16px;
    padding:        0;
    list-style:     none;
}
.eco__link { margin-top: auto; margin-left: auto; width: calc((100% - 16px) / 2); }

/* ── Ecosystem: tablet / mobile ─────────────────────────────────────────── */
@media (max-width: 1023px) {
    .eco { padding: 96px 0 120px; }

    .eco { --eco-step: 40vh; }
    .eco__stage { margin-top: 24px; }
    .eco__body {
        top:            96px;
        flex-direction: column;
        gap:            24px;
    }

    .eco__tabs {
        flex:                0 0 auto;
        flex-direction:      row;
        gap:                 16px;
        margin:              0 calc(var(--container-padding) * -1);
        padding:             0 var(--container-padding);
        overflow-x:          auto;
        scrollbar-width:     none;
    }
    .eco__tabs::-webkit-scrollbar { display: none; }
    .eco__tab { flex: 0 0 auto; white-space: nowrap; }

    .eco__panel { flex-direction: column; gap: 24px; padding-right: var(--container-padding); box-sizing: border-box; }

    .eco__media { flex: 0 0 auto; gap: 8px; }
    .eco__figure--tall { aspect-ratio: 166 / 290; }
    .eco__figure--wide { aspect-ratio: 166 / 145; }

    .eco__info { flex: 0 0 auto; }
    .eco__row,
    .eco__row + .eco__row {
        flex-direction: column;
        gap:            12px;
        margin-top:     16px;
    }
    .eco__name + .eco__row { margin-top: 24px; }
    .eco__row > * { flex: 0 0 auto; }
    .eco__label,
    .eco__text { padding-right: 0; }
    .eco__link { width: auto; margin: 24px 0 0; }
}

@media (max-width: 767px) {
    .eco__title { font-size: 48px; }
}

/* ── Work (From → To) ───────────────────────────────────────────────────── */
.work { padding: 264px 0 300px; }
.work .container { position: relative; z-index: 1; }

.work__head {
    display:        flex;
    flex-direction: column;
    align-items:    flex-start;
    gap:            16px;
    max-width:      calc((100% - 64px) / 5 * 4 + 48px);
}
.work__title {
    margin:    0;
    font-size: var(--fs-display-m);
}

.work__body {
    display:     flex;
    align-items: flex-end;
    margin-top:  136px;
}
.work__figure {
    flex:         0 0 calc((100% - 64px) / 5);
    margin:       0;
    aspect-ratio: 256 / 160;
    overflow:     hidden;
}
.work__img {
    display:    block;
    width:      100%;
    height:     100%;
    object-fit: cover;
}

/* Table: From (col 3) → arrow (col 4) → To (col 5) */
.work__table {
    flex:            0 0 calc((100% - 64px) / 5 * 3 + 32px);
    margin-left:     calc((100% - 64px) / 5 + 32px);
    table-layout:    fixed;
    border-collapse: separate;
    border-spacing:  0 32px;
    margin-top:      -32px;
    margin-bottom:   -32px;
}
.work__table th,
.work__table td {
    padding:        0;
    font-size:      var(--fs-body);
    line-height:    var(--line-height);
    letter-spacing: var(--ls-base);
    text-align:     left;
    vertical-align: middle;
    height:         32px;
}
.work__table th {
    height:         auto;
    font-weight:    var(--fw-semibold);
    letter-spacing: -0.04em;
}
.work__table thead td { height: auto; }
.work__table tr > :nth-child(1) { width: 34%; padding-right: 16px; }
.work__table tr > :nth-child(2) { width: 34%; padding-right: 16px; text-align: center; }
.work__arrow .icon { display: inline-block; vertical-align: middle; }

@media (max-width: 1023px) {
    .work { padding: 104px 0; }
    .work__head { max-width: none; }

    .work__body {
        flex-direction: column;
        align-items:    stretch;
        gap:            24px;
        margin-top:     24px;
    }
    .work__figure { flex: 0 0 auto; aspect-ratio: 339 / 160; }

    .work__table {
        flex:           0 0 auto;
        margin:         0;
        border-spacing: 0 24px;
        margin-top:     -24px;
    }
    .work__table th,
    .work__table td { font-size: var(--fs-small); letter-spacing: -0.02em; }
    .work__table th { font-size: var(--fs-body); }
    .work__table tr > :nth-child(1) { width: 135px; padding-right: 8px; }
    .work__table tr > :nth-child(2) { width: 24px; padding-right: 8px; text-align: left; }
}

/* Tablet: roomier table than the phone layout */
@media (min-width: 768px) and (max-width: 1023px) {
    .work__table { border-spacing: 0 32px; margin-top: -32px; }
    .work__table th,
    .work__table td { font-size: var(--fs-lead); letter-spacing: var(--ls-tight); }
    .work__table th { font-size: var(--fs-lead); }
    .work__table tr > :nth-child(1) { width: 38%; padding-right: 16px; }
    .work__table tr > :nth-child(2) { width: 64px; padding-right: 16px; text-align: left; }
}

@media (max-width: 767px) {
    .work__title { font-size: 48px; }
}

/* ── Insights (staggered cards) ─────────────────────────────────────────── */
.insights { padding: 264px 0 0; }

.insights__head {
    display:        flex;
    flex-direction: column;
    align-items:    flex-start;
    gap:            16px;
}
.insights__title {
    margin:    0;
    font-size: var(--fs-display-m);
}
.insights__title br { display: none; }

.insights__cards {
    display:     flex;
    flex-wrap:   wrap;
    align-items: flex-start;
    gap:         64px 16px;
    margin-top:  136px;
}

.insight {
    --card-gap: 8px;

    display:        flex;
    flex-direction: column;
    gap:            var(--card-gap);
    min-width:      0;
}
.insight:nth-child(1) { --card-gap: 16px; }

/* Layout of the four cards: cols 1–2, cols 3–4, cols 1–3, col 5 (lower) */
.insight:nth-child(1),
.insight:nth-child(2) { flex: 0 0 calc((100% - 64px) / 5 * 2 + 16px); --link-w: calc((100% - 16px) / 2); }
.insight:nth-child(3) { flex: 0 0 calc((100% - 64px) / 5 * 3 + 32px); --link-w: calc((100% - 32px) / 3); }
.insight:nth-child(4) {
    flex:        0 0 calc((100% - 64px) / 5);
    margin-left: auto;
    margin-top:  180px;
    --link-w:    100%;
}

.insight__label {
    margin:         0;
    font-family:    var(--font-mono);
    letter-spacing: var(--ls-base);
    text-align:     right;
    color:          var(--color-muted);
}

.insight__figure { margin: 0; overflow: hidden; }
.insight:nth-child(1) .insight__figure { aspect-ratio: 527 / 328; }
.insight:nth-child(2) .insight__figure { aspect-ratio: 527 / 160; }
.insight:nth-child(3) .insight__figure { aspect-ratio: 800 / 343; }
.insight:nth-child(4) .insight__figure { aspect-ratio: 255 / 302; }

.insight__img {
    display:         block;
    width:           100%;
    height:          100%;
    object-fit:      cover;
    object-position: 50% 50%;
}
.insight:nth-child(1) .insight__img { object-position: 50% 82%; }
.insight:nth-child(2) .insight__img { object-position: 50% 38%; }

.insight__body {
    display:        flex;
    flex-direction: column;
    gap:            16px;
}
.insight__text {
    display:        flex;
    flex-direction: column;
    gap:            8px;
    max-width:      calc(var(--link-w) - 24px);
}
.insight__text p { margin: 0; }
.insight__title {
    margin:         0;
    font-size:      var(--fs-lead);
    font-weight:    var(--fw-medium);
    line-height:    var(--line-height);
    letter-spacing: var(--ls-tight);
}
.insight__link { width: var(--link-w); }

@media (max-width: 1023px) {
    .insights { padding: 104px 0; }
    .insights__title br { display: inline; }

    .insights__cards {
        flex-direction: column;
        flex-wrap:      nowrap;
        align-items:    stretch;
        gap:            24px;
        margin-top:     32px;
    }

    .insight:nth-child(n) {
        flex:        0 0 auto;
        margin:      0;
        --link-w:    100%;
    }
    .insight:nth-child(n) .insight__figure { aspect-ratio: auto; height: 180px; }
    .insight__body { gap: 12px; }
    .insight__text { max-width: none; }
}

@media (max-width: 767px) {
    .insights__title { font-size: 48px; }
}

/* ── Help (collaboration opportunities) ─────────────────────────────────── */
.help { padding: 264px 0 300px; }

.help__head {
    position:       relative;
    display:        flex;
    flex-direction: column;
    align-items:    flex-start;
    gap:            16px;
}
.help__tag,
.help__title { max-width: calc((100% - 64px) / 5 * 3 + 32px); }
.help__title {
    margin:    0;
    font-size: var(--fs-display-m);
}
/* Button sits in column 4, beside the second title line */
.help__btn {
    position: absolute;
    left:     calc((100% - 64px) / 5 * 3 + 48px);
    bottom:   8px;
    width:    calc((100% - 64px) / 5);
}

.help__grid {
    display:               grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-template-rows:    repeat(4, 246px);
    column-gap:            16px;
    margin-top:            128px;
}
.help__figure { margin: 0; overflow: hidden; }
.help__figure--1 { grid-column: 1; grid-row: 1 / span 2; }
.help__figure--2 { grid-column: 2; grid-row: 4; height: 166px; }
.help__img {
    display:    block;
    width:      100%;
    height:     100%;
    object-fit: cover;
}

.help__item { display: flex; flex-direction: column; gap: 56px; }
.help__item--1 { grid-column: 3; grid-row: 1; }
.help__item--2 { grid-column: 4; grid-row: 2; }
.help__item--3 { grid-column: 3; grid-row: 3; }
.help__item--4 { grid-column: 5; grid-row: 3; }
.help__item--5 { grid-column: 4; grid-row: 4; }

.help__num {
    margin:         0;
    font-family:    var(--font-mono);
    letter-spacing: var(--ls-base);
    color:          var(--color-muted);
}
.help__text {
    display:        flex;
    flex-direction: column;
    gap:            8px;
    padding-right:  24px;
}
.help__text p { margin: 0; }
.help__item-title {
    margin:         0;
    font-size:      var(--fs-lead);
    font-weight:    var(--fw-medium);
    line-height:    var(--line-height);
    letter-spacing: var(--ls-tight);
}

@media (max-width: 1023px) {
    .help { padding: 104px 0; }
    .help__tag,
    .help__title { max-width: none; }
    .help__btn {
        position:   static;
        width:      100%;
        margin-top: 8px;
    }

    .help__grid {
        display:        flex;
        flex-direction: column;
        gap:            24px;
        margin-top:     24px;
    }
    .help__figure--1,
    .help__figure--2 { height: 180px; }
    .help__item { gap: 56px; }
    .help__text { padding-right: 0; }
}

@media (max-width: 767px) {
    .help__title { font-size: 48px; }
}

/* ── Places (global presence) ───────────────────────────────────────────── */
.places { padding: 149px 0 300px; }
.places .container { position: relative; z-index: 1; }

.places__head {
    display:        flex;
    flex-direction: column;
    align-items:    flex-start;
    gap:            16px;
}
.places__title {
    margin:    0;
    font-size: var(--fs-display-m);
}

/* Map: bubbles are placed in % of the 1343 × 520 design frame */
.places__map {
    position:      relative;
    margin:        146px 0 0;
    padding:       0;
    list-style:    none;
    aspect-ratio:  1343 / 520;
    background:    var(--color-dark); /* filled as in the design: the column guides do not run through the map */
    border:        1px solid rgba(255, 255, 255, .06);
    border-radius: 50%;
}

.places__city {
    position:        absolute;
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           17.87%;
    aspect-ratio:    1;
    padding:         8px;
    font-family:     var(--font-mono);
    font-size:       var(--fs-lead);
    font-weight:     var(--fw-bold);
    line-height:     var(--line-height);
    letter-spacing:  var(--ls-tight);
    text-align:      center;
    background:      rgba(255, 255, 255, .01);
    border:          1px solid rgba(255, 255, 255, .04);
    border-radius:   50%;
    isolation:       isolate;
    cursor:          default;
    transition:      color .5s var(--ease-out, cubic-bezier(.16, 1, .3, 1));
}

/* Dotted ring that turns with the page scroll (--rot is set in js/pages/home.js) */
.places__city::after {
    content:       '';
    position:      absolute;
    inset:         10px;
    border:        1px dashed rgba(255, 255, 255, .22);
    border-radius: 50%;
    transform:     rotate( calc( var(--rot, 0deg) * var(--dir, 1) ) );
    pointer-events: none;
}
.places__city:nth-child(even) { --dir: -1; }

/* Disc that grows from the centre on hover */
.places__city::before {
    content:       '';
    position:      absolute;
    inset:         10%;
    z-index:       -1;
    background:    var(--color-light);
    border-radius: 50%;
    transform:     scale(0);
    transition:    transform .6s var(--ease-out, cubic-bezier(.16, 1, .3, 1));
}
@media (hover: hover) {
    .places__city:hover { color: var(--color-dark); }
    .places__city:hover::before { transform: scale(1); }
    .places__city:hover::after { border-color: rgba(255, 255, 255, .5); }
}

/* Entrance: circles pop in one after another when the map scrolls into view */
@keyframes places-pop { from { opacity: 0; scale: .55; translate: 0 40px; } }
.js-motion .places__map:not(.is-in) .places__city { opacity: 0; }
.places__map.is-in .places__city {
    animation: places-pop 1s var(--ease-out, cubic-bezier(.16, 1, .3, 1)) calc( var(--i, 0) * .1s ) backwards;
}
.places__city:nth-child(1) { --i: 0; }
.places__city:nth-child(2) { --i: 1; }
.places__city:nth-child(3) { --i: 2; }
.places__city:nth-child(4) { --i: 3; }
.places__city:nth-child(5) { --i: 4; }
.places__city:nth-child(6) { --i: 5; }
.places__city:nth-child(7) { --i: 6; }

@media (prefers-reduced-motion: reduce) {
    .places__city::after { transform: none; }
}
.places__city:nth-child(1) { left: 6.18%;  top: 37.12%; }
.places__city:nth-child(2) { left: 23.83%; top: 3.85%; }
.places__city:nth-child(3) { left: 41.7%;  top: 9.62%; }
.places__city:nth-child(4) { left: 23.38%; top: 50%; }
.places__city:nth-child(5) { left: 48.1%;  top: 53.08%; }
.places__city:nth-child(6) { left: 60.46%; top: 19.62%; }
.places__city:nth-child(7) { left: 78.33%; top: 19.62%; }

.places__row {
    display:     flex;
    align-items: flex-start;
    gap:         16px;
    margin-top:  64px;
}
.places__motto {
    flex:           0 0 calc((100% - 64px) / 5);
    max-width:      145px;
    margin:         0;
    font-size:      var(--fs-small);
    font-style:     italic;
    font-weight:    var(--fw-light);
    letter-spacing: -0.02em;
    color:          var(--color-on-dark-faint);
}
.places__text {
    flex:   0 0 calc((100% - 64px) / 5);
    margin: 0 0 0 calc((100% - 64px) / 5 - 145px);
}
.places__btn {
    flex:        0 0 calc((100% - 64px) / 5);
    margin-left: auto;
    margin-top:  68px;
}

@media (max-width: 1023px) {
    .places { padding: 104px 0; }

    .places__map {
        margin:        32px 0 0;
        aspect-ratio:  339 / 304;
        border:        0;
        border-radius: 0;
    }
    .places__city { width: 30.68%; font-size: var(--fs-body); }
    .places__city:nth-child(1) { left: 0;      top: 0; }
    .places__city:nth-child(2) { left: 27.14%; top: 17.11%; }
    .places__city:nth-child(3) { left: 56.34%; top: 5.92%; }
    .places__city:nth-child(4) { left: 69.32%; top: 37.5%; }
    .places__city:nth-child(5) { left: 39.82%; top: 49.34%; }
    .places__city:nth-child(6) { left: 0.59%;  top: 34.21%; }
    .places__city:nth-child(7) { left: 12.68%; top: 65.79%; }

    .places__row {
        flex-direction: column;
        gap:            16px;
        margin-top:     24px;
    }
    .places__motto,
    .places__text {
        flex:      0 0 auto;
        max-width: none;
        margin:    0;
    }
    .places__motto {
        font-family: var(--font-mono);
        font-style:  normal;
        font-weight: var(--fw-regular);
    }
    .places__btn { display: none; }
}

@media (max-width: 767px) {
    .places__title { font-size: 48px; }
}

/* ═══ Home animations ═══════════════════════════════════════════════════════ */

/* ── Hero photo: fades up on load (reference: the hero media of risd.edu/about) ── */
@keyframes hero-fade-up {
    from { opacity: 0; translate: 0 45%; }
    to   { opacity: 1; translate: 0 0; }
}

.home .hero__media { animation: hero-fade-up 2s cubic-bezier(.22, 1, .36, 1) both; }

@media (prefers-reduced-motion: reduce) {
    .home .hero__media { animation: none; }
}

/* ── Navigate: layout of the design (title, photo, description + link); a tab opens horizontally (left to right);
      on desktop the section is pinned and the page scroll opens the four tabs one after another (home.js) ── */
@media (min-width: 1024px) {
    /* ── pin: the container sticks while the spacer after it scrolls by ── */
    .home .navigate::after { content: ''; display: block; height: var(--tabs-pin, 240vh); }
    .home .navigate > .container { position: sticky; top: 100px; }
    .home .navigate__tabs { margin-top: 64px; container-type: inline-size; }

    /* ── order inside a tab: title, photo, description ── */
    .home .nav-tab__title { order: 0; }
    .home .nav-tab__media {
        order:        1;
        margin:       16px 0 0;
        aspect-ratio: auto;
        /* fixed height of an open tab, so the widths animating never move the text */
        height:       calc(((100cqw - 64px) / 5 * 2 + 16px) * 260 / 527);
    }
    .home .nav-tab__body {
        order:     2;
        max-width: calc((100cqw - 64px) / 5 + 40px);
        margin-top: 16px;
    }

    /* ── Smooth switching: nothing is display:none any more, so a closing tab fades out while the next one opens
          (photo wiped left to right, description fading in) and the widths glide; no element pops in or out ── */
    .home .nav-tab { transition: flex-basis 1s cubic-bezier(.22, 1, .36, 1); }

    .home .nav-tab .nav-tab__media {
        display:    block;
        opacity:    0;
        clip-path:  inset(0 100% 0 0);
        transition: clip-path 1s cubic-bezier(.22, 1, .36, 1), opacity .5s ease;
    }
    .home .nav-tab.is-active .nav-tab__media { opacity: 1; clip-path: inset(0 0 0 0); }

    .home .nav-tab .nav-tab__body,
    .home .nav-tab .nav-tab__body[hidden] {
        display:    flex;
        opacity:    0;
        visibility: hidden;
        translate:  -14px 0;
        transition: opacity .45s ease, translate .8s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .45s;
    }
    .home .nav-tab.is-active .nav-tab__body {
        opacity:    1;
        visibility: visible;
        translate:  0 0;
        transition: opacity .7s ease .35s, translate 1s cubic-bezier(.22, 1, .36, 1) .35s, visibility 0s;
    }

    .home .nav-tab__title button { transition: color .6s ease; }
}

/* Short screens: tighter spacing and a lower photo, so the description and the link stay on screen while the section is pinned
   (home.js also lowers the pin position when the section is still taller than the screen) */
@media (min-width: 1024px) and (max-height: 820px) {
    .home .navigate__tabs { margin-top: 32px; }
    .home .nav-tab__media  { height: calc(((100cqw - 64px) / 5 * 2 + 16px) * 190 / 527); margin-top: 12px; }
    .home .nav-tab__body   { margin-top: 12px; }
    .home .navigate__head  { gap: 8px; }
}

@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
    .home .nav-tab,
    .home .nav-tab .nav-tab__media,
    .home .nav-tab .nav-tab__body { transition: none !important; }
}

/* ── Places: the circles twinkle at random (reference: the integrations visual of paypath.ai); home.js lights them (.is-lit) ── */
.home .places__map.is-in .places__city {
    opacity:    .38;
    transition: opacity 2.2s ease, color 1.8s ease;
}
.home .places__map.is-in .places__city.is-lit {
    opacity: 1;
    color:   var(--color-dark);
}
.home .places__city::before {
    background: rgba(255, 255, 255, .55); /* a soft gray disc, not pure white */
    transition: transform 2.2s cubic-bezier(.22, 1, .36, 1);
}
.home .places__city.is-lit::before { transform: scale(1); }
.home .places__city.is-lit::after  { border-color: rgba(255, 255, 255, .4); }

@media (prefers-reduced-motion: reduce) {
    .home .places__map .places__city { opacity: 1; }
}

/* ── Help: the photos are scroll-linked (reference: the hero images of risd.edu); home.js sets translate + opacity ── */
.help__figure { will-change: translate, opacity; }