/* MIDNIGHT METROPOLIS V2 */
.mm-city {
    position:relative;isolation:isolate;overflow:hidden;
    background:#100d12;color:#f5e8d6;
    padding:110px 24px 70px;
    --mm-gold:#e7b67c;
    --mm-copper:#bc704d;
}
.mm-city * {box-sizing:border-box}
.mm-container {max-width:1440px;margin:auto;position:relative}
.mm-atmosphere {
    position:absolute;inset:0;pointer-events:none;
    background:
        radial-gradient(ellipse at 50% 65%,rgba(112,56,46,.2),transparent 65%),
        radial-gradient(ellipse at 80% 15%,rgba(75,56,91,.15),transparent 45%);
}
.mm-topline {
    display:flex;justify-content:space-between;gap:15px;
    padding-top:17px;border-top:1px solid rgba(229,173,119,.3);
    color:#cda57d;font-size:10px;letter-spacing:.19em;
}
.mm-topline i {
    display:inline-block;width:5px;height:5px;
    margin:0 10px 2px;background:#df9c71;border-radius:50%;
}
.mm-heading {text-align:center;padding:75px 0 65px}
.mm-heading>p {
    color:#d4a47d;font-size:11px;letter-spacing:.28em;margin:0 0 23px;
}
.mm-heading h2 {
    margin:0;font:400 clamp(57px,7vw,110px)/.94 "Cormorant Garamond",Georgia,serif;
    letter-spacing:-.045em;color:#f9e9d3;
}
.mm-heading h2 em {font-weight:400;color:#d99e78}
.mm-heading>span {
    display:block;max-width:500px;margin:26px auto 0;
    color:#bca69e;font-size:14px;line-height:1.8;
}
.mm-world {
    position:relative;min-height:770px;
    border:1px solid rgba(216,154,106,.28);
    overflow:hidden;
    background:linear-gradient(180deg,#161523 0%,#2d2026 46%,#241716 78%,#100c10 100%);
}
.mm-sky {
    position:absolute;inset:0;pointer-events:none;
    background:
        radial-gradient(ellipse at 50% 37%,rgba(177,107,79,.24),transparent 48%),
        repeating-linear-gradient(90deg,transparent 0 100px,rgba(245,201,148,.012) 101px 102px);
}
.mm-moon {
    position:absolute;width:160px;height:160px;top:9%;left:calc(50% - 80px);
    border-radius:50%;
    background:radial-gradient(circle at 35% 30%,#e6bda0,#9e7774 60%,#665565);
    opacity:.48;box-shadow:0 0 100px 45px rgba(205,139,104,.12);
}
.mm-horizon {
    position:absolute;left:0;right:0;bottom:22%;height:3px;
    background:linear-gradient(90deg,transparent,#b77354,transparent);
    box-shadow:0 0 65px 22px rgba(197,100,59,.13);
}
.mm-architecture {position:absolute;inset:0;pointer-events:none}
.mm-building {
    position:absolute;bottom:14%;width:var(--bw,7%);height:var(--bh,45%);
    left:var(--bx,0%);
    background:
        linear-gradient(90deg,rgba(243,169,107,.14),transparent 20%,rgba(0,0,0,.4) 80%),
        linear-gradient(180deg,#47343a,#1c1822 60%,#0c1018);
    border:1px solid rgba(220,145,95,.27);
    box-shadow:inset 3px 0 0 rgba(236,173,111,.09),12px 0 30px rgba(0,0,0,.28);
}
.mm-building-roof {
    position:absolute;bottom:100%;left:-4%;width:108%;height:5px;
    background:linear-gradient(90deg,#7c4c43,#db9d72,#573a3d);
    box-shadow:0 0 14px rgba(235,146,87,.4);
}
.mm-building-windows {
    position:absolute;inset:10px 10%;
    display:grid;grid-template-columns:repeat(4,1fr);
    grid-template-rows:repeat(6,1fr);
    gap:9px 8px;
}
.mm-building-windows i {
    background:#e3a76c;
    opacity:.16;box-shadow:0 0 7px rgba(246,175,99,.22);
}
.mm-building-windows i:nth-child(3n),
.mm-building-windows i:nth-child(7n) {
    opacity:.65;
    animation:mm-window-flicker 6s ease-in-out infinite alternate;
}
.mm-building-1 {--bx:0%;--bw:9%;--bh:39%}
.mm-building-2 {--bx:7%;--bw:8%;--bh:57%}
.mm-building-3 {--bx:14%;--bw:7%;--bh:45%}
.mm-building-4 {--bx:20%;--bw:10%;--bh:68%}
.mm-building-5 {--bx:29%;--bw:8%;--bh:50%}
.mm-building-6 {--bx:36%;--bw:7%;--bh:74%}
.mm-building-7 {--bx:42%;--bw:10%;--bh:56%}
.mm-building-8 {--bx:51%;--bw:8%;--bh:83%}
.mm-building-9 {--bx:58%;--bw:9%;--bh:61%}
.mm-building-10 {--bx:66%;--bw:8%;--bh:72%}
.mm-building-11 {--bx:73%;--bw:7%;--bh:48%}
.mm-building-12 {--bx:79%;--bw:9%;--bh:66%}
.mm-building-13 {--bx:87%;--bw:7%;--bh:54%}
.mm-building-14 {--bx:93%;--bw:8%;--bh:43%}
.mm-building-15 {--bx:47%;--bw:5%;--bh:92%;opacity:.5}
.mm-bridge {
    position:absolute;bottom:26%;height:8px;
    background:linear-gradient(180deg,#9b6652,#38262a);
    box-shadow:0 0 17px rgba(227,142,88,.25);
}
.mm-bridge-one {left:0;width:36%}
.mm-bridge-two {right:0;width:35%}
.mm-street-light {
    position:absolute;bottom:15%;width:3px;height:105px;
    background:#825e52;
}
.mm-street-light::before {
    content:"";position:absolute;top:0;left:-7px;
    width:17px;height:8px;border-radius:50%;
    background:#ffd59c;box-shadow:0 0 38px 18px rgba(234,150,81,.26);
}
.mm-street-light-one {left:17%}
.mm-street-light-two {left:48%}
.mm-street-light-three {left:84%}
.mm-city-glow {
    position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(180deg,transparent 55%,rgba(233,126,72,.07) 70%,rgba(0,0,0,.4));
}
.mm-destinations {position:absolute;inset:0;z-index:4}
.mm-location {
    position:absolute;
    left:var(--mx);top:var(--my);
    display:flex;flex-direction:column;align-items:center;
    text-decoration:none;color:#f9e9d5;
    transform:translate(-50%,-50%);
    z-index:5;transition:transform .35s;
}
.mm-location:nth-child(1) {--mx:13%;--my:35%}
.mm-location:nth-child(2) {--mx:34%;--my:21%}
.mm-location:nth-child(3) {--mx:62%;--my:26%}
.mm-location:nth-child(4) {--mx:84%;--my:38%}
.mm-location:nth-child(5) {--mx:19%;--my:65%}
.mm-location:nth-child(6) {--mx:40%;--my:54%}
.mm-location:nth-child(7) {--mx:66%;--my:62%}
.mm-location:nth-child(8) {--mx:88%;--my:70%}
.mm-location-beacon {
    position:relative;width:15px;height:15px;border-radius:50%;
    background:#f6bf8e;border:3px solid #5b342e;
    box-shadow:0 0 0 7px rgba(244,170,110,.11),0 0 25px #e69b6d;
    margin-bottom:14px;
}
.mm-location-beacon::before {
    content:"";position:absolute;inset:-14px;
    border:1px solid rgba(250,187,124,.5);border-radius:50%;
    animation:mm-beacon 3s ease-out infinite;
}
.mm-location-beacon::after {
    content:"";position:absolute;left:50%;top:100%;
    height:27px;width:1px;background:linear-gradient(#dba271,transparent);
}
.mm-location-plaque {
    display:flex;flex-direction:column;align-items:center;gap:3px;
    min-width:155px;max-width:205px;padding:13px 16px;
    background:linear-gradient(140deg,rgba(51,35,39,.93),rgba(16,16,26,.94));
    border:1px solid rgba(226,163,110,.44);
    box-shadow:0 15px 35px rgba(0,0,0,.45),inset 0 1px rgba(255,221,173,.08);
    backdrop-filter:blur(10px);
    text-align:center;
    clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));
    transition:background .3s,box-shadow .3s,border-color .3s;
}
.mm-location-plaque small {
    font-size:8px;letter-spacing:.16em;color:#c28d69;
}
.mm-location-plaque strong {
    font:400 clamp(22px,2.1vw,32px)/1 "Cormorant Garamond",Georgia,serif;
    white-space:nowrap;
}
.mm-location-plaque>span {
    color:#d7a779;font-size:9px;letter-spacing:.1em;
}
.mm-location-plaque b {margin-left:5px;font-size:15px;font-weight:400}
.mm-location:hover,.mm-location:focus-visible,.mm-location.is-active {
    transform:translate(-50%,-55%);outline:none;z-index:10;
}
.mm-location:hover .mm-location-plaque,
.mm-location:focus-visible .mm-location-plaque,
.mm-location.is-active .mm-location-plaque {
    background:linear-gradient(135deg,rgba(122,67,53,.98),rgba(37,28,36,.97));
    border-color:#f1bf85;
    box-shadow:0 0 38px rgba(235,145,83,.38),0 20px 40px rgba(0,0,0,.5);
}
.mm-location.is-active .mm-location-beacon {
    background:#fff0bf;box-shadow:0 0 0 10px rgba(244,170,110,.18),0 0 42px #ffb878;
}
.mm-world-footer {
    position:absolute;z-index:6;bottom:0;left:0;right:0;
    display:flex;justify-content:space-between;gap:15px;
    padding:19px 27px;
    background:linear-gradient(90deg,rgba(12,11,17,.94),rgba(29,19,23,.95));
    border-top:1px solid rgba(217,153,100,.28);
    color:#d2a57e;font-size:10px;letter-spacing:.14em;
}
.mm-world-footer strong {color:#f9e5c9;font-weight:500}
.mm-world-footer i {
    display:inline-block;width:6px;height:6px;background:#e9ad78;
    border-radius:50%;margin-right:7px;box-shadow:0 0 12px #e9ad78;
}
.mm-bottom {
    display:flex;justify-content:space-between;align-items:center;
    gap:25px;padding:36px 0;border-bottom:1px solid rgba(218,159,107,.28);
}
.mm-bottom>div>span {font-size:10px;letter-spacing:.2em;color:#cfa078}
.mm-bottom p {margin:8px 0 0;font:400 28px/1.1 "Cormorant Garamond",Georgia,serif}
.mm-explore-all {
    border:1px solid rgba(221,159,105,.43);padding:16px 23px;
    font-size:11px;letter-spacing:.12em;color:#d8ae87;
    opacity:.65;cursor:not-allowed;
}
.mm-explore-all b {margin-left:12px;font-weight:400}
.mm-explore-all small {
    display:block;margin-top:7px;font-size:9px;letter-spacing:.07em;
}
.mm-preview-note {margin-top:17px;color:#917d76;font-size:10px;letter-spacing:.08em}
.mm-empty {
    position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
    color:#e4c3a1;
}
@keyframes mm-beacon {
    0% {transform:scale(.5);opacity:1}
    100% {transform:scale(1.8);opacity:0}
}
@keyframes mm-window-flicker {
    50% {opacity:.23}
}
@media(max-width:1050px) {
    .mm-world {min-height:1000px}
    .mm-location:nth-child(1) {--mx:20%;--my:26%}
    .mm-location:nth-child(2) {--mx:70%;--my:26%}
    .mm-location:nth-child(3) {--mx:20%;--my:43%}
    .mm-location:nth-child(4) {--mx:70%;--my:43%}
    .mm-location:nth-child(5) {--mx:20%;--my:60%}
    .mm-location:nth-child(6) {--mx:70%;--my:60%}
    .mm-location:nth-child(7) {--mx:20%;--my:77%}
    .mm-location:nth-child(8) {--mx:70%;--my:77%}
}
@media(max-width:650px) {
    .mm-city {padding:75px 14px 55px}
    .mm-topline {font-size:8px;letter-spacing:.08em}
    .mm-heading {padding:55px 0 45px}
    .mm-heading h2 {font-size:clamp(48px,12vw,70px)}
    .mm-heading>span {font-size:13px}
    .mm-world {min-height:1070px}
    .mm-building {bottom:10%}
    .mm-location:nth-child(1) {--mx:27%;--my:17%}
    .mm-location:nth-child(2) {--mx:73%;--my:27%}
    .mm-location:nth-child(3) {--mx:27%;--my:37%}
    .mm-location:nth-child(4) {--mx:73%;--my:47%}
    .mm-location:nth-child(5) {--mx:27%;--my:57%}
    .mm-location:nth-child(6) {--mx:73%;--my:67%}
    .mm-location:nth-child(7) {--mx:27%;--my:77%}
    .mm-location:nth-child(8) {--mx:73%;--my:87%}
    .mm-location-plaque {min-width:130px;max-width:155px;padding:10px 8px}
    .mm-location-plaque strong {font-size:22px}
    .mm-location-plaque small {font-size:7px}
    .mm-world-footer {padding:12px;font-size:8px;letter-spacing:.04em}
    .mm-world-footer>span:first-child {display:none}
    .mm-bottom {flex-direction:column;align-items:stretch}
    .mm-explore-all {text-align:center}
}
@media(max-width:380px) {
    .mm-location-plaque {min-width:116px;max-width:130px}
    .mm-location-plaque strong {font-size:19px}
}
@media(prefers-reduced-motion:reduce) {
    .mm-city *,.mm-city *::before,.mm-city *::after {
        animation:none!important;transition:none!important;
    }
}