/* Town Brokers client shell. Lifted whole from the page the client picked, so
   every page is the same instrument rather than five cousins. */

:root{
  --ink:#eaf0f9;
  --ink2:#a2b0c6;
  --ink3:#6f7f99;
  --bg0:#0b0e15;
  --bg1:#111725;
  --glass:rgba(16,21,33,.62);
  --glass2:rgba(16,21,33,.78);
  --line:rgba(255,255,255,.10);
  --line2:rgba(255,255,255,.05);
  --accent:#E9C98A;
  --accentSoft:rgba(233,201,138,.22);
  --d1:#5FD35F; --d2:#E8A33D; --d3:#7C7CF0; --d4:#E0525C;
  --pad:clamp(16px,4vw,44px);
}
:root.acc0{--accent:#E9C98A;--accentSoft:rgba(233,201,138,.22)}
:root.acc1{--accent:#5FD35F;--accentSoft:rgba(95,211,95,.22)}
:root.acc2{--accent:#E8A33D;--accentSoft:rgba(232,163,61,.22)}
:root.acc3{--accent:#7C7CF0;--accentSoft:rgba(124,124,240,.24)}
:root.acc4{--accent:#E0525C;--accentSoft:rgba(224,82,92,.22)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{max-width:100%;overflow-x:hidden}
body{
  margin:0;background:var(--bg0);color:var(--ink);
  font:400 15.5px/1.62 'Archivo',sans-serif;
  letter-spacing:.005em;
  text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%}
h1,h2,h3,.dsp{font-family:'Saira',sans-serif;font-weight:600;letter-spacing:-.005em;margin:0}
h1{font-size:clamp(30px,5.1vw,58px);line-height:1.02;font-weight:800;letter-spacing:-.02em}
h2{font-size:clamp(24px,3.4vw,40px);line-height:1.06;font-weight:700;letter-spacing:-.015em}
h3{font-size:clamp(17px,2vw,20px);line-height:1.2}
p{margin:0 0 1em}
a{color:inherit}
.num{font-family:'Saira',sans-serif;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
:where(a,button,input,summary,[tabindex]):focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}
.skip{position:absolute;left:12px;top:-60px;z-index:99;background:var(--accent);color:#0b0e15;padding:10px 16px;font-weight:600;border-radius:4px;transition:top .18s}
.skip:focus{top:12px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* the city under everything */
#cityBg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:var(--bg0)}
#cityBg img{position:absolute;inset:-8%;width:116%;height:116%;object-fit:cover;
  filter:blur(26px) saturate(1.2) brightness(.58);transition:opacity 1.1s ease}
#bgB{opacity:0}
#cityBg.swap #bgA{opacity:0}
#cityBg.swap #bgB{opacity:1}
.tint{position:absolute;inset:0;
  background:
    radial-gradient(72% 58% at 20% 12%,var(--accentSoft),transparent 62%),
    radial-gradient(90% 70% at 84% 88%,rgba(11,14,21,.75),transparent 70%),
    linear-gradient(180deg,rgba(9,11,17,.60),rgba(9,11,17,.80));
  transition:background 1.1s ease}
.mesh{position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:radial-gradient(120% 78% at 50% 0%,#000,transparent 72%);
  mask-image:radial-gradient(120% 78% at 50% 0%,#000,transparent 72%)}
#shell{position:relative;z-index:1}

/* head up display */
.hud{position:sticky;top:0;z-index:40;
  background:linear-gradient(180deg,rgba(8,10,16,.94),rgba(8,10,16,.74));
  -webkit-backdrop-filter:blur(20px) saturate(1.35);backdrop-filter:blur(20px) saturate(1.35);
  border-bottom:1px solid var(--line)}
.hudRow{display:flex;align-items:center;gap:clamp(10px,2vw,26px);padding:9px var(--pad)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex:0 0 auto}
.brandMark{width:30px;height:30px;border-radius:50%;object-fit:cover;
  box-shadow:0 0 0 1px var(--line),0 0 18px var(--accentSoft);transition:box-shadow .4s}
.brandName{font-family:'Saira',sans-serif;font-weight:700;font-size:15.5px;letter-spacing:.005em;white-space:nowrap}
.brandTick{font-size:11px;color:var(--accent);border:1px solid var(--line);border-radius:3px;padding:2px 6px;letter-spacing:.09em;transition:color .4s}
.clock{display:flex;flex-direction:column;gap:2px;min-width:132px;flex:0 0 auto}
.clockTop{display:flex;align-items:baseline;gap:8px}
.clockLab{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink3)}
.clockVal{font-family:'Saira',sans-serif;font-variant-numeric:tabular-nums;font-weight:600;font-size:19px;line-height:1;letter-spacing:.01em}
.clockNext{font-size:10.5px;color:var(--ink3);letter-spacing:.02em}
.clockBar{display:block;height:2px;background:rgba(255,255,255,.09);border-radius:2px;overflow:hidden}
.clockBar i{display:block;height:100%;width:0;background:var(--accent);transition:width .9s linear,background .4s}
.meters{display:flex;gap:10px;margin-left:auto;flex:0 1 auto;min-width:0;
  overflow:hidden;scrollbar-width:none}
.meters::-webkit-scrollbar{display:none}
/* .meter and its parts are defined once, further down, as a pill. The column
   version that used to sit here was overridden by it and only survived as a
   half applied second opinion. */
.connect{margin-left:auto;flex:0 0 auto;font:600 12.5px/1 'Archivo',sans-serif;letter-spacing:.05em;
  color:var(--ink);background:rgba(255,255,255,.05);border:1px solid var(--line);
  padding:11px 15px;border-radius:4px;cursor:pointer;display:flex;align-items:center;gap:8px;transition:border-color .25s,background .25s}
.connect:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.2)}
.dot{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent);transition:background .4s}
.meters+.connect{margin-left:0}
.notice{padding:0 var(--pad);max-height:0;overflow:hidden;transition:max-height .3s ease;background:rgba(233,201,138,.06);border-top:1px solid var(--line2)}
.notice.on{max-height:90px}
.notice p{margin:0;padding:11px 0;font-size:13px;color:var(--ink2)}
.nav{display:flex;gap:2px;padding:0 var(--pad) 0;border-top:1px solid var(--line2);overflow-x:auto;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav a{flex:0 0 auto;text-decoration:none;font-size:12.5px;letter-spacing:.02em;color:var(--ink3);
  padding:11px 14px;border-bottom:2px solid transparent;transition:color .2s,border-color .2s,background .2s}
.nav a:hover{color:var(--ink);background:rgba(255,255,255,.03)}
.nav a.on{color:var(--ink);border-bottom-color:var(--accent)}

/* sections */
section{scroll-margin-top:118px;position:relative}
.wrap{padding:clamp(52px,7vw,104px) var(--pad)}
.ground{background:linear-gradient(180deg,rgba(9,12,19,.55),rgba(9,12,19,.86))}
.ground2{background:linear-gradient(180deg,rgba(9,12,19,.86),rgba(9,12,19,.62))}
.lede{font-size:clamp(15.5px,1.55vw,18px);color:var(--ink2);max-width:60ch;line-height:1.6}
.kicker{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin:0 0 14px;transition:color .4s}
.rule{height:1px;background:var(--line);border:0;margin:0}

/* the client */
.client{display:grid;grid-template-columns:214px minmax(0,1fr) 328px;gap:14px;padding:14px var(--pad) clamp(30px,5vw,58px);align-items:start}
.panel{background:var(--glass);border:1px solid var(--line);border-radius:6px;
  -webkit-backdrop-filter:blur(16px) saturate(1.25);backdrop-filter:blur(16px) saturate(1.25);
  box-shadow:0 24px 60px rgba(0,0,0,.44)}
.pHead{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 14px;border-bottom:1px solid var(--line2)}
.pTitle{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink3)}
.pCount{font-family:'Saira',sans-serif;font-size:11px;color:var(--ink3);font-variant-numeric:tabular-nums}

.rail{position:sticky;top:126px}
.railList{padding:6px}
.dBtn{width:100%;display:grid;grid-template-columns:3px 1fr;gap:11px;align-items:stretch;
  background:transparent;border:0;border-radius:4px;padding:0;cursor:pointer;text-align:left;margin-bottom:2px;
  color:var(--ink2);transition:background .2s,color .2s}
.dBtn:hover{background:rgba(255,255,255,.05);color:var(--ink)}
.dBtn .swatch{border-radius:3px;background:currentColor;opacity:.55;transition:opacity .2s}
.dBtn.on{background:rgba(255,255,255,.08)}
.dBtn.on .swatch{opacity:1}
.dBody{padding:9px 8px 10px 0}
.dName{font-family:'Saira',sans-serif;font-weight:500;font-size:14.5px;line-height:1.15;color:var(--ink);display:block}
.dMeta{display:flex;gap:7px;align-items:baseline;font-size:11px;color:var(--ink3);margin-top:3px;letter-spacing:.03em}
.dMeta b{font-family:'Saira',sans-serif;font-weight:500;color:var(--ink2);font-size:11.5px}
.railFoot{padding:10px 14px 13px;border-top:1px solid var(--line2);font-size:11.5px;color:var(--ink3);line-height:1.5}

.stage{display:flex;flex-direction:column;gap:14px;min-width:0}
.stageHead{padding:clamp(18px,3vw,34px) clamp(16px,2.4vw,30px) clamp(20px,3vw,32px)}
.stageHead h1{max-width:16ch}
.stageHead .lede{margin:16px 0 0}
.tagRow{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.tag{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink2);
  border:1px solid var(--line);border-radius:3px;padding:5px 9px;background:rgba(255,255,255,.03)}
.tag.hot{color:var(--accent);border-color:var(--accentSoft);transition:color .4s,border-color .4s}

.viewport{position:relative;overflow:hidden;border-radius:6px;border:1px solid var(--line);
  height:clamp(300px,44vh,480px);background:#0a0d14;box-shadow:0 30px 70px rgba(0,0,0,.5)}
.vpBack{position:absolute;inset:-10%;width:120%;height:120%;object-fit:cover;filter:blur(24px) brightness(.5) saturate(1.1)}
.vpMain{position:absolute;inset:0;margin:auto;height:100%;width:auto;aspect-ratio:1/1;object-fit:cover;
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 62%,transparent 97%);
  mask-image:radial-gradient(circle at 50% 50%,#000 62%,transparent 97%)}
.vpGlow{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(46% 34% at 50% 74%,var(--accentSoft),transparent 66%);transition:background .5s}
.vpTop{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:flex-start;gap:10px;
  padding:13px 15px;background:linear-gradient(180deg,rgba(6,8,13,.72),transparent)}
.vpBot{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:space-between;align-items:flex-end;gap:12px;
  padding:15px;background:linear-gradient(0deg,rgba(6,8,13,.82),transparent)}
.vpId{font-family:'Saira',sans-serif;font-size:12px;letter-spacing:.14em;color:var(--ink2);font-variant-numeric:tabular-nums}
.vpTier{font-family:'Saira',sans-serif;font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);transition:color .4s}
.vpName{font-family:'Saira',sans-serif;font-weight:600;font-size:clamp(19px,2.6vw,27px);line-height:1.05}
.vpSub{font-size:12px;color:var(--ink2);margin-top:3px;letter-spacing:.03em}
.vpFloors{text-align:right;flex:0 0 auto}
.vpFloors b{font-family:'Saira',sans-serif;font-weight:600;font-size:clamp(24px,3.4vw,34px);line-height:1;display:block}
.vpFloors span{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3)}

.stripWrap{padding:10px}
.strip{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin;scroll-snap-type:x proximity}
.strip::-webkit-scrollbar{height:6px}
.strip::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border-radius:6px}
.tileBtn{flex:0 0 auto;width:112px;padding:0;border:1px solid var(--line2);background:rgba(255,255,255,.02);
  border-radius:5px;overflow:hidden;cursor:pointer;color:var(--ink2);text-align:left;scroll-snap-align:start;
  transition:border-color .2s,transform .2s,background .2s}
.tileBtn img{width:100%;aspect-ratio:1/1;object-fit:cover;opacity:.76;transition:opacity .25s}
.tileBtn:hover{border-color:rgba(255,255,255,.28);transform:translateY(-2px)}
.tileBtn:hover img{opacity:1}
.tileBtn.on{border-color:var(--accent);background:rgba(255,255,255,.07);color:var(--ink)}
.tileBtn.on img{opacity:1}
.tCap{display:flex;justify-content:space-between;gap:6px;padding:6px 8px 7px;font-size:10px;letter-spacing:.06em}
.tCap b{font-family:'Saira',sans-serif;font-weight:500;text-transform:uppercase}
.tCap span{font-family:'Saira',sans-serif;font-variant-numeric:tabular-nums;color:var(--ink3)}

.inspector{position:sticky;top:126px}
.insImg{position:relative;background:#0a0d14;border-bottom:1px solid var(--line2)}
.insImg img{width:100%;aspect-ratio:1/1;object-fit:cover}
.insBadge{position:absolute;left:12px;bottom:12px;font-family:'Saira',sans-serif;font-weight:600;font-size:11px;
  letter-spacing:.15em;text-transform:uppercase;background:rgba(6,8,13,.78);border:1px solid var(--line);
  padding:5px 9px;border-radius:3px;color:var(--accent);transition:color .4s}
.insBody{padding:14px}
.insName{font-family:'Saira',sans-serif;font-weight:600;font-size:21px;line-height:1.1}
.insWhere{font-size:12px;color:var(--ink2);margin:4px 0 14px;letter-spacing:.03em}
.insWhere i{font-style:normal;color:var(--accent);transition:color .4s}
.kv{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-top:1px solid var(--line2);font-size:12.5px}
.kv dt{color:var(--ink3);margin:0}
.kv dd{margin:0;font-family:'Saira',sans-serif;font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums;text-align:right}
.insEarn{margin-top:14px;padding:13px;border-radius:5px;background:rgba(255,255,255,.045);border:1px solid var(--line2)}
.insEarn .lab{font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink3)}
.insEarn .big{font-family:'Saira',sans-serif;font-weight:600;font-size:26px;line-height:1.1;margin-top:5px;font-variant-numeric:tabular-nums}
.insEarn .sub{font-size:11.5px;color:var(--ink2);margin-top:3px}
.insNote{font-size:11px;color:var(--ink3);margin-top:10px;line-height:1.5}
.insNote a{color:var(--ink2)}

/* the split band */
.splitTop{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,4vw,60px);align-items:end;padding:0 var(--pad) clamp(26px,4vw,46px)}
.band{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;background:var(--line2)}
.bandCell{position:relative;padding:0;border:0;background:#0a0d14;cursor:pointer;overflow:hidden;
  height:clamp(230px,46vh,430px);text-align:left;color:var(--ink);display:block;width:100%}
.bandCell img{width:100%;height:100%;object-fit:cover;opacity:.86;transition:opacity .4s,transform .8s cubic-bezier(.2,.7,.3,1)}
.bandCell:hover img{opacity:1;transform:scale(1.05)}
.bandCell.on img{opacity:1}
.bandShade{position:absolute;inset:0;background:linear-gradient(0deg,rgba(6,8,13,.9) 6%,rgba(6,8,13,.16) 52%,transparent)}
.bandInfo{position:absolute;left:0;right:0;bottom:0;padding:16px 15px 17px}
.bandBar{height:3px;border-radius:3px;width:34px;margin-bottom:11px;transition:width .4s}
.bandCell.on .bandBar{width:100%}
.bandName{font-family:'Saira',sans-serif;font-weight:600;font-size:clamp(15px,1.7vw,20px);line-height:1.1}
.bandStock{font-family:'Saira',sans-serif;font-size:11.5px;letter-spacing:.16em;color:var(--ink2);margin-top:4px}
.bandQ{font-family:'Saira',sans-serif;font-weight:600;font-size:12px;margin-top:10px;padding-top:9px;border-top:1px solid rgba(255,255,255,.14);color:var(--ink2);display:flex;justify-content:space-between;gap:8px}
.bandNote{padding:16px var(--pad) 0;font-size:12px;color:var(--ink3)}

/* rent engine */
.rentGrid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:14px;margin-top:clamp(24px,3.5vw,40px);align-items:start}
.slot{padding:15px}
.sRow{padding:13px 0;border-top:1px solid var(--line2)}
.sRow:first-child{border-top:0;padding-top:4px}
.sTop{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:9px}
.sName{display:flex;align-items:center;gap:8px;font-family:'Saira',sans-serif;font-weight:500;font-size:14.5px}
.sChip{width:9px;height:9px;border-radius:2px;flex:0 0 auto}
.sVal{font-family:'Saira',sans-serif;font-weight:600;font-size:14.5px;font-variant-numeric:tabular-nums;color:var(--ink)}
.sVal em{font-style:normal;font-size:11px;color:var(--ink3);letter-spacing:.1em;text-transform:uppercase;margin-left:5px}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:22px;background:transparent;cursor:pointer;margin:0;display:block}
input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:4px;background:rgba(255,255,255,.12)}
input[type=range]::-moz-range-track{height:4px;border-radius:4px;background:rgba(255,255,255,.12)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;margin-top:-7px;border-radius:50%;
  background:var(--ink);border:4px solid #8894aa;box-shadow:0 3px 10px rgba(0,0,0,.55)}
input[type=range]::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--ink);border:4px solid #8894aa;box-shadow:0 3px 10px rgba(0,0,0,.55)}
#sl0::-webkit-slider-thumb{border-color:#5FD35F}
#sl0::-moz-range-thumb{border-color:#5FD35F}
#sl1::-webkit-slider-thumb{border-color:#E8A33D}
#sl1::-moz-range-thumb{border-color:#E8A33D}
#sl2::-webkit-slider-thumb{border-color:#7C7CF0}
#sl2::-moz-range-thumb{border-color:#7C7CF0}
#sl3::-webkit-slider-thumb{border-color:#E0525C}
#sl3::-moz-range-thumb{border-color:#E0525C}
.sFoot{display:flex;justify-content:space-between;gap:10px;font-size:11px;color:var(--ink3);margin-top:5px}
.sFoot b{font-family:'Saira',sans-serif;font-weight:500;color:var(--ink2);font-variant-numeric:tabular-nums}
.bars{padding:15px}
.barRow{display:grid;grid-template-columns:96px minmax(0,1fr) 78px;gap:11px;align-items:center;padding:9px 0}
.barName{font-size:12px;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.barTrack{height:12px;background:rgba(255,255,255,.06);border-radius:3px;overflow:hidden}
.barFill{height:100%;width:0;border-radius:3px;transition:width .35s cubic-bezier(.3,.8,.3,1);opacity:.9}
.barVal{font-family:'Saira',sans-serif;font-weight:600;font-size:13.5px;text-align:right;font-variant-numeric:tabular-nums}
.best{margin-top:14px;padding:13px;border-radius:5px;background:rgba(255,255,255,.045);border:1px solid var(--line2);font-size:13px;color:var(--ink2)}
.best b{color:var(--ink);font-family:'Saira',sans-serif;font-weight:600}
.warn{margin-top:14px;font-size:11.5px;color:var(--ink3);line-height:1.55;max-width:64ch}

/* tiers */
.tierWrap{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(18px,3vw,34px);margin-top:clamp(24px,3.5vw,40px);align-items:start}
.tableScroll{overflow-x:auto;border:1px solid var(--line);border-radius:6px;background:var(--glass);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
table{border-collapse:collapse;width:100%;min-width:660px;font-size:13.5px}
th,td{text-align:right;padding:11px 14px;border-top:1px solid var(--line2);white-space:nowrap}
th{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);font-weight:500;border-top:0;padding-top:13px;padding-bottom:11px}
th:first-child,td:first-child{text-align:left}
td{font-family:'Saira',sans-serif;font-weight:500;font-variant-numeric:tabular-nums;color:var(--ink2)}
td:first-child{color:var(--ink)}
tbody tr:hover{background:rgba(255,255,255,.035)}
.tName{display:flex;align-items:center;gap:11px}
.tName img{width:46px;height:46px;border-radius:4px;object-fit:cover;flex:0 0 auto;border:1px solid var(--line2)}
.tName b{font-family:'Saira',sans-serif;font-weight:600;font-size:14.5px;display:block}
.tName span{font-size:11px;color:var(--ink3);letter-spacing:.04em;display:block;margin-top:1px}
.tierSide{display:flex;flex-direction:column;gap:14px}
.tierSide img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:6px;border:1px solid var(--line)}
.sideNote{font-size:13px;color:var(--ink2);line-height:1.6}
.sideNote b{color:var(--ink)}

/* mint */
.mint{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);align-items:stretch;gap:2px;background:var(--line2)}
.mintArt{position:relative;min-height:clamp(320px,58vh,560px);overflow:hidden;background:#0a0d14}
.mintArt img{width:100%;height:100%;object-fit:cover}
.mintArt .bandShade{background:linear-gradient(90deg,transparent 40%,rgba(9,12,19,.55))}
.mintPanel{padding:clamp(24px,4vw,50px);background:rgba(9,12,19,.72);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);display:flex;flex-direction:column;justify-content:center}
.statusRow{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-top:1px solid var(--line2);font-size:13.5px}
.statusRow dt{color:var(--ink3);margin:0}
.statusRow dd{margin:0;font-family:'Saira',sans-serif;font-weight:500;text-align:right}
.statusRow dd.off{color:var(--ink3)}
.xlink{display:inline-flex;align-items:center;gap:9px;margin-top:22px;text-decoration:none;
  font:600 13px/1 'Archivo',sans-serif;letter-spacing:.04em;color:#0b0e15;background:var(--accent);
  padding:13px 18px;border-radius:4px;transition:background .3s,transform .2s;align-self:flex-start}
.xlink:hover{transform:translateY(-1px)}
.skyline{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:1px;background:var(--line2)}
.skyline img{width:100%;aspect-ratio:1/1;object-fit:cover;opacity:.5;transition:opacity .4s}
.skyline img:hover{opacity:.95}

/* faq */
.faqGrid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(20px,4vw,54px);align-items:start}
details{border-top:1px solid var(--line);background:transparent}
details:last-of-type{border-bottom:1px solid var(--line)}
summary{list-style:none;cursor:pointer;padding:17px 0;display:flex;justify-content:space-between;gap:18px;align-items:center;
  font-family:'Saira',sans-serif;font-weight:500;font-size:clamp(15px,1.7vw,17.5px);line-height:1.3}
summary::-webkit-details-marker{display:none}
summary svg{flex:0 0 auto;transition:transform .3s;color:var(--ink3)}
details[open] summary svg{transform:rotate(180deg);color:var(--accent)}
details p{color:var(--ink2);font-size:14px;max-width:62ch;padding-bottom:17px;margin:0}
.faqArt{position:sticky;top:126px}
.faqArt img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:6px;border:1px solid var(--line);box-shadow:0 30px 70px rgba(0,0,0,.5)}
.faqArt p{font-size:11.5px;color:var(--ink3);margin:12px 0 0;line-height:1.55}

footer{padding:clamp(34px,5vw,60px) var(--pad);border-top:1px solid var(--line);background:rgba(7,9,14,.86);
  display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;align-items:flex-end}
footer p{font-size:12px;color:var(--ink3);max-width:56ch;margin:0}
footer a{color:var(--ink2)}
.fBrand{font-family:'Saira',sans-serif;font-weight:700;font-size:18px}

@media (max-width:1180px){
  .client{grid-template-columns:196px minmax(0,1fr)}
  .inspector{grid-column:1 / -1;position:static}
  .insLayout{display:grid;grid-template-columns:260px minmax(0,1fr)}
  .insImg{border-bottom:0;border-right:1px solid var(--line2)}
  .rentGrid,.tierWrap,.faqGrid,.splitTop{grid-template-columns:minmax(0,1fr)}
  .tierSide{flex-direction:row;align-items:flex-start}
  .tierSide img{max-width:260px}
  .faqArt{position:static;max-width:420px}
}
/* The four district readings used to be deleted below 1080px, which is most of the
   people who ever see this page. They are the one thing in the bar that says the city
   is doing something, so instead of removing them the row is allowed to wrap and they
   take a line of their own, scrolling sideways if four will not fit. */
@media (max-width:1080px){
  .hudRow{flex-wrap:wrap;row-gap:8px}
  .meters{order:9;flex:1 0 100%;margin-left:0;justify-content:flex-start;
    overflow-x:auto;padding-bottom:2px;-webkit-overflow-scrolling:touch}
  .meters+.connect{margin-left:auto;order:5}
  .clock{order:2}
}
@media (max-width:520px){
  .meters{gap:8px}
  .meter{padding:5px 10px}
}
@media (max-width:900px){
  .client{grid-template-columns:minmax(0,1fr);padding-top:12px}
  .rail{position:static;grid-column:1 / -1}
  .railList{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px}
  .band{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mint{grid-template-columns:minmax(0,1fr)}
  .mintArt{min-height:300px}
  .skyline{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:640px){
  .hudRow{flex-wrap:wrap;gap:10px}
  .clock{order:3;width:100%;flex-direction:row;align-items:center;gap:10px;flex-wrap:wrap}
  .clockBar{flex:1 1 100px;min-width:80px}
  .connect{margin-left:auto}
  .insLayout{grid-template-columns:minmax(0,1fr)}
  .insImg{border-right:0;border-bottom:1px solid var(--line2)}
  .tierSide{flex-direction:column}
  .brandTick{display:none}
}
@media (max-width:430px){
  .railList{grid-template-columns:minmax(0,1fr)}
  .band{grid-template-columns:minmax(0,1fr)}
  .barRow{grid-template-columns:74px minmax(0,1fr) 66px;gap:8px}
  .tileBtn{width:98px}
  .skyline{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:700px){
  #cityBg img{filter:blur(16px) saturate(1.15) brightness(.55)}
  .vpBack{filter:blur(16px) brightness(.5)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* ------------------------------------------------------------------ added for
   the multi page shell: a footer, and a button, neither of which the single page
   version needed. Everything else above is untouched. */

.foot{
  display:flex;flex-wrap:wrap;align-items:center;gap:12px;
  padding:22px var(--pad) 34px;
  font-size:12.5px;color:var(--ink3);
  border-top:1px solid var(--line);margin-top:clamp(28px,5vw,64px);
}
.foot .sep{color:var(--line);}
.foot .footX{margin-left:auto;color:var(--ink2);text-decoration:none;}
.foot .footX:hover{color:var(--accent);}
@media(max-width:560px){ .foot .footX{margin-left:0;} }

.btn{
  display:inline-flex;align-items:center;gap:8px;
  font:600 13px/1 var(--fUi,"Archivo",Verdana,sans-serif);
  padding:11px 16px;border-radius:10px;text-decoration:none;cursor:pointer;
  color:var(--ink);background:var(--glass);border:1px solid var(--line);
  transition:border-color .18s,background .18s,color .18s;
}
.btn:hover{border-color:var(--accent);background:var(--glass2);}
.btn.on{background:var(--accent);border-color:var(--accent);color:#141017;font-weight:700;}
.btn.on:hover{filter:brightness(1.06);}
.btnRow{display:flex;flex-wrap:wrap;gap:10px;}

/* an honest empty state, used wherever live data does not exist yet */
.empty{
  border:1px dashed var(--line);border-radius:12px;background:var(--glass);
  padding:clamp(22px,4vw,44px);text-align:center;color:var(--ink2);
}
.empty b{display:block;color:var(--ink);font-size:18px;margin-bottom:7px;
  font-family:var(--fDisp,"Saira",sans-serif);font-weight:600;}

/* ------------------------------------------------------------------ the district
   rail items. The single page version built these inline, so they are written out
   here once for every page that carries a rail. */

.railItem{
  display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;
  gap:1px 10px;width:100%;text-align:left;cursor:pointer;
  padding:11px 12px;border-radius:10px;
  background:transparent;border:1px solid transparent;
  color:var(--ink2);transition:background .16s,border-color .16s,color .16s;
}
.railItem:hover{background:var(--glass);border-color:var(--line);color:var(--ink);}
.railItem.on{background:var(--accentSoft);border-color:var(--accent);color:var(--ink);}
.railItem .rTick{
  grid-row:1 / span 2;align-self:center;
  font-family:'Saira',sans-serif;font-weight:800;font-size:17px;letter-spacing:-.01em;
  color:var(--accent);min-width:52px;
}
.railItem.on .rTick{color:var(--accent);}
.railItem .rName{font-size:13.5px;font-weight:600;line-height:1.25;}
.railItem .rPlots{font-size:11.5px;color:var(--ink3);line-height:1.2;}
.railList{display:flex;flex-direction:column;gap:4px;padding:8px;}

/* ------------------------------------------------- the four district lamps

   Two rules used to claim .meter. The earlier one laid it out as a column with a
   track underneath, the later one as a pill, and the later one won while the markup
   still carried the track. So a three pixel bar with no width sat inside a fully
   rounded pill, contributing nothing but a gap that made the pill look badly packed.

   One rule now, and every corner inside the pill follows the pill. The track is given
   a real width so it reads as a measure rather than as leftover space, and the fill
   inherits the same radius so it can never square off a rounded end. */

.meter{display:inline-flex;align-items:center;padding:6px 12px;border-radius:99px;
  border:1px solid var(--line);background:var(--glass);line-height:1;flex:0 0 auto;}
.meterTop{display:inline-flex;align-items:center;gap:7px;font-size:10px;
  letter-spacing:.09em;color:var(--ink3);white-space:nowrap;}
.meterTop b{font-family:'Saira',sans-serif;font-weight:600;font-size:11px;color:var(--ink2);
  letter-spacing:.02em;font-variant-numeric:tabular-nums;}
@media(max-width:900px){ .meter{padding:5px 9px} .meterTop{gap:5px} }

/* ------------------------------------------------------------------ the two
   numbers that matter in the top bar: what is waiting to be paid this round, and
   what has been paid since the first one. Both read zero until a round has run,
   and they say so rather than pretending. */

.hudStat{
  display:flex;flex-direction:column;gap:2px;min-width:104px;
  padding:0 14px;border-left:1px solid var(--line);
}
.hudStat .hudLab{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink3);white-space:nowrap;}
.hudStat .hudVal{font-family:'Saira',sans-serif;font-weight:600;font-size:17px;
  letter-spacing:-.01em;color:var(--ink);white-space:nowrap;}
.hudStat .hudVal.zero{color:var(--ink2);}
.hudStat .hudFoot{font-size:10px;color:var(--ink3);white-space:nowrap;}
@media(max-width:1100px){ .hudStat{min-width:0;padding:0 10px} .hudStat .hudFoot{display:none} }
@media(max-width:860px){ .hudStat{display:none} }

/* on a phone the same two numbers move under the bar rather than vanishing */
.hudStrip{display:none;}
@media(max-width:860px){
  .hudStrip{display:flex;gap:0;border-top:1px solid var(--line);}
  .hudStrip .hudStat{display:flex;flex:1;border-left:0;padding:9px 14px;}
  .hudStrip .hudStat + .hudStat{border-left:1px solid var(--line);}
}