/* ── MC City Atlas — Shared Styles ──────────────────────────────────────────── */

:root {
  --black:    #0a0a0a;
  --black-ui: #111111;
  --gold:     #D4AF37;
  --gold-hi:  #FFE878;
  --gold-lo:  #8B6B10;
  --amber:    #C8901A;
  --cream:    #F5F5F0;
  --cream-dim: rgba(245,245,240,.55);
  --grey:     #333333;
  --white:    #ffffff;

  --font-title:     'Cinzel', serif;
  --font-body:      'Montserrat', sans-serif;
  --font-italic:    'Playfair Display', serif;

  --ease: cubic-bezier(.4,0,.2,1);
  --border: 1px solid rgba(212,175,55,.18);
  --border-active: 1px solid rgba(212,175,55,.6);
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html  { scroll-behavior: smooth; }
body  { font-family: var(--font-body); background: var(--black); color: var(--cream); overflow-x: hidden; line-height: 1.6; }
img   { max-width: 100%; display: block; }
a     { text-decoration: none; color: inherit; }
button { cursor: pointer; border: none; background: none; font-family: var(--font-body); }

/* Film grain overlay */
body::before {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none; z-index: 9999; opacity: .025;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-repeat: repeat;
}

/* ── Layout ── */
.container { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }

/* ── Nav ── */
.city-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 2rem; height: 60px;
  background: rgba(10,10,10,.92);
  border-bottom: var(--border);
  backdrop-filter: blur(12px);
}
.city-nav__brand {
  font-family: var(--font-title);
  font-size: .7rem; letter-spacing: .28em; text-transform: uppercase;
  color: var(--gold);
}
.city-nav__links {
  display: flex; align-items: center; gap: 2rem;
  font-size: .65rem; letter-spacing: .2em; text-transform: uppercase;
}
.city-nav__links a { color: var(--cream-dim); transition: color .2s; }
.city-nav__links a:hover { color: var(--gold); }
.city-nav__links a.active { color: var(--gold); }

/* ── Page top padding (below fixed nav) ── */
.page-body { padding-top: 60px; }

/* ── Breadcrumb ── */
.breadcrumb {
  padding: 1.25rem 2rem;
  font-size: .6rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--cream-dim);
  border-bottom: var(--border);
}
.breadcrumb a { color: var(--gold-lo); transition: color .2s; }
.breadcrumb a:hover { color: var(--gold); }
.breadcrumb span { margin: 0 .5em; opacity: .4; }

/* ── Typography ── */
.eyebrow {
  font-family: var(--font-body); font-size: .65rem; font-weight: 600;
  letter-spacing: .28em; text-transform: uppercase; color: var(--gold);
  display: block; margin-bottom: .75rem;
}
.section-title {
  font-family: var(--font-title); font-size: clamp(1.6rem, 3vw, 2.5rem);
  font-weight: 700; color: var(--cream); line-height: 1.15;
}
.section-sub { font-size: .9rem; color: var(--cream-dim); line-height: 1.75; }
.divider { width: 40px; height: 1px; background: var(--gold); margin: 1.25rem 0 2rem; opacity: .5; }

/* ── Hero ── */
.city-hero {
  padding: 5rem 2rem 4rem;
  display: flex; flex-direction: column; gap: 1rem;
  border-bottom: var(--border);
}
.city-hero__tag {
  font-size: .6rem; letter-spacing: .32em; text-transform: uppercase;
  color: var(--amber); font-family: var(--font-body); font-weight: 600;
}
.city-hero__title {
  font-family: var(--font-title);
  font-size: clamp(2.2rem, 5vw, 4rem);
  font-weight: 900; color: var(--cream); line-height: 1.05;
}
.city-hero__title em { color: var(--gold); font-style: normal; }
.city-hero__sub {
  font-size: .9rem; color: var(--cream-dim); max-width: 520px; line-height: 1.8;
}

/* ── Map section ── */
.map-section { padding: 3rem 2rem; border-bottom: var(--border); }
.map-label {
  font-size: .6rem; letter-spacing: .28em; text-transform: uppercase;
  color: var(--cream-dim); margin-bottom: 1.25rem;
}
.map-wrapper {
  position: relative;
  width: 100%; max-width: 1100px;
  border: var(--border);
}
.map-wrapper img { width: 100%; display: block; }
.map-overlay {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
}
.district-hit {
  cursor: pointer;
  fill: rgba(212,175,55,0);
  stroke: rgba(212,175,55,0);
  stroke-width: 2;
  transition: fill .25s, stroke .25s;
}
.district-hit:hover { fill: rgba(212,175,55,.15); stroke: rgba(212,175,55,.6); }
.district-hit.coming-soon { cursor: default; }
.district-hit.coming-soon:hover { fill: rgba(255,255,255,.05); stroke: rgba(255,255,255,.15); }

/* ── District legend ── */
.district-legend {
  display: flex; flex-wrap: wrap; gap: .75rem;
  padding: 1.25rem 2rem; border-bottom: var(--border);
}
.legend-item {
  display: flex; align-items: center; gap: .6rem;
  font-size: .65rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--cream-dim);
}
.legend-dot {
  width: 8px; height: 8px; border-radius: 50%;
  flex-shrink: 0;
}

/* ── Landmark grid ── */
.landmark-section { padding: 3rem 2rem; }
.landmark-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5px;
  background: rgba(212,175,55,.1);
  border: var(--border);
}
.landmark-card {
  background: var(--black-ui);
  display: flex; flex-direction: column;
  transition: background .2s;
  text-decoration: none; color: inherit;
}
.landmark-card:hover { background: #161616; }
.landmark-card__render {
  aspect-ratio: 4/3;
  background: #0d0d0d;
  overflow: hidden;
  border-bottom: var(--border);
  display: flex; align-items: center; justify-content: center;
}
.landmark-card__render img,
.landmark-card__render svg { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.landmark-card-thumb { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; display: block; }
.landmark-card__body { padding: 1.25rem 1.25rem 1.5rem; flex: 1; display: flex; flex-direction: column; gap: .6rem; }
.landmark-card__id {
  font-size: .58rem; letter-spacing: .28em; text-transform: uppercase;
  color: var(--gold); font-family: var(--font-body); font-weight: 600;
}
.landmark-card__name {
  font-family: var(--font-title); font-size: 1rem; font-weight: 600;
  color: var(--cream); line-height: 1.2;
}
.landmark-card__tier {
  font-size: .58rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--cream-dim);
}
.landmark-card__desc {
  font-size: .8rem; color: var(--cream-dim); line-height: 1.6;
  flex: 1;
}
.landmark-card__cta {
  font-size: .6rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold); margin-top: .5rem;
}

/* ── Landmark detail (individual pages) ── */
.landmark-hero {
  padding: 3rem 2rem 2.5rem;
  border-bottom: var(--border);
  display: grid; grid-template-columns: 1fr 1fr; gap: 3rem;
  align-items: start;
}
@media (max-width: 768px) { .landmark-hero { grid-template-columns: 1fr; gap: 2rem; } }

.landmark-hero__left { display: flex; flex-direction: column; gap: 1rem; }
.landmark-hero__id {
  font-size: .6rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--amber); font-weight: 600;
}
.landmark-hero__district {
  font-size: .6rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--cream-dim);
}
.landmark-hero__name {
  font-family: var(--font-title);
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  font-weight: 700; color: var(--cream); line-height: 1.1;
}
.landmark-hero__tagline {
  font-family: var(--font-italic); font-style: italic;
  font-size: 1rem; color: var(--cream-dim); line-height: 1.6;
}
.tier-badge {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .35rem .75rem;
  border: var(--border-active); font-size: .58rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--gold);
  align-self: flex-start;
}
.landmark-hero__cinematic {
  aspect-ratio: 2/3;
  background: #080808; border: var(--border);
  overflow: hidden; display: flex; align-items: center; justify-content: center;
}
.landmark-hero__cinematic img,
.landmark-hero__cinematic svg { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.landmark-hero-img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }

/* ── Tabs ── */
.landmark-tabs { border-bottom: var(--border); }
.tab-nav {
  display: flex; padding: 0 2rem; gap: 0;
  overflow-x: auto;
}
.tab-btn {
  padding: 1rem 1.5rem;
  font-size: .62rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--cream-dim); background: none; border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer; white-space: nowrap;
  transition: color .2s, border-color .2s;
}
.tab-btn:hover { color: var(--cream); }
.tab-btn.active { color: var(--gold); border-bottom-color: var(--gold); }

.tab-panel { display: none; padding: 2.5rem 2rem; }
.tab-panel.active { display: block; }

/* ── Spec table ── */
.spec-table { width: 100%; border-collapse: collapse; }
.spec-table tr { border-bottom: var(--border); }
.spec-table tr:last-child { border-bottom: none; }
.spec-table th {
  width: 180px; padding: .9rem 1rem .9rem 0;
  font-size: .6rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--cream-dim); font-weight: 500; text-align: left; vertical-align: top;
}
.spec-table td {
  padding: .9rem 0;
  font-size: .85rem; color: var(--cream); line-height: 1.6;
}
.spec-table td.gold { color: var(--gold); }

/* ── Locked elements list ── */
.locked-list { list-style: none; display: flex; flex-direction: column; gap: .5rem; }
.locked-list li {
  display: flex; align-items: flex-start; gap: .75rem;
  font-size: .82rem; color: var(--cream); line-height: 1.5;
}
.locked-list li::before {
  content: '◆'; color: var(--gold); font-size: .55rem; margin-top: .2rem; flex-shrink: 0;
}

/* ── Palette swatches ── */
.palette-row { display: flex; gap: 1rem; flex-wrap: wrap; }
.swatch {
  display: flex; align-items: center; gap: .65rem;
}
.swatch__color {
  width: 32px; height: 32px; border: var(--border); flex-shrink: 0;
}
.swatch__label { font-size: .72rem; color: var(--cream-dim); }
.swatch__hex { font-size: .65rem; color: var(--cream-dim); letter-spacing: .1em; }

/* ── Gallery / renders ── */
.render-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.5px;
  background: rgba(212,175,55,.1); border: var(--border);
}
.render-item { aspect-ratio: 2/3; background: #080808; overflow: hidden; }
.render-item img, .render-item svg { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.render-label {
  padding: .5rem .75rem; font-size: .58rem;
  letter-spacing: .2em; text-transform: uppercase; color: var(--cream-dim);
  border-top: var(--border); background: var(--black-ui);
}

/* ── Section headings in detail panels ── */
.panel-title {
  font-family: var(--font-title); font-size: .9rem; font-weight: 600;
  color: var(--cream); letter-spacing: .12em; text-transform: uppercase;
  margin-bottom: 1.25rem; padding-bottom: .75rem; border-bottom: var(--border);
}

/* ── Footer ── */
.city-footer {
  padding: 2.5rem 2rem;
  border-top: var(--border);
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
}
.city-footer__copy {
  font-size: .6rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--cream-dim);
}
.city-footer__brand { color: var(--gold); }
.city-footer__link { font-size: .6rem; letter-spacing: .18em; text-transform: uppercase; color: var(--cream-dim); transition: color .2s; }
.city-footer__link:hover { color: var(--gold); }

/* ── Plaza / Streets feature pages ── */
.feature-hero {
  aspect-ratio: 16/9;
  overflow: hidden; border: var(--border);
  background: #080808;
}
.feature-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.feature-section { padding: 3rem 2rem; border-bottom: var(--border); }
.feature-section + .feature-section { border-top: none; }
.feature-intro {
  font-family: var(--font-italic); font-style: italic;
  font-size: clamp(.95rem, 1.8vw, 1.2rem); color: var(--cream-dim);
  line-height: 1.8; max-width: 720px; margin-bottom: 2rem;
}
.feature-caption {
  font-size: .65rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--cream-dim); margin-top: .75rem; padding-top: .75rem;
  border-top: var(--border);
}
.plaza-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1px; background: rgba(212,175,55,.12); border: var(--border);
  margin-top: 1.75rem;
}
.plaza-lm {
  background: var(--black-ui); padding: 1rem 1.25rem;
  display: flex; flex-direction: column; gap: .35rem;
  text-decoration: none; color: inherit;
  transition: background .2s;
}
.plaza-lm:hover { background: #181818; }
.plaza-lm__pos { font-size: .55rem; letter-spacing: .22em; text-transform: uppercase; color: var(--amber); font-weight: 600; }
.plaza-lm__name { font-family: var(--font-title); font-size: .85rem; font-weight: 600; color: var(--cream); }
.plaza-lm__id { font-size: .6rem; color: var(--cream-dim); letter-spacing: .12em; }
.plaza-lm__cta { font-size: .58rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-top: .25rem; }
.streets-list { display: flex; flex-direction: column; gap: 3rem; margin-top: 2rem; }
.street-feature { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: start; }
.street-feature__img {
  aspect-ratio: 16/9; overflow: hidden; border: var(--border); background: #0a0a0a;
}
.street-feature__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.street-feature__body { display: flex; flex-direction: column; gap: .85rem; }
.street-feature__name { font-family: var(--font-title); font-size: 1.3rem; font-weight: 700; color: var(--cream); letter-spacing: .04em; }
.street-feature__dir { font-size: .62rem; letter-spacing: .22em; text-transform: uppercase; color: var(--amber); font-weight: 600; }
.street-feature__char { font-family: var(--font-italic); font-style: italic; font-size: 1rem; color: var(--cream-dim); line-height: 1.7; }
.street-feature__lms { font-size: .78rem; color: var(--cream-dim); line-height: 1.6; }
.street-feature__lms a { color: var(--gold); }
.street-feature__lms a:hover { text-decoration: underline; }
.street-pending { padding: 1.75rem 2rem; border: var(--border); border-left: 2px solid rgba(212,175,55,.25); background: rgba(212,175,55,.03); }
.street-pending__name { font-family: var(--font-title); font-size: .9rem; font-weight: 600; color: var(--cream); letter-spacing: .06em; margin-bottom: .35rem; }
.street-pending__dir { font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--amber); margin-bottom: .5rem; }
.street-pending__note { font-size: .78rem; color: var(--cream-dim); }

/* ── Explore more (casino district index) ── */
.district-explore { padding: 3rem 2rem; border-top: var(--border); }
.explore-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5px; background: rgba(212,175,55,.1); border: var(--border); margin-top: 1.75rem; }
.explore-card { background: var(--black-ui); text-decoration: none; color: inherit; display: flex; flex-direction: column; transition: background .2s; }
.explore-card:hover { background: #161616; }
.explore-card__img { aspect-ratio: 16/9; overflow: hidden; border-bottom: var(--border); background: #0a0a0a; }
.explore-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s var(--ease); }
.explore-card:hover .explore-card__img img { transform: scale(1.03); }
.explore-card__body { padding: 1.5rem 1.5rem 2rem; display: flex; flex-direction: column; gap: .5rem; }
.explore-card__label { font-size: .58rem; letter-spacing: .28em; text-transform: uppercase; color: var(--amber); font-weight: 600; }
.explore-card__title { font-family: var(--font-title); font-size: 1.1rem; font-weight: 700; color: var(--cream); }
.explore-card__desc { font-size: .82rem; color: var(--cream-dim); line-height: 1.65; }
.explore-card__cta { font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-top: .5rem; }

/* ── Architectural detail section ── */
.arch-detail { padding: 2.5rem 2rem; border-top: var(--border); }
.arch-detail__img {
  aspect-ratio: 4/3;
  overflow: hidden; border: var(--border); background: #080808;
  margin: 1.5rem 0 .875rem;
  max-width: 680px;
}
.arch-detail__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.arch-detail__placeholder {
  aspect-ratio: 4/3; max-width: 680px; border: var(--border);
  background: #080808; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: .75rem;
  margin: 1.5rem 0 .875rem;
}
.arch-detail__placeholder-icon { font-size: 2.5rem; opacity: .2; }
.arch-detail__placeholder-text { font-size: .65rem; letter-spacing: .22em; text-transform: uppercase; color: var(--cream-dim); }
.arch-detail__caption { font-size: .78rem; color: var(--cream-dim); line-height: 1.65; max-width: 620px; }

/* ── Responsive ── */
@media (max-width: 900px) {
  .city-nav { padding: 0 1rem; }
  .landmark-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
}
@media (max-width: 768px) {
  .street-feature { grid-template-columns: 1fr; gap: 1.5rem; }
  .explore-cards { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .city-hero { padding: 3rem 1.25rem 2.5rem; }
  .breadcrumb { padding: 1rem 1.25rem; }
  .map-section, .landmark-section { padding: 2rem 1.25rem; }
  .landmark-grid { grid-template-columns: 1fr; }
  .tab-btn { padding: .875rem .875rem; }
  .spec-table th { width: 120px; font-size: .55rem; }
  .city-footer { flex-direction: column; align-items: flex-start; }
  .render-grid { grid-template-columns: 1fr; }
  .feature-section, .district-explore, .arch-detail { padding: 2rem 1.25rem; }
  .streets-list { gap: 2rem; }
}