/* the live globe (src/world.js) and the shared compact masthead */
.bmast .wrap{display:flex;align-items:baseline;justify-content:space-between;gap:10px 28px;flex-wrap:wrap}
.snav{display:flex;gap:6px;flex-wrap:wrap;font-family:var(--display);font-weight:700;font-size:var(--s2)}
.snav a{color:var(--ink);text-decoration:none;border:1.5px solid var(--ink);border-radius:999px;padding:4px 13px 2px;background:var(--card)}
.snav a:hover,.snav a[aria-current="page"]{background:var(--ink);color:var(--paper)}
.ghead{padding-block:10px 10px}
.ghead h1{font-size:clamp(26px,3.3vw,42px);font-weight:900;line-height:1.04;letter-spacing:-.02em;margin-top:6px}
.ghead .lede{font-size:clamp(17px,1.4vw,19px);line-height:1.45;color:var(--ink-2);max-width:100ch;margin-top:6px;min-height:2.9em}
#gViews{display:flex;gap:6px;flex-wrap:wrap;margin:4px 0 14px;font-family:var(--display);font-weight:700;font-size:var(--s1)}
#gViews a{color:var(--ink-2);text-decoration:none;border:1px solid var(--hair);border-radius:999px;padding:5px 12px 3px;background:var(--card)}
#gViews a:hover{border-color:var(--ink)}
#gViews a[aria-current="page"]{background:var(--sign);border-color:var(--sign);color:#fff}
.gmain{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px;align-items:start}
.globe{position:relative;aspect-ratio:4/3;max-height:min(80vh,780px);width:100%;border:1px solid var(--hair);border-radius:10px;overflow:hidden;touch-action:pan-y;cursor:grab;
  background:radial-gradient(circle at 50% 45%,#FFFFFF 0%,#EEF3F5 62%,#E2EAEE 100%)}
.globe:active{cursor:grabbing}
.globe canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
#gTip{position:absolute;pointer-events:none;background:rgba(255,255,255,.96);border:1px solid var(--hair);border-radius:6px;padding:7px 10px 5px;font-family:var(--display);font-size:var(--s1);line-height:1.35;box-shadow:0 2px 10px rgba(15,34,54,.14);width:max-content;max-width:230px;z-index:3}
#gTip b{font-size:var(--s2)} #gTip .ll{color:var(--ink-3);font-family:var(--mono);font-size:12px}
.gclock{position:absolute;left:12px;top:12px;background:rgba(255,255,255,.93);border:1px solid var(--hair);border-radius:6px;padding:7px 11px 5px;font-family:var(--display);line-height:1.25;z-index:2}
.gclock #gValid{display:block;font-weight:800;font-size:var(--s3)}
.gclock #gLead{font-family:var(--mono);font-size:var(--s1);color:var(--ink-2);margin-right:8px}
.gclock #gRun{font-size:var(--s1);color:var(--ink-3)}
#gLegend{position:absolute;left:12px;bottom:12px;background:rgba(255,255,255,.93);border:1px solid var(--hair);border-radius:6px;padding:7px 11px 6px;font-family:var(--display);font-size:var(--s1);z-index:2}
#gLegend .u{color:var(--ink-3);margin-left:6px}
#gLegend .bar{display:flex;margin-top:5px}
#gLegend .bar span{display:block;width:38px;height:10px;position:relative;margin-bottom:15px}
#gLegend .bar span i{position:absolute;left:0;top:12px;font-style:normal;font-family:var(--mono);font-size:11px;color:var(--ink-2)}
.gzoom{position:absolute;right:12px;top:12px;display:grid;gap:4px;z-index:2}
.gzoom button{width:34px;height:34px;border:1px solid var(--hair);border-radius:6px;background:rgba(255,255,255,.95);font:800 18px/1 var(--display);color:var(--ink);cursor:pointer}
.gzoom button:hover{border-color:var(--ink)}
#gStatus{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--card);border:1px solid var(--hair);border-radius:6px;padding:10px 14px;font-family:var(--display);z-index:4}
.gtime{display:flex;align-items:center;gap:12px;margin-top:12px}
.gtime button{font:800 var(--s2)/1 var(--display);background:var(--ink);color:var(--paper);border:0;border-radius:999px;padding:11px 20px 9px;cursor:pointer;min-width:84px}
.gtime input{flex:1;accent-color:var(--ink);min-width:0;height:28px}
.gctl{display:flex;gap:10px 22px;flex-wrap:wrap;margin-top:12px;font-family:var(--display)}
.gctl .grp-l{display:block;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:3px}
.gseg{display:inline-flex;flex-wrap:wrap;border:1.5px solid var(--ink);border-radius:8px;overflow:hidden;background:var(--card)}
.gseg button{font:700 var(--s1)/1 var(--display);border:0;background:none;color:var(--ink);padding:9px 12px 7px;cursor:pointer;border-right:1px solid var(--hair)}
.gseg button:last-child{border-right:0}
.gseg button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.gseg button:disabled{color:#9AA8B4;cursor:not-allowed}
.gboard{background:var(--card);border:1px solid var(--hair);border-radius:10px;padding:16px 16px 12px}
.gboard h2{font-size:var(--s4);font-weight:800;letter-spacing:0}
.gboard h3{font-size:var(--s1);font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);margin-top:16px;border-top:1px solid var(--hair-2);padding-top:12px}
.gboard ol,.gboard ul{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:4px}
.gboard li button{display:grid;grid-template-columns:12px 1fr auto;gap:1px 9px;align-items:center;width:100%;text-align:left;background:none;border:1px solid transparent;border-radius:7px;padding:7px 8px 5px;cursor:pointer;font-family:var(--display);color:var(--ink)}
.gboard li button:hover{background:var(--paper)}
.gboard li button[aria-pressed="true"]{border-color:var(--ink);background:var(--paper)}
.gboard .sw{width:12px;height:12px;border-radius:3px}
.gboard .nm{font-weight:750;font-size:var(--s2)}
.gboard .pk{font-weight:700;font-size:var(--s2)}
.gboard .ds{grid-column:2 / 4;font-size:var(--s1);color:var(--ink-3);line-height:1.3}
.gboard .fine{font-family:var(--display);font-size:12px;color:var(--ink-3);margin-top:12px;line-height:1.4}
.gsec{margin-top:44px}
.gsec h2{font-size:clamp(24px,2.6vw,32px)}
.gsec .note{font-family:var(--display);font-size:var(--s1);color:var(--ink-3);margin:6px 0 10px;max-width:90ch}
#gTimeline{width:100%;display:block;background:var(--card);border:1px solid var(--hair);border-radius:10px}
#gTimeline text{font-family:var(--display);font-size:12.5px;fill:var(--ink)}
#gTimeline .tk{fill:var(--ink-3);font-size:11.5px}
#gTimeline .pk{font-family:var(--mono);font-size:11.5px;fill:var(--ink-2)}
#gTimeline .trk{cursor:pointer}
#gTimeline .trk:hover rect:first-child,#gTimeline .trk.on rect:first-child{fill:#EEF3F5}
#gTimeline .trk.on .nm{font-weight:800}
#gTimeline .now{stroke:var(--ink);stroke-width:1.5}
.gcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:14px}
.gcards a{display:block;background:var(--card);border:1px solid var(--hair);border-radius:10px;padding:18px 18px 16px;text-decoration:none;color:var(--ink)}
.gcards a:hover{border-color:var(--ink)}
.gcards b{font-family:var(--display);font-size:var(--s4);font-weight:800;display:block}
.gcards span{font-size:var(--s2);color:var(--ink-2);line-height:1.45;display:block;margin-top:4px}
@media (max-width:1020px){.gmain{grid-template-columns:1fr}.gcards{grid-template-columns:1fr}}
@media (max-width:720px){#gViews{flex-wrap:nowrap;overflow-x:auto;margin-inline:calc(-1 * var(--gut));padding-inline:var(--gut);scrollbar-width:none}#gViews a{white-space:nowrap}.globe{aspect-ratio:1/1}.gclock #gValid{font-size:var(--s2)}#gLegend .bar span{width:30px}.gzoom{top:auto;bottom:12px}}

/* climatology and archive (src/climo.js) */
#climo{position:relative}
#cTip{position:absolute;pointer-events:none;background:rgba(255,255,255,.97);border:1px solid var(--hair);border-radius:6px;padding:8px 10px 6px;font-family:var(--display);font-size:var(--s1);line-height:1.4;box-shadow:0 2px 10px rgba(15,34,54,.14);z-index:5;width:max-content;max-width:230px}
#cTip i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:6px}
#cTiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:14px 0 6px}
#cTiles .tile{background:var(--card);border:1px solid var(--hair);border-left:5px solid var(--ink);border-radius:8px;padding:12px 14px 10px;font-family:var(--display)}
#cTiles .k{display:block;font-size:11px;font-weight:800;letter-spacing:.11em;color:var(--ink-3)}
#cTiles b{display:block;font-size:clamp(26px,3vw,36px);font-weight:850;line-height:1.1;font-variant-numeric:tabular-nums}
#cTiles .s{font-size:var(--s1);color:var(--ink-2)}
.cchart{background:var(--card);border:1px solid var(--hair);border-radius:10px;padding:14px 14px 10px}
.cchart svg{width:100%;display:block}
.cchart text{font-family:var(--display);font-size:12px;fill:var(--ink)}
.cchart .tk{fill:var(--ink-3);font-size:11.5px}
.ckey{display:flex;gap:6px 16px;flex-wrap:wrap;font-family:var(--display);font-size:var(--s1);color:var(--ink-2);margin:8px 0 10px;align-items:center}
.ckey i{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.ckey .ramp{display:inline-block;width:150px;height:10px;border-radius:2px;margin:0 6px;vertical-align:-1px}
.ctwo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:16px;align-items:start}
#cHours{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 16px}
#cHours .mini b{display:block;font-family:var(--display);font-size:var(--s2)}
#cHours .mini span{font-family:var(--display);font-size:var(--s1);color:var(--ink-3)}
details.ctable{font-family:var(--display);font-size:var(--s1);margin-top:8px}
details.ctable table{border-collapse:collapse;margin-top:6px}
details.ctable td,details.ctable th{padding:2px 10px;text-align:right;border-bottom:1px solid var(--hair-2);font-variant-numeric:tabular-nums}
#cNow{font-family:var(--display);font-size:var(--s2);color:var(--ink-2);margin:6px 0 10px;max-width:100ch;min-height:1.6em}
#cEvents{width:100%;border-collapse:collapse;font-family:var(--display);font-size:var(--s2);background:var(--card)}
#cEvents th{text-align:left;font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);padding:9px 10px 7px;border-bottom:2px solid var(--ink);white-space:nowrap}
#cEvents th[data-sort]{cursor:pointer}
#cEvents th[aria-sort="descending"]{color:var(--ink)}
#cEvents th[aria-sort="descending"]::after{content:" ▾"}
#cEvents td{padding:7px 10px 5px;border-bottom:1px solid var(--hair-2);white-space:nowrap}
#cEvents .rk{display:inline-block;color:#fff;font-weight:800;border-radius:4px;padding:2px 7px 0;min-width:40px;text-align:center}
#cEvents .rn{color:var(--ink-2)}
#cEvents .vw,#cMore{font:700 var(--s1)/1 var(--display);border:1.5px solid var(--ink);background:var(--card);color:var(--ink);border-radius:999px;padding:6px 12px 4px;cursor:pointer}
#cEvents .vw:hover,#cMore:hover{background:var(--ink);color:var(--paper)}
.cscroll{overflow-x:auto;border:1px solid var(--hair);border-radius:10px}
@media (max-width:900px){#cTiles{grid-template-columns:repeat(2,minmax(0,1fr))}.ctwo{grid-template-columns:1fr}#cHours{grid-template-columns:1fr}}