/* vegas-monitor — "Marquee": midnight and champagne. Playfair Display is (unslop-ignore: the serif is the concept, chosen on purpose)
   self-hosted (OFL); everything else is the system stack. Selector names are
   stable — filters.js, evidence.js, sort.js, nav.js and explore.js depend
   on them. */
@font-face {
  font-family: 'Playfair Display'; /* unslop-ignore */
  src: url('fonts/playfair-400.woff2') format('woff2');
  font-weight: 400 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Playfair Display'; /* unslop-ignore */
  src: url('fonts/playfair-400-italic.woff2') format('woff2');
  font-weight: 400 900; font-style: italic; font-display: swap;
}
:root {
  --bg: #08080b; --panel: #101017; --panel2: #16161f; --line: #211d2a;
  --goldline: rgba(201, 164, 76, .22);
  --ink: #efeae0; --dim: #9b93a4; --faint: #6a6373;
  --gold: #c9a44c; --gold-dim: #8a7433; --champ: #e9d7a7;
  --pos: #7fc79a; --neg: #d98a80; --neu: #8a92a8;
  --serif: 'Playfair Display', Didot, 'Bodoni MT', Georgia, serif; /* unslop-ignore */
  --tag-reg: #a98fc0; --tag-econ: #87a9cf; --tag-dev: #cfa87e; --tag-tech: #83bfb6; --tag-gam: #cbaa5e; --tag-hosp: #9cba85; --tag-mkt: #c996b2; --tag-ppl: #cf9379; --tag-night: #9d8cf0;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.6 'Avenir Next', Avenir, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; }
a { color: var(--gold); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 20px 60px; }

header.site { position: relative; border-bottom: 1px solid var(--goldline); background: linear-gradient(180deg, #0c0c11, var(--bg)); }
header.site .wrap { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 16px 20px 14px; }
.brand { font-family: var(--serif); font-size: 23px; font-weight: 500; letter-spacing: .16em; color: var(--champ); }
.brand b { color: var(--gold); font-weight: 500; }
.brand::before { content: '◆ '; color: var(--gold); font-size: 10px; vertical-align: 3px; letter-spacing: 0; }
.tagline { color: var(--faint); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; }
nav.main { display: none; }
nav.main.open { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 28px; position: absolute; top: 100%; left: 0; right: 0; z-index: 55; background: var(--panel); border-top: 1px solid var(--line); border-bottom: 1px solid var(--goldline); box-shadow: 0 30px 60px rgba(4, 4, 7, .6); padding: 22px 28px; margin: 0; }
nav.main a { color: var(--dim); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; padding: 3px 0; transition: color .25s, text-shadow .25s; }
nav.main.open .navgroup, nav.main.open .navgroup .sub { display: contents; }
nav.main.open .navgroup > a::after { content: ''; }
nav.main.open .navgroup .sub a { display: inline; padding: 3px 0; border-bottom: none; }
nav.main a:hover { color: var(--champ); text-decoration: none; text-shadow: 0 0 18px rgba(233, 215, 167, .5); }
nav.main a.on { color: var(--champ); border-bottom: 1px solid var(--gold); padding-bottom: 4px; }

h1 { font-family: var(--serif); font-size: 33px; font-weight: 500; letter-spacing: .01em; margin: 30px 0 6px; color: var(--ink); }
h2 { font-family: var(--serif); font-size: 22px; font-weight: 500; margin: 40px 0 12px; color: var(--champ); letter-spacing: .02em; }
h2::after { content: ''; display: block; margin-top: 8px; height: 1px; background: linear-gradient(90deg, var(--goldline), transparent 70%); }
h3 { font-size: 15px; margin: 18px 0 8px; }
.dek { color: var(--dim); margin: 0 0 18px; max-width: 70ch; font-size: 15.5px; }
.stamp { color: var(--faint); font-size: 12px; margin: 4px 0 18px; }

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 20px 0; }
.tile { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: 2px; padding: 16px 16px 14px; transition: transform .3s, border-color .3s, box-shadow .3s; }
.tile::before { content: ''; position: absolute; top: -1px; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--goldline), transparent); }
.tile:hover { border-color: var(--goldline); }
.tile .n { font-family: var(--serif); font-size: 28px; font-weight: 500; line-height: 1.1; color: var(--champ); }
.tile .l { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); margin-top: 7px; }
.tile .s { font-size: 11px; color: var(--faint); margin-top: 4px; }
a.tile { text-decoration: none; display: block; }
a.tile:hover { text-decoration: none; transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0, 0, 0, .45); }

.cardlist { display: grid; gap: 12px; margin: 12px 0; }
.card { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: 2px; padding: 14px 16px; transition: transform .3s, border-color .3s, box-shadow .3s; }
.card::before { content: ''; position: absolute; top: -1px; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--goldline), transparent); }
.card:hover { border-color: var(--goldline); transform: translateY(-2px); box-shadow: 0 16px 34px rgba(0, 0, 0, .45); }
.card .meta { font-size: 12px; color: var(--faint); margin-top: 5px; }
.card .sum { font-size: 13.5px; color: var(--dim); margin-top: 7px; }

.badge { display: inline-block; font-size: 11px; padding: 1px 9px; border-radius: 10px; border: 1px solid var(--line); color: var(--dim); margin-left: 6px; vertical-align: 1px; }
.badge.pos { color: var(--pos); border-color: var(--pos); }
.badge.neg { color: var(--neg); border-color: var(--neg); }
.badge.neu { color: var(--neu); }
.tag { display: inline-block; font-size: 9.5px; text-transform: uppercase; letter-spacing: .14em; padding: 1px 8px; border-radius: 2px; margin-right: 6px; font-weight: 500; background: none; border: 1px solid currentColor; }
@supports (color: color-mix(in srgb, red 50%, transparent)) {
  .tag { border-color: color-mix(in srgb, currentColor 40%, transparent); }
}
.tag.regulation { color: var(--tag-reg); } .tag.economy { color: var(--tag-econ); }
.tag.development { color: var(--tag-dev); } .tag.tech { color: var(--tag-tech); }
.tag.gaming { color: var(--tag-gam); } .tag.hospitality { color: var(--tag-hosp); }
.tag.marketing { color: var(--tag-mkt); }
.tag.people { color: var(--tag-ppl); }
.tag.incidents { color: #c98f88; }
.tag.industry { color: #a3a8c7; }
.tag.nevada { color: #b8b28a; }

/* ---- the calendar: real month grids */
.t-regulation { --evc: var(--tag-reg); } .t-economy { --evc: var(--tag-econ); }
.t-development { --evc: var(--tag-dev); } .t-tech { --evc: var(--tag-tech); }
.t-gaming { --evc: var(--tag-gam); } .t-hospitality { --evc: var(--tag-hosp); }
.t-marketing { --evc: var(--tag-mkt); } .t-people { --evc: var(--tag-ppl); }
.t-nightlife { --evc: var(--tag-night); }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); margin: 10px 0 30px; }
.cal .dh { background: var(--panel); padding: 7px 4px; font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--faint); text-align: center; }
.cal .dc { background: var(--bg); min-height: 96px; padding: 5px 6px 8px; min-width: 0; }
.cal .dc.blank { background: #0a0a0e; }
.cal .dn { font-family: var(--serif); font-size: 13px; color: var(--faint); }
.cal .dc.today { box-shadow: inset 0 0 0 1px var(--gold-dim); }
.cal .dc.today .dn { color: var(--champ); }
.cal .ev { display: block; margin-top: 5px; padding: 2px 6px 3px; font-size: 10.5px; line-height: 1.35; color: var(--ink); background: var(--panel2); border-left: 2px solid var(--evc, var(--gold)); overflow-wrap: break-word; }
a.ev:hover { background: #1c1c28; text-decoration: none; }
.cal .ev.cont { height: 4px; padding: 0; border-left: none; background: var(--evc, var(--gold)); opacity: .3; }
/* the type filter marks entries .hidden; .cal .ev's display would otherwise keep them on screen */
.cal .ev.hidden { display: none; }
@media (max-width: 760px) {
  .cal { display: block; border: none; background: none; }
  .cal .dh, .cal .dc.blank { display: none; }
  .cal .dc { min-height: 0; padding: 0; margin: 0; background: none; }
  .cal .dc:not(:has(.ev:not(.cont):not(.hidden))) { display: none; }
  .cal .dc { display: grid; grid-template-columns: 34px 1fr; gap: 0 10px; align-items: start; border-bottom: 1px solid var(--line); padding: 8px 0; }
  .cal .dn { padding-top: 3px; }
  .cal .ev { grid-column: 2; margin-top: 4px; }
  .cal .ev:first-of-type { margin-top: 0; }
  .cal .ev.cont { display: none; }
  .cal .dc.today { box-shadow: none; border-left: 2px solid var(--gold-dim); padding-left: 8px; }
}

table { border-collapse: collapse; width: 100%; margin: 14px 0; font-size: 13.5px; }
th { text-align: left; color: var(--faint); font-size: 10.5px; text-transform: uppercase; letter-spacing: .12em; padding: 8px 10px; border-bottom: 1px solid var(--goldline); }
td { padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
tr:hover td { background: linear-gradient(90deg, rgba(201, 164, 76, .05), transparent 80%); }
.senti { font-weight: 700; }
.senti.pos { color: var(--pos); } .senti.neg { color: var(--neg); } .senti.neu { color: var(--neu); }
.prop-chip { display: inline-block; background: var(--panel2); border: 1px solid var(--line); border-radius: 2px; padding: 0 6px; font-size: 11.5px; color: var(--dim); margin: 2px 4px 0 0; }
.note { background: var(--panel2); border-left: 2px solid var(--gold); padding: 12px 16px; font-size: 13px; color: var(--dim); margin: 16px 0; }
.cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 760px) { .cols2 { grid-template-columns: 1fr; } }
footer.site { border-top: 1px solid var(--goldline); margin-top: 48px; padding: 22px 20px 34px; color: var(--faint); font-size: 11.5px; letter-spacing: .1em; }
footer.site .wrap { padding-bottom: 0; }
.gapbox { border: 1px dashed var(--line); border-radius: 2px; padding: 10px 14px; color: var(--faint); font-size: 12.5px; }
.monthhead { color: var(--faint); text-transform: uppercase; letter-spacing: .16em; font-size: 11.5px; margin: 24px 0 6px; }

.trend { display: flex; gap: 8px; align-items: flex-end; margin: 12px 0 2px; max-width: 640px; }
.trend .col { flex: 1; max-width: 68px; text-align: center; font-size: 11px; color: var(--faint); }
.trend .bars { height: 72px; display: flex; flex-direction: column; justify-content: flex-end; gap: 1px; }
.trend .p { background: var(--pos); border-radius: 1px 1px 0 0; }
.trend .n { background: var(--neg); border-radius: 0 0 1px 1px; }
.trend .net { font-weight: 700; font-size: 12px; margin-top: 3px; }
.echart { display: flex; gap: 6px; align-items: flex-end; margin: 10px 0 2px; max-width: 640px; }
.echart .col { flex: 1; max-width: 84px; text-align: center; font-size: 11px; color: var(--faint); text-decoration: none; }
.echart .col:hover .bar { background: var(--gold); box-shadow: 0 0 14px rgba(201, 164, 76, .4); }
.echart .bar { background: var(--gold-dim); border-radius: 1px 1px 0 0; margin: 0 auto; width: 70%; transition: box-shadow .25s; }
.echart .v { font-size: 11px; color: var(--dim); margin-bottom: 2px; white-space: nowrap; }

.controls { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; align-items: center; }
.controls input[type="search"], .controls select { background: var(--panel2); color: var(--ink); border: 1px solid var(--line); border-radius: 2px; padding: 6px 10px; font-size: 13.5px; }
.controls input[type="search"]:focus, .controls select:focus { outline: none; border-color: var(--goldline); }
.chip { cursor: pointer; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 3px 12px; font-size: 12.5px; color: var(--dim); user-select: none; transition: .25s; }
.chip.on { border-color: var(--gold); color: var(--champ); }
.chip small { color: var(--faint); }
.hidden { display: none; }

/* front-page hero: the Strip at night behind the week's headline */
.hero { position: relative; margin: 0 -20px; min-height: 250px; display: flex; align-items: flex-end; overflow: hidden; }
.hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 60%; filter: grayscale(.35) sepia(.22) brightness(.55) contrast(1.05); }
.hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 8, 11, .55) 0%, rgba(8, 8, 11, .15) 40%, rgba(8, 8, 11, .92) 88%, var(--bg) 100%); }
.hero-in { position: relative; z-index: 2; padding: 34px 20px 24px; max-width: 900px; }
.hero-in .kicker { font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; }
.hero-in h1 { margin: 0; font-size: 36px; line-height: 1.12; color: #f4ecdc; max-width: 30ch; }
.hero-in h1 a { color: inherit; }
.hero-in h1 a:hover { text-decoration: none; color: var(--champ); }
.hero-in .dek { margin: 14px 0 0; max-width: 62ch; font-size: 15.5px; color: #b6aeb4; }
/* with a banner article the image stands alone and the headline sits beneath it */
.hero.plain { min-height: 0; height: 220px; }
.hero-in.below { padding: 20px 0 8px; }
/* two special reports side by side; the second is an h2 sized as an h1 so they read as equals */
.hero-pair { display: grid; gap: 0 36px; }
.hero-pair.n2 { grid-template-columns: 1fr 1fr; }
.hero-pair.n2 .hero-in.below + .hero-in.below { border-left: 1px solid var(--goldline); padding-left: 36px; margin-left: -18px; }
.hero-in .hero-h { margin: 0; border: 0; padding: 0; font-family: var(--serif); font-weight: 500; font-size: 36px; line-height: 1.12; color: #f4ecdc; max-width: 30ch; }
.hero-pair.n2 .hero-h { font-size: 27px; }
.hero-in .hero-h::after { display: none; }
.hero-in .hero-h a { color: inherit; }
.hero-in .hero-h a:hover { text-decoration: none; color: var(--champ); }
.hero-pair.n2 .dek { font-size: 14.5px; }
.hero-in .more { margin: 12px 0 0; font-size: 13px; }
@media (max-width: 760px) { .hero { min-height: 210px; } .hero.plain { min-height: 0; height: 140px; } .hero-in h1, .hero-in .hero-h, .hero-pair.n2 .hero-h { font-size: 24px; } .hero-pair.n2 { grid-template-columns: 1fr; } .hero-pair.n2 .hero-in.below + .hero-in.below { border-left: 0; border-top: 1px solid var(--goldline); padding-left: 0; margin-left: 0; margin-top: 8px; } }
.banner { margin: 18px 0 0; border-radius: 2px; overflow: hidden; border: 1px solid var(--line); }
.banner svg { display: block; width: 100%; height: auto; }
.banner img { display: block; width: 100%; height: auto; max-height: 190px; object-fit: cover; object-position: center 65%; filter: grayscale(.3) sepia(.2) brightness(.75); }

.feature { position: relative; background: var(--panel); border: 1px solid var(--goldline); border-radius: 2px; padding: 18px 20px; }
.feature::before { content: ''; position: absolute; top: -1px; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.feature .kicker { font-size: 10px; text-transform: uppercase; letter-spacing: .22em; color: var(--gold); }
.feature h3 { font-family: var(--serif); font-weight: 500; margin: 9px 0 8px; font-size: 19px; line-height: 1.35; }
.feature p { margin: 0 0 8px; color: var(--dim); font-size: 13.5px; }
.eco-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin: 14px 0; }

.hbar-row { display: grid; grid-template-columns: 190px 1fr 56px; gap: 8px; align-items: center; margin: 4px 0; font-size: 12.5px; }
.hbar-row .bar { height: 3px; border-radius: 0; background: linear-gradient(90deg, var(--gold-dim), var(--gold)); min-width: 2px; box-shadow: 0 0 10px rgba(201, 164, 76, .35); }
.hbar-row .bar.pos { background: linear-gradient(90deg, #4c8362, var(--pos)); box-shadow: 0 0 10px rgba(127, 199, 154, .3); }
.hbar-row .bar.neg { background: linear-gradient(90deg, #8c4a42, var(--neg)); box-shadow: 0 0 10px rgba(217, 138, 128, .3); }
.hbar-row .v { color: var(--dim); text-align: right; }
.hbar-row a { color: var(--ink); font-size: 12.5px; }

.venue-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; margin: 14px 0; }
.venue-card { display: grid; grid-template-columns: 96px 1fr; gap: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 2px; padding: 12px; align-items: start; transition: border-color .3s; }
.venue-card:hover { border-color: var(--goldline); }
.venue-card img { width: 96px; height: 96px; object-fit: cover; border-radius: 2px; border: 1px solid var(--line); }
.venue-card .cap { color: var(--gold); font-weight: 700; font-size: 15px; }
.venue-card .nm { font-weight: 600; margin-bottom: 2px; }
.venue-card .sig { font-size: 12.5px; color: var(--dim); margin-top: 4px; }

.navgroup { position: relative; display: inline-block; }
.navgroup > a::after { content: " ▾"; font-size: 9px; color: var(--faint); }
.navgroup .sub { display: none; position: absolute; left: 0; top: 100%; background: var(--panel); border: 1px solid var(--goldline); border-radius: 0; padding: 6px 0; min-width: 170px; z-index: 50; box-shadow: 0 18px 40px rgba(0, 0, 0, .5); }
.navgroup:hover .sub, .navgroup:focus-within .sub { display: block; }
.navgroup .sub a { display: block; padding: 6px 14px; border-bottom: none !important; }
.subnav { display: flex; gap: 8px; margin: 14px 0 4px; }
@media (max-width: 760px) {
  .cols2.front { display: flex; flex-direction: column; }
  .cols2.front > div:first-child { order: 2; }
}
a.brand { color: var(--champ); }
a.brand:hover { text-decoration: none; color: var(--champ); }

/* ---- evidence overlay: click a score, see the posts behind it */
button.senti, .hbar-row button.v { background: none; border: 0; font: inherit; font-weight: 700; padding: 0; }
.hbar-row button.v { color: var(--dim); text-align: right; }
.evb { cursor: pointer; }
button.senti.evb, .hbar-row button.v.evb { text-decoration: underline dotted; text-underline-offset: 3px; }
button.senti.evb:hover, .hbar-row button.v.evb:hover { text-decoration-style: solid; }
.trend .col.evb:hover .net { text-decoration: underline dotted; text-underline-offset: 3px; }
.evstore { display: none; }
.evmodal { position: fixed; inset: 0; z-index: 60; }
.evmodal-back { position: absolute; inset: 0; background: rgba(4, 4, 7, .8); }
.evmodal-panel { position: relative; margin: 6vh auto; width: min(680px, calc(100vw - 32px)); max-height: 84vh; overflow-y: auto; background: var(--panel); border: 1px solid var(--goldline); border-radius: 2px; padding: 18px 22px 12px; box-shadow: 0 30px 80px rgba(0, 0, 0, .6); }
.evmodal-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.evmodal-head h3 { margin: 0 0 2px; font-family: var(--serif); font-weight: 500; font-size: 18px; color: var(--champ); }
.evmodal-close { background: none; border: 1px solid var(--line); color: var(--dim); border-radius: 2px; cursor: pointer; font: inherit; font-size: 13px; padding: 1px 8px; }
.evmodal-close:hover { color: var(--champ); border-color: var(--gold); }
.evmodal-sub { color: var(--dim); font-size: 13px; margin: 2px 0 10px; }
.evmodal-list h4 { margin: 16px 0 2px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .14em; color: var(--faint); }
.evrow { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--line); }
.evrow .badge { flex: none; margin: 3px 0 0; }
.evrow .evbody a { font-weight: 600; }
.evrow .evbody .snip { font-size: 13px; color: var(--dim); margin: 3px 0; }
.evrow .evbody .snip mark { background: none; font-weight: 700; }
.evrow .evbody .snip mark.p { color: var(--pos); }
.evrow .evbody .snip mark.n { color: var(--neg); }
.evrow .evbody .meta { font-size: 11.5px; color: var(--faint); }
body.evlock { overflow: hidden; }

/* ---- intel claim lists: alternating rows */
ul.intel { list-style: none; margin: 0; padding: 0; }
ul.intel li { padding: 10px 13px; border-radius: 0; }
ul.intel li:nth-child(odd) { background: var(--panel2); }
ul.intel li small { color: var(--faint); display: block; margin-top: 3px; }
ul.intel li .badge { margin-left: 0; margin-right: 6px; }

/* ---- sortable table headers */
th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
th.sortable::after { content: "↕"; margin-left: 5px; font-size: 10px; opacity: .35; }
th.sortable[aria-sort="ascending"]::after { content: "↑"; opacity: 1; color: var(--gold); }
th.sortable[aria-sort="descending"]::after { content: "↓"; opacity: 1; color: var(--gold); }

/* ---- explore: the drawn city */
.explore { position: relative; height: calc(100vh - 150px); min-height: 540px; margin: 0 -20px; }
.explore canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.explore-hud { position: absolute; top: 10px; left: 20px; right: 20px; z-index: 3; display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; pointer-events: none; }
.explore-title { max-width: 520px; }
.explore-title h1 { margin: 4px 0 4px; }
.explore-title .dek { margin-bottom: 0; font-size: 13px; }
.explore-circles { display: flex; gap: 12px; pointer-events: auto; }
.explore-circle { width: 84px; height: 84px; border-radius: 50%; border: 1px solid var(--gold-dim); background: var(--panel); color: var(--gold); font: 600 12px/1.2 inherit; cursor: pointer; transition: transform .15s, border-color .15s, box-shadow .2s; }
.explore-circle:hover { transform: scale(1.07); border-color: var(--gold); box-shadow: 0 0 24px rgba(201, 164, 76, .25); }
.explore-legend { position: absolute; left: 20px; bottom: 10px; display: flex; gap: 14px; color: var(--faint); font-size: 12px; pointer-events: none; z-index: 3; }
.explore-legend i.lg { display: inline-block; width: 10px; height: 10px; border-radius: 2px; border: 1px solid; margin-right: 5px; vertical-align: -1px; background: none; }
.lg-pos { border-color: var(--pos); } .lg-neu { border-color: var(--neu); } .lg-neg { border-color: var(--neg); }
.lg-chip { border-color: var(--pos); border-radius: 50%; height: 5px !important; box-shadow: 0 3px 0 -1px var(--pos); }
.explore-panel { position: absolute; top: 0; right: 0; bottom: 0; width: 46%; min-width: 380px; max-width: 720px; z-index: 4; background: var(--panel); border-left: 1px solid var(--goldline); overflow-y: auto; padding: 14px 22px 30px; box-shadow: -18px 0 40px rgba(4, 4, 7, .6); }
.explore-panel-bar { position: sticky; top: -14px; margin: -14px -22px 10px; padding: 12px 22px; background: var(--panel); border-bottom: 1px solid var(--line); z-index: 2; }
#explore-back { background: none; border: 1px solid var(--line); color: var(--gold); border-radius: 2px; padding: 5px 12px; cursor: pointer; font: inherit; font-size: 13px; }
#explore-back:hover { border-color: var(--gold); }
.explore-panel h1 { font-size: 22px; margin: 8px 0 4px; }
.explore-panel details { border-top: 1px solid var(--line); padding: 4px 0; }
.explore-panel summary { cursor: pointer; color: var(--gold); font-weight: 600; font-size: 15px; padding: 8px 0; list-style-position: outside; }
.explore-panel summary:hover { color: var(--champ); }
@media (max-width: 860px) {
  .explore-hud { flex-direction: column; }
  .explore-circles { align-self: flex-end; }
  .explore-circle { width: 64px; height: 64px; font-size: 11px; }
  .explore-panel { width: 100%; min-width: 0; max-width: none; }
}
.explore-legend .lg-hint { color: var(--gold-dim); border-left: 1px solid var(--line); padding-left: 14px; }

/* photo pane: building photo on the left while the panel holds the right */
.explore-photo { position: absolute; top: 0; left: 0; bottom: 0; width: 54%; z-index: 4; background: var(--panel); border-right: 1px solid var(--goldline); display: flex; flex-direction: column; }
.explore-photo[hidden] { display: none; }
.explore-photo img { flex: 1; width: 100%; min-height: 0; object-fit: cover; display: block; background: var(--bg); }
.explore-photo img[hidden] { display: none; }
.explore-photo-meta { padding: 12px 22px 14px; border-top: 1px solid var(--goldline); }
.explore-photo-meta h2 { margin: 0 0 4px; font-size: 20px; }
.explore-photo-meta h2::after { display: none; }
.explore-photo-meta .stamp { margin: 0; }
@media (max-width: 860px) { .explore-photo { display: none; } }

/* the hamburger: nav collapses behind it on narrow screens */
.navtoggle { display: inline-flex; align-items: center; gap: 9px; margin-left: auto; background: none; border: 1px solid var(--goldline); border-radius: 2px; color: var(--gold); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; font-weight: 500; padding: 7px 14px; cursor: pointer; transition: border-color .25s, color .25s; }
.navtoggle:hover { border-color: var(--gold); color: var(--champ); }
.navtoggle .burger { font-size: 13px; letter-spacing: 0; }
@media (max-width: 720px) {
  nav.main.open { flex-direction: column; align-items: center; gap: 13px; }
  nav.main.open a { font-size: 14px; }
  header.site .tagline { display: none; }
}

/* stat-tile numbers that open the evidence overlay */
.tile .n .tilebtn { background: none; border: none; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; border-bottom: 2px dotted var(--gold-dim); }
.tile .n .tilebtn:hover { border-bottom-color: var(--gold); }

/* ---- feature charts (pipeline/feature-charts.mjs): line, scatter, dots, heatmap.
   Colors are tokens. The site is dark; the light set below applies under
   data-theme="light" (the draft preview's light page). The series slots passed the
   dataviz palette checks (lightness band, chroma floor, colorblind and normal-vision
   separation, 3:1 contrast) on #08080b and on #f7f4ec, as neighbors, and slots 1 to 3
   as all pairs, which the scatter needs. The heat-cell ink thresholds (HEAT_INK in
   feature-charts.mjs) were measured on these ramps: change a ramp, re-measure them. */
:root {
  --vc-surface: var(--bg); --vc-grid: #1c1924; --vc-axis: #3a3445; --vc-event: #6f6880;
  --vc-s1: #b3903c; --vc-s2: #5891c6; --vc-s3: #b14f6a; --vc-s4: #917ec8;
  --vc-seq-lo: #29200d; --vc-seq-hi: #eec96c;
  --vc-div-neg: #eb8376; --vc-div-mid: #252329; --vc-div-pos: #64c897;
  --vc-on-lo: var(--ink); --vc-on-hi: #14110a;
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f7f4ec; --panel: #fffdf8; --panel2: #efe9dc; --line: #e0d8c8; --goldline: rgba(122, 95, 18, .28);
  --ink: #1d1a21; --dim: #4f4857; --faint: #6b6472;
  --gold: #7a5f12; --gold-dim: #a88f4f; --champ: #5a4612;
  --pos: #2b7a4b; --neg: #a8453a; --neu: #59617a;
  --vc-grid: #e6dfd1; --vc-axis: #b9ad97; --vc-event: #8a8294;
  --vc-s1: #816512; --vc-s2: #3371c1; --vc-s3: #ac5d7e; --vc-s4: #5d498e;
  --vc-seq-lo: #f7f0de; --vc-seq-hi: #745600;
  --vc-div-neg: #a8372e; --vc-div-mid: #e8e4dd; --vc-div-pos: #0b764d;
  --vc-on-lo: var(--ink); --vc-on-hi: #ffffff;
}
:root[data-theme="light"] header.site { background: var(--panel); }

.vc { container: vc / inline-size; max-width: 760px; margin: 22px 0 30px; overflow-x: clip; }
.vc .vc-title { margin: 0 0 10px; font-size: 15px; color: var(--ink); }
.vc .s1 { --c: var(--vc-s1); } .vc .s2 { --c: var(--vc-s2); } .vc .s3 { --c: var(--vc-s3); } .vc .s4 { --c: var(--vc-s4); }
.vc-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12px; color: var(--dim); margin: 0 0 8px; }
.vc-legend span { display: inline-flex; align-items: center; gap: 6px; }
.vc-key { display: inline-block; flex: none; background: var(--c); }
.vc-key.line { width: 14px; height: 2px; border-radius: 1px; margin-right: 5px; }
.vc-key.dot { width: 9px; height: 9px; border-radius: 50%; }
.vc-axlabel { font-size: 11.5px; color: var(--dim); margin: 0 0 8px; }
.vc-axlabel.x { text-align: center; margin: 2px 0 0; }
.vc-frame { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 8px; font-size: 11px; color: var(--dim); font-variant-numeric: tabular-nums; }
.vc-yticks, .vc-ends { position: relative; }
.vc-yticks span { position: absolute; right: 0; transform: translateY(-50%); white-space: nowrap; line-height: 1; }
.vc-ends span { position: absolute; left: 0; transform: translateY(-50%); white-space: nowrap; line-height: 1; color: var(--ink); display: inline-flex; align-items: center; }
.vc-plot { position: relative; aspect-ratio: 640 / 260; }
.vc-scatter .vc-plot { aspect-ratio: 640 / 400; }
.vc-frame.has-ev { padding-top: 22px; }
.vc-plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; display: block; }
.vc-over { position: absolute; inset: 0; pointer-events: none; }
.vc-xticks { position: relative; height: 1.9em; }
.vc-xticks span { position: absolute; top: 6px; transform: translateX(-50%); white-space: nowrap; line-height: 1; }
.vc-xticks span.a0 { transform: none; }
.vc-xticks span.a1 { transform: translateX(-100%); }
svg .vc-grid { stroke: var(--vc-grid); stroke-width: 1; }
svg .vc-base, svg .vc-quad { stroke: var(--vc-axis); stroke-width: 1; }
svg .vc-event { stroke: var(--vc-event); stroke-width: 1; }
svg .vc-line { fill: none; stroke: var(--c); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
svg .vc-dot { fill: none; stroke: var(--c); stroke-linecap: round; }
svg .vc-ring { fill: none; stroke: var(--vc-surface); stroke-linecap: round; }
svg .vc-hit { fill: none; stroke: transparent; stroke-linecap: round; }
svg .vc-hit:hover { stroke: color-mix(in srgb, var(--ink) 14%, transparent); }
.vc-evm { position: absolute; top: 0; transform: translate(-50%, calc(-100% - 4px)); min-width: 15px; padding: 0 3px; border: 1px solid var(--vc-event); border-radius: 8px; background: var(--vc-surface); color: var(--ink); font-size: 10px; line-height: 14px; text-align: center; pointer-events: auto; }
.vc-events { list-style: none; padding: 0; margin: 8px 0 0; font-size: 12.5px; color: var(--dim); }
.vc-events li { margin: 3px 0; }
.vc-events b { display: inline-block; min-width: 15px; margin-right: 6px; padding: 0 3px; border: 1px solid var(--vc-event); border-radius: 8px; color: var(--ink); font-size: 10px; font-weight: 400; line-height: 14px; text-align: center; }
.vc-pl { position: absolute; color: var(--ink); font-size: 11px; line-height: 15px; white-space: nowrap; }
.vc-pl.r { transform: translate(8px, -50%); }
.vc-pl.l { transform: translate(calc(-100% - 8px), -50%); }
.vc-pl.t { transform: translate(-50%, calc(-100% - 7px)); }
.vc-pl.b { transform: translate(-50%, 7px); }
.vc-q { position: absolute; max-width: 45%; color: var(--dim); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; line-height: 1.3; }
.vc-q.tl { left: 6px; top: 6px; }
.vc-q.tr { right: 6px; top: 6px; text-align: right; }
.vc-q.bl { left: 6px; bottom: 6px; }
.vc-q.br { right: 6px; bottom: 6px; text-align: right; }
.vc-dots { font-size: 12.5px; }
.vc-drow { display: grid; grid-template-columns: minmax(7em, 13em) minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 26px; }
.vc-dots.noval .vc-drow { grid-template-columns: minmax(7em, 13em) minmax(0, 1fr); }
.vc-dl { color: var(--ink); line-height: 1.3; overflow-wrap: anywhere; }
.vc-dl a { color: var(--ink); }
.vc-dtrack { position: relative; height: 26px; }
.vc-dtrack::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--vc-grid); }
.vc-dseg { position: absolute; top: 50%; height: 2px; margin-top: -1px; background: var(--vc-axis); }
i.vc-dot { position: absolute; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px var(--vc-surface); }
i.vc-dot::after { content: ''; position: absolute; inset: -7px; border-radius: 50%; }
.vc-dv { min-width: 3.5em; color: var(--dim); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.vc-daxis { min-height: 0; }
.vc-dots .vc-xticks { height: 1.7em; color: var(--dim); font-size: 11px; font-variant-numeric: tabular-nums; }
.vc-dots .vc-xticks span { top: 3px; }
.vc-heat { font-size: 11px; font-variant-numeric: tabular-nums; }
.vc-hrow { display: grid; grid-template-columns: minmax(6.5em, 11em) repeat(var(--cols), minmax(0, 1fr)); gap: 2px; margin-bottom: 2px; }
.vc-hhead span { padding: 0 0 3px; color: var(--dim); font-size: 10.5px; text-align: center; white-space: nowrap; }
.vc-hl { align-self: center; padding-right: 6px; color: var(--ink); font-size: 12px; line-height: 1.25; overflow-wrap: anywhere; }
.vc-hl a { color: var(--ink); }
.vc-hc { display: flex; align-items: center; justify-content: center; min-height: 26px; border-radius: 2px; color: var(--vc-on-lo); font-weight: 600; }
.vc-hc.ih { color: var(--vc-on-hi); }
:root[data-theme="light"] .vc-hc.ih { color: var(--vc-on-lo); }
:root[data-theme="light"] .vc-hc.il { color: var(--vc-on-hi); }
.vc-hc.blank { background: none; box-shadow: inset 0 0 0 1px var(--vc-grid); }
.vc-scale { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 10px 0 0; color: var(--dim); font-size: 11px; font-variant-numeric: tabular-nums; }
.vc-ramp { display: inline-block; width: 120px; height: 8px; border-radius: 2px; }
.vc-ramp.seq { background: linear-gradient(90deg, color-mix(in oklab, var(--vc-seq-hi) 12%, var(--vc-seq-lo)), var(--vc-seq-hi)); }
.vc-ramp.div { background: linear-gradient(90deg, var(--vc-div-neg), var(--vc-div-mid), var(--vc-div-pos)); }
.vc-blankkey { display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; }
.vc-blankkey .vc-hc { width: 14px; min-height: 14px; }
.vc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.vc-note { margin: 10px 0 0; color: var(--dim); font-size: 12px; }
.vc-data { margin: 8px 0 0; }
.vc-data summary { cursor: pointer; color: var(--gold); font-size: 12px; }
.vc-data table { margin: 8px 0 0; font-size: 12.5px; }
.vc-data th, .vc-data td { padding: 5px 6px; overflow-wrap: anywhere; }
.vc-data th { font-size: 11px; letter-spacing: .02em; text-transform: none; }
.vc-data .n { text-align: right; }
.vc-data td.n { font-variant-numeric: tabular-nums; white-space: nowrap; }
@container vc (max-width: 520px) {
  .vc-line .vc-plot { aspect-ratio: 4 / 3; }
  .vc-scatter .vc-plot { aspect-ratio: 1 / 1; }
  .vc .minor { visibility: hidden; }
  .vc .vc-pl.minor { display: none; }
  .vc-heat.many .vc-hc { font-size: 0; }
  .vc-drow { grid-template-columns: minmax(6em, 9em) minmax(0, 1fr) auto; gap: 8px; }
  .vc-dots.noval .vc-drow { grid-template-columns: minmax(6em, 9em) minmax(0, 1fr); }
}

/* ---- a feature's lead photograph (leadFigure in pipeline/feature-charts.mjs). The img carries
   its width, height and aspect ratio, so the box is reserved before the file loads and the panel
   token fills it meanwhile. The figure is as wide as the chart column (760px) and spans the
   .wrap gutters on a phone. Tokens only, so the light set above applies as it does to the charts. */
figure.lead { max-width: 760px; margin: 6px 0 28px; }
figure.lead img { display: block; width: 100%; height: auto; object-fit: cover; background: var(--panel); border: 1px solid var(--line); border-radius: 2px; }
figure.lead figcaption { margin: 9px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--dim); }
figure.lead .lead-caption { display: block; margin: 0 0 3px; }
figure.lead .lead-credit { display: block; font-size: 11.5px; overflow-wrap: anywhere; }   /* --dim: --faint is under 4.5:1 on the dark ground */

/* the draft preview (pipeline/preview-feature.mjs) */
.preview-note { border-left-color: var(--neg); }
.preview-note ul { margin: 6px 0 0; padding-left: 18px; }