/* What is new: a bell on the right edge of the screen with a number
   (includes/news.php, assets/news.js). It slides out to say what is new, once,
   then tucks back in; press it and the list opens. */

.hfs-nw{
  --nw-ink:#F3EAE0; --nw-muted:#B9A897; --nw-copper:#D98A4E;
  --nw-gold:linear-gradient(180deg,#F0B878 0%,#D98A4E 55%,#B4632C 100%); --nw-gold-ink:#1A0F07;
  --nw-sans:"Jost","Avenir Next","Segoe UI",system-ui,sans-serif;
  position:fixed;right:0;top:92px;z-index:900;display:flex;flex-direction:column;align-items:flex-end;
  max-width:calc(100vw - 16px);font-family:var(--nw-sans)}

.hfs-nw>summary{position:relative;display:flex;align-items:center;height:46px;box-sizing:border-box;max-width:100%;
  padding:0 max(11px,env(safe-area-inset-right,0px)) 0 13px;
  border:1px solid rgba(217,138,78,.55);border-right:0;border-radius:23px 0 0 23px;background:rgba(29,22,17,.94);color:var(--nw-copper);
  cursor:pointer;list-style:none;box-shadow:0 14px 30px -14px rgba(0,0,0,.85);-webkit-tap-highlight-color:transparent}
.hfs-nw>summary::-webkit-details-marker{display:none}
.hfs-nw>summary:hover,.hfs-nw[open]>summary{background:#2A1D12}
.hfs-nw>summary:focus-visible{outline:3px solid #F0B878;outline-offset:3px}
.hfs-nw-bell{flex:0 0 22px;width:22px;height:22px}

/* just under the header, clear of the headline */
@media(min-width:1025px){.hfs-nw{top:132px}}

/* the number: how many this phone or computer has not seen */
.hfs-nw-n{position:absolute;top:-7px;left:-7px;min-width:20px;height:20px;box-sizing:border-box;padding:0 5px;border-radius:10px;
  background:var(--nw-gold);color:var(--nw-gold-ink);font:700 12px/20px var(--nw-sans);text-align:center}
.hfs-nw.is-seen .hfs-nw-n{display:none}
.hfs-nw.is-seen>summary{color:var(--nw-muted);border-color:rgba(217,138,78,.3)}

/* sliding out to say what is new */
.hfs-nw-peek{max-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--nw-ink);font:500 14.5px/1 var(--nw-sans);
  transition:max-width .55s cubic-bezier(.2,.7,.2,1),margin .55s cubic-bezier(.2,.7,.2,1)}
.hfs-nw.is-peek:not([open]) .hfs-nw-peek{max-width:min(300px,calc(100vw - 96px));margin-right:10px}

/* the list */
.hfs-nw-list{width:min(330px,calc(100vw - 24px));box-sizing:border-box;margin:8px 8px 0 0;padding:8px;border-radius:16px;
  background:#1D1611;border:1px solid rgba(217,138,78,.32);box-shadow:0 26px 50px -18px rgba(0,0,0,.85);
  max-height:calc(100vh - 220px);overflow:auto}
.hfs-nw-list p{margin:6px 10px 8px;color:var(--nw-muted);font:600 11.5px/1.2 var(--nw-sans);letter-spacing:.14em;text-transform:uppercase}
a.hfs-nw-item{display:grid;gap:4px;padding:11px 12px;border-radius:11px;color:var(--nw-ink)!important;text-decoration:none!important}
a.hfs-nw-item+a.hfs-nw-item{margin-top:2px}
a.hfs-nw-item:hover,a.hfs-nw-item:focus-visible{background:rgba(217,138,78,.14);outline:0}
a.hfs-nw-item b{font:600 11.5px/1.25 var(--nw-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--nw-copper)}
a.hfs-nw-item span{font:500 16px/1.3 var(--nw-sans)}

@media(prefers-reduced-motion:reduce){.hfs-nw-peek{transition:none}}
@media print{.hfs-nw{display:none}}