/* New Siena Shenzhen mutates the common shell without redefining Metapolis. */
.city-shell--nss {
    --city-bg: #eee8dc;
    --city-ink: #20211e;
    --city-stone: #c9bfad;
    --city-brass: var(--mp-accent, #8a6b3f);
    --city-water: var(--mp-nss-accent, #557174);
    --city-night: #20232a;
    background: var(--city-bg);
    color: var(--city-ink);
}

.city-shell--nss .site-header {
    border-color: rgba(32, 33, 30, 0.35);
    background: rgba(238, 232, 220, 0.96);
}

.city-shell--nss .site-navigation a,
.city-shell--nss .site-mark__index,
.city-shell--nss .nav-toggle {
    border-color: rgba(32, 33, 30, 0.3);
}

.city-shell--nss .site-navigation__access,
.city-shell--nss .site-footer {
    background: var(--city-night);
}

.city-nss {
    background: var(--city-bg);
    color: var(--city-ink);
}

.nss-section {
    padding-block: clamp(5rem, 10vw, 10rem);
    border-top: 1px solid rgba(32, 33, 30, 0.38);
}

.nss-section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: clamp(2.5rem, 6vw, 5rem);
}

.nss-section-heading h2,
.nss-two-column h2 {
    max-width: 16ch;
    margin: 0.7rem 0 0;
    font-family: var(--mp-font-heading);
    font-size: clamp(2.6rem, 6vw, 6rem);
    font-weight: 400;
    letter-spacing: -0.05em;
    line-height: 0.92;
}

.nss-section-number {
    margin: 0;
    color: var(--city-water);
    font-family: var(--mp-font-label);
    font-size: clamp(3rem, 8vw, 7rem);
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 0.8;
}

.nss-two-column {
    display: grid;
    align-items: start;
    gap: clamp(3rem, 9vw, 9rem);
    grid-template-columns: minmax(0, 0.85fr) minmax(18rem, 1.15fr);
}

/* Arrival */
.nss-arrival {
    position: relative;
    display: grid;
    min-height: calc(100svh - var(--mp-header-height));
    overflow: hidden;
    background: var(--city-night);
    color: #f5f0e5;
    isolation: isolate;
}

.nss-arrival__media,
.nss-arrival__veil,
.nss-arrival__content {
    grid-area: 1 / 1;
}

.nss-arrival__media img {
    width: 100%;
    height: 100%;
    min-height: calc(100svh - var(--mp-header-height));
    object-fit: cover;
}

.nss-arrival__placeholder {
    display: flex;
    min-height: calc(100svh - var(--mp-header-height));
    align-items: flex-start;
    justify-content: space-between;
    flex-direction: column;
    padding: clamp(2rem, 6vw, 6rem);
    background:
        radial-gradient(circle at 72% 34%, rgba(85, 113, 116, 0.85), transparent 0 13%, transparent 13.5%),
        linear-gradient(128deg, transparent 0 48%, rgba(201, 191, 173, 0.18) 48.2% 48.7%, transparent 49% 100%),
        repeating-linear-gradient(90deg, transparent 0 7.9rem, rgba(238, 232, 220, 0.09) 8rem),
        var(--city-night);
    font-family: var(--mp-font-label);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.13em;
}

.nss-arrival__placeholder span:nth-child(2) { align-self: flex-end; }
.nss-arrival__veil { z-index: 1; background: linear-gradient(90deg, rgba(20, 23, 27, 0.93) 0%, rgba(20, 23, 27, 0.55) 52%, rgba(20, 23, 27, 0.08) 100%); }
.nss-arrival__content { z-index: 2; display: flex; align-items: flex-start; justify-content: center; flex-direction: column; padding-block: clamp(4rem, 9vw, 8rem); }

.nss-arrival h1 {
    max-width: 10ch;
    margin: 1rem 0 0.75rem;
    font-family: var(--mp-font-heading);
    font-size: clamp(4rem, 11vw, 11rem);
    font-weight: 400;
    letter-spacing: -0.065em;
    line-height: 0.76;
}

.nss-arrival__type {
    margin: 0;
    color: #d2c6ae;
    font-family: var(--mp-font-label);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.nss-arrival__question {
    max-width: 42rem;
    margin: clamp(2rem, 4vw, 4rem) 0 2rem;
    font-family: var(--mp-font-heading);
    font-size: clamp(1.35rem, 2.6vw, 2.25rem);
    line-height: 1.2;
}

.button--nss {
    border-color: #f5f0e5;
    background: #f5f0e5;
    color: var(--city-night);
}

.button--nss:hover { border-color: var(--city-brass); background: var(--city-brass); color: #fff; }

/* City navigation and status */
.city-nav {
    position: sticky;
    z-index: 15;
    top: 0;
    overflow-x: auto;
    border-block: 1px solid rgba(32, 33, 30, 0.42);
    background: rgba(238, 232, 220, 0.96);
    scrollbar-width: thin;
}

.city-nav__inner {
    display: flex;
    width: max-content;
    min-width: var(--mp-frame);
}

.city-nav a {
    display: inline-flex;
    min-height: 3.5rem;
    align-items: center;
    padding-inline: clamp(0.8rem, 2vw, 1.5rem);
    border-right: 1px solid rgba(32, 33, 30, 0.3);
    font-family: var(--mp-font-label);
    font-size: 0.67rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
}

.city-nav a:hover { background: var(--city-stone); }
.nss-status-wrap { padding-block: clamp(1.5rem, 3vw, 2.5rem); }
.status-strip { border: 1px solid rgba(32, 33, 30, 0.45); }
.status-strip dl { display: grid; margin: 0; grid-template-columns: 0.65fr 0.55fr 1fr; }
.status-strip dl > div { min-width: 0; padding: 1rem 1.25rem; border-right: 1px solid rgba(32, 33, 30, 0.32); }
.status-strip dl > div:last-child { border-right: 0; }
.status-strip dt { color: var(--city-water); font-family: var(--mp-font-label); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.status-strip dd { margin: 0.25rem 0 0; font-family: var(--mp-font-heading); font-size: clamp(1rem, 1.8vw, 1.35rem); line-height: 1.2; }

/* Claim */
.nss-claim { padding-top: clamp(4rem, 8vw, 8rem); border-top: 0; }
.nss-claim__statement > p:first-child { margin: 0; font-family: var(--mp-font-heading); font-size: clamp(1.8rem, 3.6vw, 3.75rem); letter-spacing: -0.035em; line-height: 1.08; }
.nss-editorial-content { max-width: 44rem; margin-top: 3rem; padding-top: 2rem; border-top: 1px solid rgba(32, 33, 30, 0.35); }
.nss-editorial-content > :first-child { margin-top: 0; }

/* Layer diagram */
.nss-structure { background: var(--city-night); color: var(--city-bg); }
.nss-structure .eyebrow { color: #b8b5ab; }
.layer-map { display: grid; margin: 0; padding: 0; list-style: none; }
.layer-map li { display: grid; min-height: clamp(5rem, 9vw, 8rem); align-items: center; padding: 1rem clamp(1rem, 3vw, 3rem); border-top: 1px solid #555a60; grid-template-columns: 4rem minmax(0, 1fr); }
.layer-map li:last-child { border-bottom: 1px solid #555a60; }
.layer-map li:nth-child(1) { margin-inline: 16%; background: rgba(138, 107, 63, 0.34); }
.layer-map li:nth-child(2) { margin-inline: 12%; }
.layer-map li:nth-child(3) { margin-inline: 9%; background: rgba(85, 113, 116, 0.18); }
.layer-map li:nth-child(4) { margin-inline: 6%; }
.layer-map li:nth-child(5) { margin-inline: 3%; background: rgba(138, 107, 63, 0.18); }
.layer-map span { color: #999c99; font-family: var(--mp-font-label); font-size: 0.68rem; letter-spacing: 0.12em; }
.layer-map strong { font-family: var(--mp-font-heading); font-size: clamp(1.7rem, 4vw, 4rem); font-weight: 400; letter-spacing: -0.035em; line-height: 1; }

/* Contrade */
.nss-contrade { background: #ddd4c3; }
.contrade-grid { display: grid; margin: 0; padding: 0; border-top: 1px solid rgba(32, 33, 30, 0.45); border-left: 1px solid rgba(32, 33, 30, 0.32); grid-template-columns: repeat(4, minmax(0, 1fr)); list-style: none; }
.contrade-grid li { display: flex; min-height: 14rem; align-items: flex-start; justify-content: space-between; flex-direction: column; padding: 1.25rem; border-right: 1px solid rgba(32, 33, 30, 0.32); border-bottom: 1px solid rgba(32, 33, 30, 0.45); }
.contrade-grid li:nth-child(even) { background: rgba(238, 232, 220, 0.45); }
.contrade-grid li:last-child { background: var(--city-water); color: #fff; }
.contrada-mark { display: inline-grid; width: 2.75rem; height: 2.75rem; place-items: center; border: 1px solid currentColor; border-radius: 50%; font-family: var(--mp-font-label); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em; }
.contrade-grid strong { max-width: 8ch; font-family: var(--mp-font-heading); font-size: clamp(1.5rem, 2.5vw, 2.4rem); font-weight: 400; line-height: 1; }

/* Systems */
.systems-grid { display: grid; border-top: 1px solid rgba(32, 33, 30, 0.45); border-left: 1px solid rgba(32, 33, 30, 0.3); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.system-card { display: grid; min-height: 19rem; align-content: space-between; padding: clamp(1.25rem, 3vw, 2.5rem); border-right: 1px solid rgba(32, 33, 30, 0.3); border-bottom: 1px solid rgba(32, 33, 30, 0.45); }
.system-card__index { color: var(--city-water); font-family: var(--mp-font-label); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; }
.system-card h3 { margin: 0 0 0.75rem; font-family: var(--mp-font-heading); font-size: clamp(2rem, 3.5vw, 3.5rem); font-weight: 400; letter-spacing: -0.04em; line-height: 1; }
.system-card p { max-width: 30rem; margin: 0; color: #52564f; }

/* City life */
.nss-life { background: var(--city-brass); color: #fffaf0; }
.nss-life .eyebrow { color: #e1d8c8; }
.life-index { display: grid; margin: 0; padding: 0; border-top: 1px solid rgba(255, 250, 240, 0.55); grid-template-columns: repeat(2, minmax(0, 1fr)); list-style: none; }
.life-index li { padding: 0.85rem 0.5rem 0.85rem 0; border-bottom: 1px solid rgba(255, 250, 240, 0.4); font-family: var(--mp-font-label); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }

/* Current files */
.nss-files { background: var(--city-bg); }
.nss-file-grid { display: grid; border-top: 1px solid rgba(32, 33, 30, 0.55); border-left: 1px solid rgba(32, 33, 30, 0.3); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nss-file-grid .artifact-card { border-color: rgba(32, 33, 30, 0.35); }
.nss-file-grid .empty-state { grid-column: 1 / -1; }

/* Paid city dossier */
.city-dossier-route { min-height: 70vh; }
.city-dossier__header { padding-block: clamp(5rem, 11vw, 10rem); border-bottom: 1px solid rgba(32, 33, 30, 0.42); background: #ddd4c3; }
.city-dossier__header-grid { display: grid; align-items: end; gap: clamp(3rem, 9vw, 9rem); grid-template-columns: minmax(0, 1.2fr) minmax(12rem, 0.4fr); }
.city-dossier__header h1 { max-width: 14ch; margin: 0.8rem 0 0; font-family: var(--mp-font-heading); font-size: clamp(3.4rem, 9vw, 8.5rem); font-weight: 400; letter-spacing: -0.06em; line-height: 0.84; }
.city-dossier__status { padding-top: 1.5rem; border-top: 1px solid rgba(32, 33, 30, 0.55); font-family: var(--mp-font-label); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; }
.city-dossier__status p { margin: 0.25rem 0; }
.city-dossier__image { margin-block: clamp(2rem, 5vw, 5rem); }
.city-dossier__image img { width: 100%; max-height: 75vh; object-fit: cover; }
.city-dossier__image figcaption { padding-top: 0.5rem; color: #5e6059; font-size: 0.82rem; }
.city-dossier__content { width: min(100% - 2rem, 46rem); padding-block: clamp(3rem, 8vw, 8rem); font-size: clamp(1rem, 1.4vw, 1.15rem); }
.city-dossier__content > :first-child { margin-top: 0; }
.city-dossier__content h2, .city-dossier__content h3 { margin-top: 2.5em; font-family: var(--mp-font-heading); font-weight: 400; line-height: 1.05; }
.city-dossier__content h2 { font-size: clamp(2rem, 4vw, 3.75rem); }
.city-dossier__content h3 { font-size: clamp(1.5rem, 3vw, 2.5rem); }
.city-dossier__content a { color: var(--city-water); }
.city-dossier__gate { padding-block: clamp(4rem, 10vw, 10rem); }
.city-dossier__gate .member-door { background: #ddd4c3; }

@media (max-width: 64rem) {
    .contrade-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .systems-grid, .nss-file-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 48rem) {
    .nss-section-heading { align-items: flex-start; flex-direction: column; }
    .nss-two-column { grid-template-columns: 1fr; }
    .nss-arrival__veil { background: linear-gradient(90deg, rgba(20, 23, 27, 0.92), rgba(20, 23, 27, 0.35)); }
    .nss-arrival h1 { font-size: clamp(4rem, 20vw, 7rem); }
    .status-strip dl { grid-template-columns: 1fr 1fr; }
    .status-strip dl > div:nth-child(2) { border-right: 0; }
    .status-strip dl > div:last-child { grid-column: 1 / -1; border-top: 1px solid rgba(32, 33, 30, 0.32); }
    .layer-map li, .layer-map li:nth-child(n) { min-height: 5rem; margin-inline: 0; grid-template-columns: 2.5rem minmax(0, 1fr); }
    .contrade-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .systems-grid, .nss-file-grid { grid-template-columns: 1fr; }
    .system-card { min-height: 15rem; }
    .city-dossier__header-grid { grid-template-columns: 1fr; }
}

@media (max-width: 30rem) {
    .nss-arrival__content { padding-block: 3.5rem; }
    .nss-arrival__question { font-size: 1.25rem; }
    .status-strip dl { grid-template-columns: 1fr; }
    .status-strip dl > div, .status-strip dl > div:nth-child(2) { border-right: 0; border-bottom: 1px solid rgba(32, 33, 30, 0.32); }
    .status-strip dl > div:last-child { grid-column: auto; border-top: 0; border-bottom: 0; }
    .contrade-grid, .life-index { grid-template-columns: 1fr; }
    .contrade-grid li { min-height: 10rem; }
}

@media (prefers-reduced-motion: reduce) {
    .city-card__visual img { transition: none; }
}