/* ============================================================
   News prototype: floating circular artefact and article list.
   Page-specific, loaded only on /news and its article pages.
   Reuses site.css tokens (--ink, --paper, --steel, etc.) throughout,
   so light/dark and every existing colour rule carry over unchanged.
   ============================================================ */

/* ---------- landing page ----------
   The page is deliberately short: a heading, two lines and the artefact.
   Hold the viewport open so the footer sits at the fold rather than halfway
   up the screen, and so the floating panel opens over open page. */
.newspage{min-height:calc(100vh - var(--navh) - 40px)}

/* ---------- floating artefact ---------- */
.newsfab{position:fixed;top:50%;right:clamp(14px,3vw,28px);transform:translateY(-50%);
  z-index:90;font-family:var(--body)}
.newsfab[open]{width:min(360px,calc(100vw - 32px))}

.newsfab summary{list-style:none;cursor:pointer;position:relative;
  display:flex;align-items:center;justify-content:center;
  width:64px;height:64px;border-radius:50%;
  background:var(--paper);border:1px solid var(--ink-12);color:var(--ink);
  box-shadow:0 10px 30px rgba(0,0,0,.16);
  transition:border-color .2s,background .2s}
.newsfab summary::-webkit-details-marker{display:none}
.newsfab summary:hover{border-color:var(--steel)}
.newsfab summary:focus-visible{outline:2px solid var(--link);outline-offset:3px}

/* a quiet pulse ring to draw the eye, off when the panel is open */
.newsfab:not([open]) summary::after{content:"";position:absolute;inset:-7px;border-radius:50%;
  border:1px solid var(--steel);opacity:0;animation:newspulse 3.2s ease-out infinite}
@keyframes newspulse{0%{opacity:.5;transform:scale(.88)}70%{opacity:0;transform:scale(1.32)}100%{opacity:0;transform:scale(1.32)}}

.newsfab .ic-open{display:flex;flex-direction:column;align-items:center;gap:2px}
.newsfab .ic-open svg{width:24px;height:24px}
.newsfab .cnt{font-size:.6rem;font-weight:700;letter-spacing:.04em;color:var(--ink-60)}
.newsfab .ic-close{display:none;align-items:center;justify-content:space-between;width:100%}
.newsfab .ic-close .lbl{font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.newsfab .ic-close svg{width:18px;height:18px;color:var(--ink-60)}

.newsfab[open] summary{width:100%;height:auto;border-radius:8px 8px 0 0;
  padding:16px 18px;background:var(--paper-mid)}
.newsfab[open] summary .ic-open{display:none}
.newsfab[open] summary .ic-close{display:flex}

.newsfab .in{background:var(--paper);border:1px solid var(--ink-12);border-top:0;
  border-radius:0 0 8px 8px;box-shadow:0 14px 36px rgba(0,0,0,.18);
  max-height:min(58vh,440px);overflow-y:auto}

/* ---------- the list itself: a quiet vertical graph, node to node ---------- */
.newslist{list-style:none;margin:0;padding:10px 8px 10px 8px;position:relative}
.newslist::before{content:"";position:absolute;left:35px;top:26px;bottom:26px;width:1px;background:var(--ink-12)}
.newslist li{position:relative}
.newslist a{display:flex;gap:14px;align-items:flex-start;padding:12px 10px;
  border-radius:4px;text-decoration:none;color:inherit;transition:background .2s;min-height:44px}
.newslist a:hover{background:var(--ink-06)}
.newslist a:focus-visible{outline:2px solid var(--link);outline-offset:2px}
.newsnode{flex:none;width:34px;height:34px;border-radius:50%;position:relative;z-index:1;
  border:1px solid var(--ink-30);background:var(--paper-mid);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:.66rem;color:var(--ink-60)}
.newsbody{min-width:0}
.newsmeta{font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-text);margin:0 0 5px}
.newsbody h3{font-family:var(--body);font-weight:600;font-size:.92rem;color:var(--ink);margin:0 0 4px;line-height:1.35}
.newsexcerpt{font-size:.82rem;color:var(--ink-60);line-height:1.55;margin:0}

@media(max-width:520px){
  .newsfab{right:14px}
  .newsfab[open]{width:calc(100vw - 28px)}
}

/* ---------- article page: a small ring accent tying back to the list nodes ---------- */
.newsring{width:34px;height:34px;border-radius:50%;border:1px solid var(--ink-30);
  display:flex;align-items:center;justify-content:center;font-family:var(--mono);
  font-size:.66rem;color:var(--ink-60);margin-bottom:18px}