/* ============================================================
   DOWNTOWN DISTRICT EXPLORER  (downtown.html)
   A night-scene ring of buildings orbiting each district's landmark.
   Everything is scoped under .dtx- so it can't collide with the
   sitewide styles. Data + behavior live in assets/downtown/districts.js.
   ============================================================ */
.dtx-empty{ display:none; }
.dtx, .dtx-panel, .dtx-scrim{
  --dtx-night:#0A1222;
  --dtx-night-2:#101C36;
  --dtx-haze:#1B2B50;
  --dtx-lamp:#F4BE55;
  --dtx-lamp-soft:rgba(244,190,85,.16);
  --dtx-ink:#EDF0F7;
  --dtx-ink-2:#A9B3CB;
  --dtx-ink-3:#76819C;
  --dtx-line:rgba(169,179,203,.2);
  --dtx-panel:#0E1830;
}
.dtx{
  background:var(--dtx-night);
  color:var(--dtx-ink);
  padding:72px 0 64px;
  color-scheme:dark;
}
.dtx .eyebrow{ color:var(--dtx-lamp); }
.dtx h2{ color:var(--dtx-ink); }
.dtx p{ color:var(--dtx-ink-2); }
.dtx-head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:18px 32px; margin-bottom:26px; }
.dtx-head .lede{ max-width:620px; margin:12px 0 0; }

/* district tabs */
.dtx-tabs{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; }
.dtx-tab{
  font:500 14px 'Archivo', sans-serif; color:var(--dtx-ink);
  background:transparent; border:1px solid var(--dtx-line); border-radius:999px;
  padding:9px 16px; cursor:pointer; display:inline-flex; align-items:center; gap:8px;
  transition:border-color .2s, background .2s, color .2s;
}
.dtx-tab:hover:not([disabled]){ border-color:var(--dtx-lamp); }
.dtx-tab[aria-selected="true"]{ background:var(--dtx-lamp); border-color:var(--dtx-lamp); color:var(--dtx-night); }
.dtx-tab[disabled]{ color:var(--dtx-ink-3); border-style:dashed; cursor:default; }
.dtx-tab .soon{ font-family:'IBM Plex Mono', monospace; font-size:10px; letter-spacing:1.5px; text-transform:uppercase; }

/* controls */
.dtx-controls{ display:flex; gap:8px; align-items:center; }
.dtx-btn{
  font:500 13px 'Archivo', sans-serif; color:var(--dtx-ink); background:transparent;
  border:1px solid var(--dtx-line); border-radius:999px; height:38px; padding:0 15px;
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  transition:border-color .2s, background .2s;
}
.dtx-btn:hover{ border-color:var(--dtx-lamp); background:var(--dtx-lamp-soft); }
.dtx-btn.icon{ width:38px; padding:0; justify-content:center; }
.dtx-btn svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.dtx-btn:focus-visible,.dtx-tab:focus-visible,.dtx-tower:focus-visible,.dtx-chip:focus-visible,.dtx-close:focus-visible{ outline:2px solid var(--dtx-lamp); outline-offset:3px; }

/* stage */
.dtx-stage{
  position:relative; width:100%; height:clamp(420px, 60vw, 700px);
  border-radius:18px; overflow:hidden; border:1px solid var(--dtx-line);
  background:
    radial-gradient(ellipse 55% 45% at 50% 58%, rgba(244,190,85,.20), transparent 70%),
    radial-gradient(ellipse 90% 70% at 50% 60%, var(--dtx-haze), transparent 75%),
    linear-gradient(180deg, #070D1A 0%, var(--dtx-night-2) 60%, #0C162B 100%);
  isolation:isolate; touch-action:pan-y; user-select:none; -webkit-user-select:none; cursor:grab;
}
.dtx-stage.dragging{ cursor:grabbing; }
.dtx-track{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.dtx-label{ position:absolute; left:50%; transform:translateX(-50%); text-align:center; pointer-events:none; white-space:nowrap; z-index:150; }
.dtx-label .name{
  font-family:'Fraunces', Georgia, serif; font-weight:560; text-transform:uppercase;
  letter-spacing:.04em; line-height:.9; color:var(--dtx-ink);
  text-shadow:0 0 28px rgba(244,190,85,.35), 0 2px 0 rgba(0,0,0,.4);
}
.dtx-label .sub{ font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--dtx-lamp); margin-top:8px; }
.dtx-center{ position:absolute; left:50%; transform:translate(-50%,-50%); pointer-events:none; z-index:200; }
.dtx-center img{ display:block; width:100%; height:auto; filter:drop-shadow(0 18px 30px rgba(0,0,0,.55)); }
.dtx-center-tag{
  position:absolute; left:50%; transform:translateX(-50%); z-index:201; pointer-events:none;
  font-family:'IBM Plex Mono', monospace; font-weight:600; font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--dtx-night); background:var(--dtx-lamp); padding:4px 12px 3px; border-radius:3px; white-space:nowrap;
  box-shadow:0 4px 14px rgba(0,0,0,.45);
}
.dtx-tower{
  position:absolute; left:0; top:0; padding:0; margin:0; border:0; background:none; cursor:pointer;
  transform-origin:50% 100%; will-change:transform; display:flex; flex-direction:column; align-items:center;
}
.dtx-tower img{ display:block; height:100%; width:auto; max-width:none; pointer-events:none; filter:drop-shadow(0 14px 16px rgba(0,0,0,.5)); transition:filter .25s; }
.dtx-tower:hover img,.dtx-tower.active img{ filter:drop-shadow(0 0 18px rgba(244,190,85,.55)) drop-shadow(0 14px 16px rgba(0,0,0,.5)); }
.dtx-tower .tname{
  position:absolute; left:50%; top:100%; transform:translate(-50%,8px);
  font:600 12px 'Archivo', sans-serif; color:var(--dtx-ink);
  background:rgba(10,18,34,.85); border:1px solid var(--dtx-line); border-radius:999px; padding:3px 10px; white-space:nowrap;
  transition:border-color .2s, opacity .2s;
}
.dtx-tower:hover .tname,.dtx-tower.active .tname{ border-color:var(--dtx-lamp); color:var(--dtx-lamp); }
.dtx-slot{ position:absolute; left:0; top:0; width:34px; height:12px; border-radius:50%; border:1px dashed rgba(169,179,203,.35); pointer-events:none; will-change:transform; }
.dtx-hint{ position:absolute; left:16px; bottom:14px; font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:.08em; color:var(--dtx-ink-3); pointer-events:none; }

a.dtx-center-tag.is-link{ pointer-events:auto; cursor:pointer; transition:transform .2s, box-shadow .2s; }
a.dtx-center-tag.is-link:hover{ transform:translateX(-50%) translateY(-2px); box-shadow:0 8px 20px rgba(0,0,0,.5), 0 0 0 3px rgba(244,190,85,.35); }
a.dtx-center-tag.is-link::after{ content:" \2197"; }

/* landmark feature link under the ring */
.dtx-feature{ display:flex; align-items:center; gap:14px; margin-top:18px; padding:16px 20px; border-radius:12px; border:1px solid var(--dtx-line); background:var(--dtx-panel); color:var(--dtx-ink); transition:border-color .2s; }
.dtx-feature:hover{ border-color:var(--dtx-lamp); }
.dtx-feature .k{ font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--dtx-lamp); white-space:nowrap; }
.dtx-feature .t{ flex:1; font-weight:600; }
.dtx-feature .go{ color:var(--dtx-lamp); font-size:18px; }

/* roster */
.dtx-roster{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:16px; }
.dtx-roster .label{ font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--dtx-ink-3); margin-right:6px; }
.dtx-chip{ font:500 13px 'Archivo', sans-serif; color:var(--dtx-ink); background:var(--dtx-panel); border:1px solid var(--dtx-line); border-radius:999px; padding:6px 14px; cursor:pointer; }
.dtx-chip:hover{ border-color:var(--dtx-lamp); }

/* detail panel */
.dtx-scrim{ position:fixed; inset:0; background:rgba(4,8,16,.55); opacity:0; pointer-events:none; transition:opacity .25s; z-index:900; }
.dtx-scrim.open{ opacity:1; pointer-events:auto; }
.dtx-panel{
  position:fixed; top:0; right:0; bottom:0; width:min(460px,100%);
  background:var(--dtx-panel); color:var(--dtx-ink); border-left:1px solid var(--dtx-line);
  transform:translateX(102%); transition:transform .35s cubic-bezier(.2,.8,.2,1);
  z-index:1000; display:flex; flex-direction:column; color-scheme:dark;
}
.dtx-panel.open{ transform:none; }
.dtx-panel-scroll{ overflow-y:auto; padding:22px 24px 30px; flex:1; }
.dtx-panel p{ color:var(--dtx-ink-2); }
.dtx-panel-head{ display:flex; gap:16px; align-items:flex-end; padding-right:36px; }
.dtx-panel-head > div{ min-width:0; }
.dtx-panel-head img{ height:150px; width:auto; max-width:46%; object-fit:contain; object-position:left bottom; flex:none; filter:drop-shadow(0 8px 12px rgba(0,0,0,.5)); }
.dtx-panel h2{ font-size:38px; line-height:.95; margin:6px 0 8px; color:var(--dtx-ink); text-wrap:balance; overflow-wrap:anywhere; }
.dtx-panel h2.long{ font-size:30px; }
.dtx-panel .eyebrow{ color:var(--dtx-lamp); margin-bottom:0; }
.dtx-addr{ color:var(--dtx-ink-2); font-size:13.5px; }
.dtx-close{ position:absolute; top:14px; right:14px; width:38px; height:38px; border-radius:50%; border:1px solid var(--dtx-line); background:var(--dtx-night); color:var(--dtx-ink); cursor:pointer; display:grid; place-items:center; }
.dtx-close svg{ width:16px; height:16px; stroke:currentColor; stroke-width:2; fill:none; stroke-linecap:round; }
.dtx-facts{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--dtx-line); border:1px solid var(--dtx-line); border-radius:10px; overflow:hidden; margin:20px 0 20px; }
.dtx-fact{ background:var(--dtx-panel); padding:10px 12px; }
.dtx-fact b{ display:block; font-family:'Fraunces', Georgia, serif; font-weight:560; font-size:28px; line-height:1; color:var(--dtx-lamp); font-variant-numeric:tabular-nums; }
.dtx-fact span{ font-family:'IBM Plex Mono', monospace; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--dtx-ink-3); }
.dtx-listing{ display:block; margin:0 0 6px; padding:14px 16px; border-radius:10px; background:var(--dtx-lamp); color:var(--dtx-night); }
.dtx-listing b{ display:block; font-size:15px; }
.dtx-listing span{ font-size:13px; }
.dtx-panel h3{ font-family:'IBM Plex Mono', monospace; font-weight:500; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--dtx-ink-3); margin:22px 0 8px; }
.dtx-units{ width:100%; border-collapse:collapse; font-size:14px; }
.dtx-units th{ text-align:left; font-weight:500; color:var(--dtx-ink-3); font-size:12px; padding:0 0 6px; border-bottom:1px solid var(--dtx-line); }
.dtx-units td{ padding:10px 0; border-bottom:1px solid var(--dtx-line); vertical-align:top; color:var(--dtx-ink); }
.dtx-units td.note{ color:var(--dtx-ink-3); font-size:12.5px; padding-left:8px; }
.dtx-units .num{ text-align:right; font-family:'IBM Plex Mono', monospace; font-size:13px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.dtx-small{ color:var(--dtx-ink-3); font-size:12.5px; margin:8px 0 0; }
.dtx-tags{ display:flex; flex-wrap:wrap; gap:6px; }
.dtx-tags span{ font-size:12.5px; color:var(--dtx-ink-2); border:1px solid var(--dtx-line); border-radius:6px; padding:4px 9px; }
.dtx-kv{ display:grid; grid-template-columns:auto 1fr; gap:6px 16px; font-size:14px; margin:0; }
.dtx-kv dt{ color:var(--dtx-ink-3); }
.dtx-kv dd{ margin:0; }
.dtx-cta{ display:inline-flex; margin-top:22px; padding:12px 18px; border-radius:999px; border:1px solid var(--dtx-lamp); color:var(--dtx-lamp); font-weight:600; font-size:14px; }
.dtx-cta:hover{ background:var(--dtx-lamp-soft); }
.dtx-source{ margin-top:22px; padding-top:14px; border-top:1px solid var(--dtx-line); font-size:12px; color:var(--dtx-ink-3); }
.dtx-source a{ color:var(--dtx-ink-2); text-decoration:underline; }

@media (max-width:640px){
  .dtx{ padding:52px 0 48px; }
  .dtx-stage{ height:clamp(380px, 112vw, 520px); border-radius:14px; }
  .dtx-panel{ top:auto; left:0; width:100%; max-height:86%; border-left:0; border-top:1px solid var(--dtx-line); border-radius:18px 18px 0 0; transform:translateY(102%); }
  .dtx-panel h2{ font-size:32px; }
  .dtx-panel-head img{ height:110px; }
  .dtx-hint{ display:none; }
}
@media (prefers-reduced-motion:reduce){ .dtx-panel,.dtx-scrim{ transition:none; } }

/* ============================================================
   DOWNTOWN HERO — night sky with the skyline on the seam into
   the explorer band (both end on --dtx-night, so they read as one).
   ============================================================ */
.page-hero.dtx-hero{
  background:linear-gradient(180deg, #060B16 0%, #0C1733 50%, #0A1222 100%);
  color:#EDF0F7; padding-bottom:0; overflow:hidden; color-scheme:dark;
}
.page-hero.dtx-hero .breadcrumb, .page-hero.dtx-hero .breadcrumb a{ color:#76819C; }
.page-hero.dtx-hero .breadcrumb a:hover{ color:#EDF0F7; }
.page-hero.dtx-hero .eyebrow{ color:#F4BE55; }
.page-hero.dtx-hero h1{ color:#EDF0F7; }
.page-hero.dtx-hero .lede{ color:#A9B3CB !important; }
.dtx-skyline{ position:relative; margin-top:44px; display:flex; flex-direction:column; align-items:center; }
.dtx-skyline img{ display:block; width:max(100%, 960px); max-width:none; height:auto; flex:none; }
.dtx-skyline .sky{ filter:drop-shadow(0 0 24px rgba(244,190,85,.18)); }
.dtx-skyline .reflect{
  transform:scaleY(-1); margin-top:-1px; opacity:.28; filter:blur(1.5px) saturate(1.2);
  -webkit-mask-image:linear-gradient(to top, rgba(0,0,0,.9), transparent 55%);
          mask-image:linear-gradient(to top, rgba(0,0,0,.9), transparent 55%);
  height:calc(max(100vw, 960px) * 0.0648); object-fit:cover; object-position:50% 100%;
}
.page-hero.dtx-hero + .dtx-empty + .dtx{ padding-top:40px; }

/* placeholder tower (no photo yet) + partner styles */
.dtx-ph{ display:flex; align-items:flex-end; justify-content:center; height:100%; aspect-ratio:.42; border-radius:4px 4px 0 0;
  background:repeating-linear-gradient(180deg, rgba(244,190,85,.22) 0 3px, transparent 3px 14px), linear-gradient(180deg, #22355F, #152445);
  border:1px dashed rgba(244,190,85,.55); box-shadow:0 14px 16px rgba(0,0,0,.45); }
.dtx-ph span{ font:600 11px 'IBM Plex Mono', monospace; letter-spacing:.12em; text-transform:uppercase; color:var(--dtx-lamp); text-align:center; padding:0 4px 14px; line-height:1.3; background:linear-gradient(transparent, rgba(10,18,34,.7)); }
.dtx-ph.big{ height:150px; flex:none; }
.dtx-tower:hover .dtx-ph, .dtx-tower.active .dtx-ph{ box-shadow:0 0 18px rgba(244,190,85,.5); }
.dtx-badge{ position:absolute; left:50%; top:8px; transform:translateX(-50%); box-shadow:0 2px 8px rgba(0,0,0,.4); font:600 10px 'IBM Plex Mono', monospace; letter-spacing:.14em; text-transform:uppercase; color:var(--dtx-night); background:var(--dtx-lamp); padding:3px 8px; border-radius:3px; white-space:nowrap; }
.dtx-about{ font-size:14.5px; line-height:1.55; margin:0 0 16px; }
.dtx-partner{ border:1px solid var(--dtx-lamp); border-radius:12px; padding:16px 18px; margin:4px 0 6px; background:linear-gradient(180deg, rgba(244,190,85,.10), rgba(244,190,85,.02)); }
.dtx-partner-badge{ display:inline-block; font:600 10.5px 'IBM Plex Mono', monospace; letter-spacing:.14em; text-transform:uppercase; color:var(--dtx-night); background:var(--dtx-lamp); padding:3px 8px; border-radius:3px; }
.dtx-partner h4{ margin:10px 0 4px; font-family:'Fraunces', Georgia, serif; font-weight:560; font-size:24px; color:var(--dtx-ink); }
.dtx-partner h4 small{ font:500 12px 'Archivo', sans-serif; color:var(--dtx-ink-3); margin-left:6px; }
.dtx-partner p{ font-size:14px; margin:0 0 10px; }
.dtx-partner-points{ list-style:none; margin:0 0 14px; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:6px 14px; font-size:13px; color:var(--dtx-ink); }
.dtx-partner-points li::before{ content:"\2022"; color:var(--dtx-lamp); margin-right:7px; }
.dtx-partner-links{ display:flex; flex-wrap:wrap; gap:8px; }
.dtx-partner-links a{ font-size:13px; font-weight:600; padding:8px 13px; border-radius:999px; border:1px solid var(--dtx-line); color:var(--dtx-ink); }
.dtx-partner-links a:hover{ border-color:var(--dtx-lamp); }
.dtx-partner-links a.solid{ background:var(--dtx-lamp); border-color:var(--dtx-lamp); color:var(--dtx-night); }

/* East Village standouts (light section under the explorer) */
.ev-standouts .ev-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:18px; }
.ev-card{ display:flex; flex-direction:column; gap:8px; padding:24px; border:1px solid var(--line); border-radius:14px; background:var(--bg-card); }
.ev-card .k{ font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-faint); }
.ev-card h3{ margin:0; }
.ev-card p{ margin:0; font-size:15px; }
.ev-card .go{ margin-top:auto; padding-top:8px; font-weight:600; font-size:14px; }
.ev-card.partner{ grid-column:1 / -1; background:#0A1222; border-color:#0A1222; color:#EDF0F7; display:grid; grid-template-columns:minmax(0,3fr) minmax(0,2fr); gap:14px 36px; align-items:center; padding:30px; }
.ev-card.partner h3{ color:#EDF0F7; font-size:28px; }
.ev-card.partner p{ color:#A9B3CB; }
.ev-card.partner .k{ color:#F4BE55; }
.ev-card.partner .badge{ display:inline-block; font:600 10.5px 'IBM Plex Mono', monospace; letter-spacing:.14em; text-transform:uppercase; color:#0A1222; background:#F4BE55; padding:3px 8px; border-radius:3px; margin-right:8px; }
.ev-card.partner ul{ list-style:none; margin:4px 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:6px 16px; font-size:14px; color:#EDF0F7; }
.ev-card.partner li::before{ content:"\2022"; color:#F4BE55; margin-right:8px; }
.ev-card.partner .links{ display:flex; flex-direction:column; gap:10px; }
.ev-card.partner .links a{ display:flex; justify-content:space-between; padding:13px 18px; border-radius:999px; border:1px solid rgba(169,179,203,.3); color:#EDF0F7; font-weight:600; font-size:14px; }
.ev-card.partner .links a:hover{ border-color:#F4BE55; }
.ev-card.partner .links a.solid{ background:#F4BE55; border-color:#F4BE55; color:#0A1222; }
@media (max-width:760px){ .ev-card.partner{ grid-template-columns:1fr; } .ev-card.partner ul, .dtx-partner-points{ grid-template-columns:1fr; } }

/* landmark placeholder (district whose center photo hasn't arrived) */
.dtx-center.is-ph{ aspect-ratio:2/1; border-radius:50%; border:1.5px dashed rgba(244,190,85,.55);
  background:radial-gradient(ellipse at 50% 60%, rgba(244,190,85,.18), rgba(14,24,48,.6) 70%); }
.dtx-center.is-ph::after{ content:"Landmark photo coming"; position:absolute; left:0; right:0; top:34%; text-align:center;
  font:600 11px 'IBM Plex Mono', monospace; letter-spacing:.14em; text-transform:uppercase; color:var(--dtx-lamp); }

/* dining card (full width) */
.ev-card.dining{ grid-column:1 / -1; }
.ev-dine{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:18px 28px; margin-top:6px; }
.ev-dine h4{ margin:0 0 8px; font-family:'IBM Plex Mono', monospace; font-weight:500; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-faint); }
.ev-dine ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; font-size:15px; color:var(--text); }