/* Browns area guide. Lives inside the property page's Area sheet (#locrating-popup).
   Five colours only: ink, paper and the three warm neutrals; tints are those colours at reduced opacity. */
.ba{--ink:#181818;--paper:#f0ece8;--stone:#b4a298;--clay:#aa968c;--earth:#79665e;
 --serif:'BlackerProDisplayRegular','Blacker Pro Display','Blacker Pro',Georgia,'Times New Roman',serif;
 --serif-md:'BlackerProDisplayMedium','Blacker Pro Display','Blacker Pro',Georgia,serif;
 --sans:-apple-system,BlinkMacSystemFont,'Inter',system-ui,'Helvetica Neue',Arial,sans-serif;
 position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:52px minmax(0,1fr);background:var(--paper);color:var(--ink);
 font:300 14px/1.5 var(--sans);-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums;text-align:left;letter-spacing:normal}
.ba *,.ba *::before,.ba *::after{box-sizing:border-box}
/* The sheet stays put under a thumb: only the list scrolls (up and down), only the sections slide (side to side), and the map pans itself. */
.ba{overflow:hidden;overscroll-behavior:none}
.ba-top{touch-action:pan-x}
.ba-mapwrap{touch-action:none}
.ba-panel{touch-action:pan-y}
/* Type follows the site: capitals labels in SF Light 12.6px at 0.03em in #181818, text in SF Light 14px, small print 10.5px;
   links answer a hover with #b4a298, as across brownsresidential.com. */
/* Blacker set as the theme sets it: the site's own Regular cut, proportional figures, the font's kerning. */
.ba h2,.ba h3,.ba-row .num,.ba-row .mi,.ba-dhead .d,.ba-three .v,.ba-leg .info .m,.ba-gauge .n,.ba-tier .v,.ba-race .t span:last-child,.ba-dial .r span{font-weight:400!important;font-variant-numeric:proportional-nums lining-nums;font-kerning:normal;letter-spacing:normal}
.ba button{font:inherit;color:inherit;cursor:pointer;background:none;border:0;padding:0;margin:0;text-align:left;text-transform:none;letter-spacing:inherit;box-shadow:none;border-radius:0;min-height:0;line-height:inherit}
.ba a{color:inherit}
.ba :focus-visible{outline:1px solid var(--ink);outline-offset:3px}
/* Optical centring: labels in capitals and figures are trimmed to their cap height, so each sits dead centre in its box
   rather than riding high on the space a font keeps for descenders. Boxes keep their size where trimming isn't supported. */
.ba-tab>span,.ba-sv>span,.ba-where .ba-eb,.ba-chip>span,.ba-more>span,.ba-jgo>span,.ba-back>span,.ba-pager .nm,.ba-tip,.ba-maptag em,.ba-key em,.ba-stop>span,.ba-disc>span,.ba-badge{text-box:trim-both cap alphabetic}
.ba-maptag em,.ba-key em{font-style:normal}

/* The theme's Area sheet pads its top by 60px and its foot by 20px, which sat the guide 40px low. With the guide on,
   the sheet is evened out so the guide always sits dead centre, across and down, at every size. Only this sheet is touched. */
#locrating-popup:not(.hidden){display:flex!important;align-items:center!important;justify-content:center!important;padding:0!important}
#locrating-popup:not(.hidden)>div{margin:0 auto!important}

/* masthead: Area hard left as the heading; the sections and Street View together on the right, flush with the edges.
   No close mark of its own: the page's sheet has one. On a phone its X overlaps this bar, so the bar keeps clear of it. */
.ba-top{display:grid;grid-template-columns:auto minmax(0,1fr) auto;column-gap:28px;align-items:stretch;border-bottom:1px solid var(--stone);padding:0}
.ba-where{display:flex;align-items:center;gap:14px;min-width:0}
/* Area set like the sections, in ink: the A on the sheet's left edge, Street View's arrow on its right. */
.ba-where .ba-eb{white-space:nowrap;color:var(--ink);font-size:12.6px;letter-spacing:.03em}
.ba-tabs{display:flex;gap:32px;align-items:stretch;justify-content:flex-end;touch-action:pan-x;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:none}
.ba-sv{display:flex;align-items:center;gap:6px;font-size:12.6px!important;letter-spacing:.03em!important;text-transform:uppercase!important;color:var(--ink);text-decoration:none;white-space:nowrap;transition:color .2s}
.ba-sv:hover{color:var(--stone)}
.ba-sv svg{width:9px;height:9px}
.ba-tabs .ba-sv-m{display:none}
.ba-tabs::-webkit-scrollbar{display:none}
.ba-tab{display:flex;align-items:center;gap:6px;font-size:12.6px!important;letter-spacing:.03em!important;text-transform:uppercase!important;color:var(--ink);text-decoration:none;border-bottom:1px solid transparent;margin-bottom:-1px;white-space:nowrap;transition:color .2s,border-color .2s}
.ba-tab:hover{color:var(--stone)}
.ba-tab[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--ink)}
.ba-tab svg{width:9px;height:9px}

.ba-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,400px);min-height:0}
.ba-mapwrap{position:relative;min-height:0;overflow:hidden;background:var(--paper)}
.ba .ba-map{position:absolute;inset:0}
.ba-map .maplibregl-canvas{outline:none}
.ba .maplibregl-ctrl-attrib{background:rgba(240,236,232,.9)!important;font-size:10px;color:var(--earth)!important}
.ba .maplibregl-ctrl-attrib a{color:var(--earth)!important}
.ba .maplibregl-ctrl-attrib-button{background-color:rgba(240,236,232,.9)!important;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%23181818' fill-rule='evenodd' viewBox='0 0 20 20'%3E%3Cpath d='M4 10a6 6 0 1 0 12 0 6 6 0 1 0-12 0m5-3a1 1 0 1 0 2 0 1 1 0 1 0-2 0m0 3a1 1 0 1 1 2 0v3a1 1 0 1 1-2 0'/%3E%3C/svg%3E")!important}
.ba-zoom{position:absolute;right:14px;bottom:28px;z-index:3;display:flex;flex-direction:column;gap:1px}
.ba-zoom button{width:28px;height:28px;display:flex!important;align-items:center;justify-content:center;font:300 15px/1 var(--sans)!important;text-align:center}
.ba-zoom button{background:var(--paper)!important}
.ba-zoom button:hover{background:var(--ink)!important;color:var(--paper)}
.ba-maptag{position:absolute;left:14px;top:14px;z-index:3;display:flex;gap:6px 14px;flex-wrap:wrap;max-width:calc(100% - 100px);padding:0}
.ba-maptag span{display:flex;align-items:center;gap:6px;font-size:10.5px;letter-spacing:.03em;text-transform:uppercase}
.ba-maptag:empty{display:none}
.ba-k.k-ink{background:var(--ink)}.ba-k.k-earth{background:var(--earth)}.ba-k.k-clay{background:var(--clay)}.ba-k.k-stone{background:var(--stone)}.ba-k.k-line{box-shadow:inset 0 0 0 1.5px var(--ink)}
.ba-k{width:9px;height:9px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);display:inline-block;flex:none}
.ba-mapnote{position:absolute;inset:auto 16px 16px 16px;z-index:3;background:var(--paper);border:1px solid var(--stone);padding:12px 14px;font-size:12px;color:var(--earth)}

/* pins: one pointer shape throughout */
.ba-mk{width:26px;height:31px;cursor:pointer}
.ba-pin{position:absolute;left:0;top:0;width:26px;height:26px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);display:flex;align-items:center;justify-content:center;transition:transform .2s ease;box-shadow:0 0 0 2px var(--paper)}
.ba-pin>span{transform:rotate(45deg);font:400 10px/1 var(--sans)}
.ba-pin.c-ink{background:var(--ink);color:var(--paper)}
.ba-pin.c-earth{background:var(--earth);color:var(--paper)}
.ba-pin.c-clay{background:var(--clay);color:var(--paper)}
.ba-pin.c-stone{background:var(--stone);color:var(--ink)}
.ba-pin.c-line{background:var(--paper);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink),0 0 0 2px var(--paper)}
.ba-pin svg{transform:rotate(45deg)}
.ba-mk.hot .ba-pin{transform:rotate(-45deg) scale(1.3)}
.ba-mk.hot{z-index:5}
.ba-mk.dim{opacity:.28}
.ba-far .ba-mk.st{display:none}
.ba-mk.st .ba-tip{opacity:1}
.ba-mk.dest .ba-disc span::before{content:'';display:block;width:5px;height:5px;border-radius:50%;background:var(--paper)}
.ba-mk.dest .ba-tip{opacity:1}
.ba-mk.dest .ba-pin>span::before{content:'';display:block;width:6px;height:6px;border-radius:50%;background:var(--paper)}
.ba-mk.home{width:auto;height:auto;cursor:default;z-index:6}
/* The house is simply "B." in ink. */
.ba-mk.home .ba-pin{position:relative;width:auto;height:auto;background:none;box-shadow:none;border-radius:0;transform:none;color:var(--ink)}
.ba-mk.home .ba-pin>span{position:relative;display:block;transform:none;font:500 34px/1 var(--serif-md);font-kerning:normal;letter-spacing:0;text-box:trim-both cap alphabetic}
/* The B is centred in the pointer; its full stop hangs on the baseline beside it. */
.ba-mk.home .ba-pin>span i{position:absolute;left:100%;bottom:0;font-style:normal;text-box:trim-both cap alphabetic}
/* Schools and amenities: small round discs, numbered in SF Pro. */
.ba-mk.disc{width:16px;height:16px}
.ba-disc{position:absolute;inset:0;border-radius:50%;display:flex;align-items:center;justify-content:center;font:500 8px/1 -apple-system,BlinkMacSystemFont,'SF Pro Text','SF Pro',system-ui,'Helvetica Neue',Arial,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:-.02em;transition:transform .2s ease}
.ba-disc.c-ink{background:var(--ink);color:var(--paper)}
.ba-disc.c-earth{background:var(--earth);color:var(--paper)}
.ba-disc.c-clay{background:var(--clay);color:var(--ink)}
.ba-disc.c-stone{background:var(--stone);color:var(--ink)}
/* The same disc leads each row, so a row and its pin read as one. */
.ba-row .num .ba-disc{position:static;width:16px;height:16px;font-size:8px;font-style:normal;box-shadow:none}
.ba-row .num .ba-disc.ba-dot{width:6px;height:6px;margin:0 5px}
.ba-mk.disc.hot .ba-disc{transform:scale(1.3)}
/* While a name is showing, the other discs step back, so the name reads clean over them without any ground or shadow. */
.ba-mk.disc{transition:opacity .2s ease}
.ba-mapwrap:has(.ba-mk:hover,.ba-mk.hot) .ba-mk.disc:not(:hover):not(.hot){opacity:.22!important}
.ba-k.dot{border-radius:50%;transform:none}
/* Names on the map: text alone, no border, ground or shadow, in small capitals with a hairline down to their mark. */
.ba-tip{position:absolute;left:50%;bottom:calc(100% + 13px);transform:translateX(calc(-50% + var(--dx,0px)));white-space:nowrap;display:block;font-size:10.5px;font-weight:400;letter-spacing:.03em;text-transform:uppercase;color:var(--ink);pointer-events:none;opacity:0;transition:opacity .15s}
.ba-tip::after{content:'';position:absolute;left:calc(50% - var(--dx,0px));top:calc(100% + 3px);width:1px;height:8px;background:var(--earth)}
.ba-mk.disc.hot .ba-tip{bottom:calc(100% + 15px)}
.ba-mk:hover .ba-tip,.ba-mk.hot .ba-tip{opacity:1}
/* The address over the B., on the same hairline as the discs: the B. is trimmed to its cap height, so the gaps above and below
   the hairline match a disc's exactly. Shown on hover, or a tap on a phone. */
.ba-mk.home{z-index:7!important}
.ba-mk.home .ba-tip{bottom:calc(100% + 13px);transform:translateX(calc(-50% + 4px + var(--dx,0px)))}
.ba-mk.home .ba-tip::after{left:calc(50% - 4px - var(--dx,0px))}
.ba-pulse{width:0;height:0;position:relative;pointer-events:none}
.ba-pulse i{position:absolute;left:0;top:0;border:1px solid var(--earth);border-radius:50%;transform:translate(-50%,-50%);animation:ba-ring 3.2s ease-out infinite;opacity:0}
.ba-pulse i:nth-child(2){animation-delay:1.06s}.ba-pulse i:nth-child(3){animation-delay:2.12s}
@keyframes ba-ring{0%{width:40px;height:40px;opacity:.7}100%{width:340px;height:340px;opacity:0}}

/* the answer */
.ba-panel{overflow-y:auto;min-height:0;scroll-behavior:smooth;overscroll-behavior:contain}
.ba-view{--pt:24px;padding:var(--pt) 28px 44px;animation:ba-in .28s ease both}
/* The heading and filters stay pinned at the top of the panel while the list scrolls beneath. */
.ba-head{position:sticky;top:0;z-index:4;background:var(--paper);margin-top:calc(-1 * var(--pt));padding-top:var(--pt)}
@keyframes ba-in{from{opacity:.001;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.ba-view{animation:none}.ba-pin{transition:none}.ba-pulse i{animation:none}.ba-panel{scroll-behavior:auto}}
.ba-eb{font-size:12.6px;letter-spacing:.03em;text-transform:uppercase;color:var(--ink)}
.ba h2,.ba h3{margin:0;font-family:var(--serif);font-weight:300;text-wrap:balance;color:var(--ink);letter-spacing:normal;text-transform:none}
.ba h2{font-size:28px;line-height:1.05}
.ba h3{font-size:20px;line-height:1.15}
.ba p{margin:0}
.ba-intro{display:flex;flex-direction:column;gap:10px;padding-bottom:16px}
.ba-intro p{color:var(--earth);max-width:36em}
.ba-note{font-size:10.5px;line-height:1.45;color:var(--ink);margin-top:16px!important;max-width:40em}
.ba-foot{margin-top:28px;font-size:8.5px;line-height:1.5;letter-spacing:.02em;color:var(--ink)}
.ba-chips{display:flex;flex-wrap:nowrap;gap:0 24px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:none}
.ba-chips::-webkit-scrollbar{display:none}
.ba .ba-chip{flex:none;white-space:nowrap;padding:0!important;height:34px;min-height:34px;border-bottom:1px solid transparent!important;margin-bottom:0!important;font-size:12.6px!important;letter-spacing:.03em!important;text-transform:uppercase!important;color:var(--ink);transition:color .2s,border-color .2s;display:inline-flex!important;align-items:center;gap:7px}
.ba-chip:hover{color:var(--stone)}
.ba-chip[aria-pressed="true"]{color:var(--ink);border-bottom-color:var(--ink)!important}
.ba-chip .ba-k{width:7px;height:7px}
.ba-chip small{font-size:9px;color:var(--earth);letter-spacing:.1em}
.ba-group{margin-top:24px}
.ba-head+.ba-group{margin-top:6px}
.ba-group>.ba-lbl{padding-bottom:4px;display:flex;justify-content:space-between;gap:12px;color:var(--earth)}
.ba-lbl{font-size:12.6px;letter-spacing:.03em;text-transform:uppercase}
.ba-row{display:grid!important;grid-template-columns:16px minmax(0,1fr) auto;gap:3px 12px;align-items:center;width:100%;padding:11px 0!important;border:0!important;transition:padding .2s}
button.ba-row:hover{padding-left:6px!important}
/* Division without the weight: a pale hairline between rows, starting where the names start, so the discs stand clear of it. */
.ba-row+.ba-row,.ba-row+.ba-more{background:linear-gradient(rgba(180,162,152,.55),rgba(180,162,152,.55)) no-repeat 28px 0/calc(100% - 28px) 1px!important}
.ba-row .num{font-family:var(--serif);font-size:14px;color:var(--earth);display:flex}
.ba-row .nm{display:flex;flex-direction:column;gap:3px;min-width:0}
.ba-row .nm b{font-weight:300;font-size:14px;line-height:1.3}
.ba-row .meta{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--earth);flex-wrap:wrap}
.ba-row .mi{font-family:var(--serif);font-size:16px;text-align:right;white-space:nowrap}
.ba-row .mi small{font-family:var(--sans);font-size:10.5px;letter-spacing:.03em;color:var(--earth);margin-left:3px}
.ba-row .mi em{display:block;font:300 10.5px var(--sans);color:var(--earth);font-style:normal;margin-top:2px}
.ba-strip{display:inline-flex;gap:2px}
.ba-strip i{width:7px;height:7px;display:block}
.ba .g5{background:var(--ink)}.ba .g4{background:var(--earth)}.ba .g3{background:var(--stone)}.ba .g2{box-shadow:inset 0 0 0 1px var(--earth)}.ba .g1{box-shadow:inset 0 0 0 1px var(--earth);background:repeating-linear-gradient(45deg,var(--earth) 0 1px,transparent 1px 3px)}
.ba-key{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:18px}
/* View more: a quiet row at the foot of a list */
.ba .ba-more{display:flex!important;justify-content:space-between;align-items:center;width:100%;min-height:40px;padding:0!important;border:0!important;font-size:12.6px!important;letter-spacing:.03em!important;text-transform:uppercase!important;color:var(--ink);transition:color .2s}
.ba-more span:last-child{color:var(--earth)}
.ba-more:hover{color:var(--stone)}
.ba-key span{display:flex;align-items:center;gap:7px;font-size:10.5px;letter-spacing:.03em;text-transform:uppercase}
.ba-key b{display:inline-block;width:22px;height:0}
.ba .ba-back{display:inline-flex!important;align-items:center;gap:8px;min-height:30px;font-size:12.6px!important;letter-spacing:.03em!important;text-transform:uppercase!important;color:var(--ink)}
.ba-back:hover{color:var(--stone)}
.ba-dhead{display:flex;justify-content:space-between;gap:16px;align-items:baseline;margin-top:6px}
.ba-dhead .d{font-family:var(--serif);font-size:20px;color:var(--earth);white-space:nowrap}
.ba-grade{display:grid;grid-template-columns:minmax(0,1fr) auto 60px;gap:12px;align-items:center;padding:8px 0;font-size:14px}
.ba-grade em{font-style:normal;font-size:12px;color:var(--earth);text-align:right}
.ba-scale{display:flex;gap:3px;justify-content:flex-end}
.ba-scale i{width:9px;height:9px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--stone)}
.ba-scale i.f{background:var(--ink);box-shadow:none}
.ba-facts{margin-top:24px}
.ba-fact{padding:13px 0;display:grid;grid-template-columns:110px minmax(0,1fr);gap:14px}
.ba-fact .ba-lbl{font-size:10.5px;color:var(--earth);padding-top:3px}
.ba-links{display:flex;flex-wrap:wrap;gap:10px 20px;margin-top:16px}
.ba-links a{font-size:12.6px;letter-spacing:.03em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid var(--stone);padding-bottom:3px;transition:color .2s}
.ba-links a:hover{color:var(--stone)}
.ba-pager{display:flex;justify-content:space-between;margin-top:18px;border-top:1px solid var(--stone)}
.ba-pager{gap:24px}
.ba-pager button{min-height:36px;max-width:calc(50% - 12px);display:flex;align-items:center;gap:8px;font-size:9.5px!important;letter-spacing:.2em!important;text-transform:uppercase!important;color:var(--earth)}
.ba-pager button:last-child{text-align:right;justify-content:flex-end}
.ba-pager .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.ba-pager button:hover{color:var(--ink)}

/* journeys */
.ba-jname{margin-top:20px!important}
.ba-three{margin-top:14px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.ba-three div{padding:8px 0 8px 16px;display:flex;flex-direction:column;gap:7px}
.ba-three div:first-child{padding-left:0}
.ba-three .v{font-family:var(--serif);font-size:24px;line-height:1;color:var(--earth)}
.ba-three .k{font-size:10.5px;letter-spacing:.03em;text-transform:uppercase}
.ba-route{margin-top:20px}
.ba-stop{display:flex;align-items:center;gap:16px;font-size:10.5px;letter-spacing:.03em;text-transform:uppercase;min-height:16px}
.ba-stop i{width:11px;height:11px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--ink);flex:none}
.ba-stop i.end{background:var(--ink)}
.ba-leg{display:flex;gap:21px}
.ba-leg .ln{width:11px;display:flex;justify-content:center;flex:none}
.ba-leg .info{display:flex;flex-direction:column;gap:5px}
.ba-leg .info .m{font-family:var(--serif);font-size:17px;line-height:1}
.ba-jform{display:flex;flex-direction:column;gap:8px}
.ba-head+.ba-jgroup{margin-top:2px}
.ba-jrow{display:flex;flex-wrap:nowrap;align-items:flex-end;gap:16px}
.ba-jrow input{flex:1;width:0;min-width:0;border:0!important;border-bottom:1px solid var(--ink)!important;border-radius:0!important;background:transparent!important;padding:0!important;height:38px;font:300 14px var(--sans)!important;color:var(--ink);outline:none;box-shadow:none!important;margin:0!important}
.ba-jrow input::placeholder{color:var(--earth);opacity:1}
.ba-jt{display:flex;flex:none}
.ba-jt select{-webkit-appearance:none;appearance:none;border:0!important;border-radius:0!important;background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath d='M.5.5 4 4 7.5.5' fill='none' stroke='%2379665e'/%3E%3C/svg%3E") no-repeat right 2px center!important;border-bottom:1px solid var(--ink)!important;height:38px;margin:0!important;padding:0 20px 0 0!important;box-shadow:none!important;font:300 14px var(--sans)!important;letter-spacing:normal;text-transform:none;color:var(--ink);cursor:pointer;outline:none;width:auto;min-width:0}
.ba-jt select:has(option[value=""]:checked){color:var(--earth)}
.ba-jgo{display:flex!important;align-items:center;justify-content:center;flex:none;height:38px;padding:0 18px!important;background:var(--earth)!important;color:var(--paper)!important;font-size:12.6px!important;letter-spacing:.03em!important;text-transform:uppercase!important;transition:background .2s;text-align:center!important}
.ba-jgo:hover{background:var(--ink)!important}
.ba-jgo[disabled]{opacity:.7;cursor:wait}
.ba-jstatus{margin:12px 0 0!important;padding:0;border:0;font-size:12px;color:var(--earth)}

/* connectivity */
.ba-gauge{position:relative;margin:6px auto 0;width:270px;max-width:100%}
.ba-gauge svg{display:block;width:100%;overflow:visible}
.ba-gauge .arc{transition:stroke-dashoffset 1.6s cubic-bezier(.2,.7,.1,1)}
.ba-gauge .n{position:absolute;left:0;right:0;top:36%;text-align:center;font:300 50px/1 var(--serif)}
.ba-gauge .u{position:absolute;left:0;right:0;top:79%;text-align:center;font-size:12px;color:var(--earth)}
.ba-badge{display:flex;align-items:center;justify-content:center;width:max-content;height:24px;margin:14px auto 0;padding:0 12px;border:1px solid var(--ink);font-size:10.5px;letter-spacing:.03em;text-transform:uppercase}
.ba-tier{display:grid;grid-template-columns:minmax(0,1fr) auto;padding:10px 0;align-items:baseline;gap:12px}
.ba-tier b{font-weight:400}.ba-tier small{display:block;font-size:12px;color:var(--earth);margin-top:2px}
.ba-tier .v{font:300 17px var(--serif);text-align:right;white-space:nowrap}
.ba-tier.top .v{font-size:20px}
.ba-tier.off{color:var(--earth)}
.ba-race{padding:10px 0}
.ba-race .t{display:flex;justify-content:space-between;gap:12px;font-size:12px}
.ba-race .t span:last-child{font-family:var(--serif);font-size:16px}
.ba-race i{display:block;height:3px;background:rgba(180,162,152,.35);margin-top:8px;position:relative;overflow:hidden}
.ba-race i b{position:absolute;left:0;top:0;bottom:0;width:100%;background:var(--ink);transform-origin:left;transform:scaleX(0)}
.ba-race.go i b{animation:ba-fill var(--d) linear forwards}
@keyframes ba-fill{to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){.ba-race.go i b{animation:none;transform:scaleX(var(--end,1))}}
.ba-dials{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:18px}
.ba-dial{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.ba-dial .r{width:64px;height:64px;border-radius:50%;background:conic-gradient(var(--ink) 0 calc(var(--p)*1%),rgba(180,162,152,.35) 0);display:flex;align-items:center;justify-content:center}
.ba-dial .r span{width:56px;height:56px;border-radius:50%;background:var(--paper);display:flex;align-items:center;justify-content:center;font:300 17px var(--serif)}
.ba-dial b{font-weight:300;font-size:10.5px;letter-spacing:.03em;text-transform:uppercase}
.ba-dial em{font-style:normal;font-size:10.5px;color:var(--earth);line-height:1.35}

/* waiting: a hairline drawn once, completed when the answer arrives */
.ba-wait{padding:24px 28px}
.ba-wait .line{height:1px;background:var(--stone);transform-origin:left;transform:scaleX(0);animation:ba-grow 4s cubic-bezier(.1,.7,.2,1) forwards;margin-top:18px}
@keyframes ba-grow{to{transform:scaleX(.9)}}

@media (max-width:1100px){.ba-body{grid-template-columns:minmax(0,1fr) 350px}.ba-view{--pt:22px;padding:var(--pt) 22px 40px}}
@media (max-width:860px){
 .ba{grid-template-rows:auto minmax(0,1fr)}
 .ba-top{grid-template-columns:minmax(0,1fr) 52px;column-gap:0;padding:0}
 .ba-where,.ba-sv{display:none}
 .ba-tabs .ba-sv-m{display:flex}
 .ba-tab{scroll-snap-align:start}
 .ba-tabs{gap:26px;justify-content:flex-start;padding:0 28px 0 16px;height:46px;scroll-snap-type:x proximity;scroll-padding-left:16px;-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent)}
 .ba-body{display:flex;flex-direction:column}
 .ba-mapwrap{flex:0 0 auto;height:44%;min-height:260px}
 .ba-panel{flex:1 1 auto}
 .ba-view{--pt:20px;padding:var(--pt) 16px 40px}
 .ba h2{font-size:26px}
 .ba-maptag{display:none}
 .ba-zoom{display:none}
 .ba-fact{grid-template-columns:1fr;gap:4px}
 .ba-gauge .n{font-size:46px}
 .ba-wait{padding:24px 16px}
}