/* --- the shell ----------------------------------------------------------
   One bar on a desktop. On a phone the sections move to a fixed row at the
   bottom, where a thumb already is, and the bar keeps only the wordmark,
   the live count and the two buttons. Measured on a 390x740 viewport: 44 px
   of bar, 62 px of tabs, 634 px left for the page. */
.skip{position:absolute;left:-9999px;top:0;background:var(--fire);
 color:#140d07;padding:10px 14px;z-index:99;border:0}
.skip:focus{left:8px;top:8px}
.bar{position:sticky;top:0;z-index:40;display:flex;align-items:center;
 gap:12px;padding:0 16px;height:52px;background:rgba(15,14,13,.94);
 backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.bar a{border:0}
.mark{font:700 13px/1 var(--f-data);letter-spacing:.22em;color:var(--ink);
 white-space:nowrap;flex:0 0 auto;display:inline-flex;align-items:center;
 gap:9px;padding:6px 0;margin:-6px 0}
/* The eye on its aurora, the same art as the app icon, so the header and
   the home-screen icon are one object. The wordmark alone carried the name
   and none of the look. */
.logo{width:28px;height:28px;border-radius:7px;display:block;flex:0 0 auto;
 box-shadow:0 0 0 1px rgba(255,255,255,.07)}
.mark s{text-decoration:none;color:var(--fire)}
.live{display:inline-flex;align-items:center;gap:6px;padding:4px 9px;
 border:1px solid var(--line);border-radius:999px;font:10.5px/1 var(--f-data);
 color:var(--dim);white-space:nowrap;font-variant-numeric:tabular-nums}
.live i{width:6px;height:6px;border-radius:50%;background:var(--fire);
 display:block;animation:blip 2.8s ease-in-out infinite}
@keyframes blip{0%,100%{opacity:1}50%{opacity:.25}}
.secs{display:flex;gap:3px;align-items:center;min-width:0}
.sec,.sbtn{display:inline-flex;align-items:center;gap:7px;padding:7px 11px;
 border-radius:999px;border:1px solid transparent;background:none;
 color:var(--dim);font:11px/1 var(--f-data);letter-spacing:.09em;
 text-transform:uppercase;white-space:nowrap;cursor:pointer;
 font-family:var(--f-data);transition:color .12s,border-color .12s}
.sec svg,.sbtn svg{width:14px;height:14px;stroke:currentColor;fill:none;
 stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.sec:hover,.sbtn:hover{color:var(--ink);border-color:var(--line)}
.sec[aria-current="page"]{color:var(--ink);border-color:var(--line);
 background:var(--pan,#171512)}
.spacer{flex:1 1 auto}
.acct{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;
 border-radius:999px;border:1px solid var(--fire);background:var(--fire);
 color:#140d07;font:500 11px/1 var(--f-data);letter-spacing:.1em;
 text-transform:uppercase;white-space:nowrap;cursor:pointer;flex:0 0 auto}
.acct.in{background:none;color:var(--fire)}
.acct svg{width:14px;height:14px;stroke:currentColor;fill:none;
 stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.iconbtn{width:34px;height:34px;display:none;place-items:center;
 border-radius:50%;border:1px solid var(--line);color:var(--dim);
 cursor:pointer;background:none;flex:0 0 auto}
.iconbtn svg{width:16px;height:16px;stroke:currentColor;fill:none;
 stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

.tabs{display:none;position:fixed;left:0;right:0;bottom:0;z-index:40;
 height:62px;background:rgba(15,14,13,.97);backdrop-filter:blur(8px);
 border-top:1px solid var(--line);
 grid-template-columns:repeat(4,1fr);align-items:center;
 padding-bottom:env(safe-area-inset-bottom,0)}
.tab{display:flex;flex-direction:column;align-items:center;gap:5px;
 color:var(--dim);font:9.5px/1 var(--f-data);letter-spacing:.1em;
 text-transform:uppercase;cursor:pointer;background:none;border:0;
 font-family:var(--f-data);padding:0}
.tab svg{width:20px;height:20px;stroke:currentColor;fill:none;
 stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tab[aria-current="page"]{color:var(--fire)}

@media (max-width:720px){
  .bar{height:44px;gap:9px;padding:0 12px}
  .logo{width:26px;height:26px;border-radius:6px}
  .lsfx{display:none}
  /* Footer and trailing links were 14px tall -- the one row every page
     shares, and the one a thumb misses. Padding with the margin pulled
     back grows the target without moving the text. */
  footer a,.how a{display:inline-block;padding:11px 2px;margin:-11px 0}
  .sbtn{display:none}
  .secs{display:none}
  .sbtn span{display:none}
  .iconbtn{display:grid}
  .acct{display:none}
  .tabs{display:grid}
  body{padding-bottom:62px}
  .w{padding-top:22px}
}

/* --- the panel ---------------------------------------------------------- */
.veil{position:fixed;inset:0;background:rgba(6,5,4,.72);z-index:50;
 border:0;padding:0;width:100%;cursor:default}
.panel-s{position:fixed;z-index:51;background:var(--pan,#171512);
 border:1px solid var(--line);border-radius:12px;padding:18px;
 right:16px;top:62px;width:330px;max-width:calc(100vw - 32px)}
.panel-s h3{margin:0 0 4px;font-size:15px;color:var(--ink);
 letter-spacing:-.01em;border:0;padding:0;text-transform:none}
.panel-s p{margin:0 0 14px;font-size:13px;color:var(--dim)}
.panel-s label{display:block;font:10px/1 var(--f-data);letter-spacing:.13em;
 text-transform:uppercase;color:var(--dim);margin:0 0 7px}
.panel-s input{width:100%;box-sizing:border-box;font:inherit;font-size:14px;
 background:var(--bg);color:var(--ink);border:1px solid var(--line);
 border-radius:8px;padding:11px 12px;margin:0 0 10px}
.panel-s input:focus{outline:none;border-color:var(--fire)}
.panel-s .go{width:100%;padding:12px;border-radius:999px;background:var(--fire);
 color:#140d07;border:0;font:500 11.5px/1 var(--f-data);letter-spacing:.12em;
 text-transform:uppercase;cursor:pointer}
.panel-s .msg{font:11px/1.6 var(--f-data);color:var(--dim);margin:10px 0 0}
.panel-s .out{display:block;width:100%;margin-top:12px;padding:10px;
 border:1px solid var(--line);border-radius:999px;background:none;
 color:var(--dim);font:11px/1 var(--f-data);letter-spacing:.1em;
 text-transform:uppercase;cursor:pointer}
.panel-s .x{position:absolute;right:10px;top:10px;width:30px;height:30px;
 border:0;background:none;color:var(--dim);cursor:pointer;display:grid;
 place-items:center}
.panel-s .x svg{width:16px;height:16px;stroke:currentColor;fill:none;
 stroke-width:1.7;stroke-linecap:round}
.res{list-style:none;margin:8px 0 0;padding:0;max-height:46vh;
 overflow-y:auto}
.res li{padding:0}
.res a{display:flex;gap:10px;align-items:baseline;padding:9px 4px;
 border-bottom:1px solid var(--line);border-radius:0;color:var(--ink);
 font-size:14px}
.res a:hover{background:var(--bg)}
.res a s{text-decoration:none;margin-left:auto;font:10px/1 var(--f-data);
 letter-spacing:.08em;text-transform:uppercase;color:var(--dim);
 white-space:nowrap}
@media (max-width:720px){
  .panel-s{right:8px;left:8px;top:auto;bottom:70px;width:auto}
}
@media (prefers-reduced-motion:reduce){.live i{animation:none}}

/* --- maps ---------------------------------------------------------------
   Drawn from Natural Earth 110m at quarter-degree resolution: regional
   context, not a survey. Coast is heavier than inland border so a landmass
   reads as a landmass. Everything live pulses; everything fixed does not,
   which is the only thing the animation is allowed to mean. */
.map{display:block;width:100%;height:auto;margin:0 0 10px;border-radius:6px;
 background:#0b1418;border:1px solid var(--line)}
.map .sea{fill:#0b1418}
.map .land{fill:#15130f;stroke:none}
.map .coast{fill:none;stroke:#3c4f57;stroke-width:1.1;stroke-linejoin:round;
 stroke-linecap:round}
.map .bord{fill:none;stroke:#2b2620;stroke-width:.7;stroke-dasharray:3 3}
.map .ring{fill:none;stroke:#37312a;stroke-width:.8;stroke-dasharray:2 4}
.map .ringlab{fill:#6f665c;font:9px/1 var(--f-data);letter-spacing:.08em}
.map .fire{fill:var(--fire)}
.map .fire.live{animation:mpulse 2.6s ease-in-out infinite}
.map .home{fill:none;stroke:var(--ink);stroke-width:1.6}
.map .homedot{fill:var(--ink)}
.map .town{fill:#7ea6c4}
.map .lab{fill:var(--ink);font:10px/1 var(--f-data);letter-spacing:.04em}
.map .dim{fill:#8b8175;font:9px/1 var(--f-data);letter-spacing:.06em}
.map .bar{stroke:var(--ink);stroke-width:1.2}
.map .wind{fill:none;stroke:#7ea6c4;stroke-width:1.6;stroke-linecap:round;
 stroke-dasharray:5 5;animation:mdrift 1.6s linear infinite}
.map .windhead{fill:#7ea6c4}
.map .px{fill:var(--fire);fill-opacity:.5;stroke:var(--fire);
 stroke-opacity:.85;stroke-width:.7}
.map .px.night{fill:#7ea6c4;fill-opacity:.42;stroke:#9cc3dd}
.map .grat{fill:none;stroke:#1d2a30;stroke-width:.6}
@keyframes mpulse{0%,100%{opacity:1}50%{opacity:.32}}
@keyframes mdrift{to{stroke-dashoffset:-20}}
@media (prefers-reduced-motion:reduce){
 .map .fire.live,.map .wind{animation:none}}
.mapcap{font:10px/1.5 var(--f-data);letter-spacing:.05em;color:var(--dim);
 margin:-4px 0 18px}
/* --- the layer strip ----------------------------------------------------
   One frame, several mark sets. A layer with nothing inside this frame is
   flat and inert and says how many it has: that is the coverage statement,
   and it needs no paragraph. Each live layer is its own address. */
.lyrs{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 8px;padding:0;
 list-style:none}
.lyrb{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;
 border-radius:999px;border:1px solid var(--line);background:var(--pan);
 color:var(--dim);font:11px/1 var(--f-data);letter-spacing:.08em;
 text-transform:uppercase;cursor:pointer;font-family:var(--f-data);
 text-decoration:none}
.lyrb:hover{color:var(--ink);border-color:var(--fire)}
.lyrb[aria-current="true"]{color:var(--fire);border-color:var(--fire);
 background:var(--bg)}
.lyrb s{text-decoration:none;color:#6f665c;font-variant-numeric:tabular-nums}
/* An SVG group is not an HTMLElement, so it has no hidden IDL property:
   setting g.hidden makes a JS expando that reflects to nothing. This
   attribute and this rule are ours, so they behave the same everywhere. */
.map .lyr[data-off]{display:none}
.lyrb.off{opacity:.42;border-style:dashed;background:none;cursor:default;
 pointer-events:none}
.mapcap b{color:var(--ink);font-weight:400}

.noads .adslot,.noads .anchor,.noads #anchor,.noads .railwrap,.noads .adfeed,
.noads .railad{display:none!important}
.adb-on .adslot,.adb-on .anchor,.adb-on #anchor,.adb-on .railwrap,
.adb-on .adfeed,.adb-on .railad{display:none!important}
.adslot:has(ins.adsbygoogle[data-ad-status="unfilled"]){display:none}
.adslot{--adh:300px;display:block;position:relative;margin:34px 0;
 min-height:var(--adh);border:1px solid var(--line);border-radius:10px;
 background:var(--pan);contain:layout style}
.adlab{position:absolute;top:9px;left:13px;z-index:2;font:9px/1 var(--f-data);
 letter-spacing:.16em;text-transform:uppercase;color:var(--dim);opacity:.75}
.adnet{min-height:var(--adh);width:100%;overflow:visible}
.adhouse{display:flex;flex-direction:column;justify-content:center;gap:9px;
 min-height:var(--adh);padding:36px 22px 22px;border:0;color:var(--ink)}
.adhouse:hover{background:rgba(255,255,255,.025)}
.adhouse:hover .adcta{text-decoration:underline}
.adk{font:10px/1 var(--f-data);letter-spacing:.16em;text-transform:uppercase;
 color:var(--fire)}
.adhouse b{font-size:19px;line-height:1.28;font-weight:500;max-width:30ch}
.adb{color:var(--dim);font-size:14px;line-height:1.5;max-width:44ch}
.adcta{font:11px/1 var(--f-data);letter-spacing:.1em;text-transform:uppercase;
 color:var(--fire);margin-top:3px}
@media (max-width:640px){.adslot{margin:28px 0}
 .adhouse{padding:34px 18px 20px}.adhouse b{font-size:18px}}

.anchor{position:fixed;left:0;right:0;bottom:0;z-index:40;height:90px;
 display:flex;align-items:center;gap:12px;padding:0 46px 0 14px;
 background:var(--pan);border-top:1px solid var(--line);
 box-shadow:0 -6px 24px rgba(0,0,0,.38)}
.anchor .adlab{position:static;margin:0 2px 0 0;flex:0 0 auto}
.anchhouse{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;
 gap:3px;border:0;color:var(--ink)}
.anchhouse b{font-size:14px;font-weight:500;line-height:1.25;overflow:hidden;
 text-overflow:ellipsis;white-space:nowrap}
.anchhouse span{font:10px/1 var(--f-data);letter-spacing:.1em;
 text-transform:uppercase;color:var(--fire)}
.anchx{position:absolute;top:50%;right:7px;transform:translateY(-50%);
 width:34px;height:34px;border:0;border-radius:50%;background:none;
 color:var(--dim);font-size:21px;line-height:1;cursor:pointer}
.anchx:hover{color:var(--ink);background:rgba(255,255,255,.07)}
body.hasanch{padding-bottom:90px}
@media print{.anchor{display:none}}

.adfeed{grid-column:1/-1;margin:10px 0}

.adslot[hidden],.anchor[hidden]{display:none!important}

.railwrap{display:none}
@media (min-width:1400px){
 .w{position:relative}
 .railwrap{display:block;position:absolute;top:0;right:-320px;width:300px;
  height:100%;pointer-events:none}
 .railwrap .adslot{position:sticky;top:26px;margin:0;pointer-events:auto}
 .railwrap .adhouse{padding:38px 20px 22px}
 .railwrap .adhouse b{font-size:20px;max-width:none}
 .railwrap .adb{max-width:none}
}

@media (min-width:1400px){.railwrap .adslot{top:72px}}

@media (min-width:1400px){.ad-end{display:none}}