/* /whats-new: one measure for all of it, the entries, their tags and the
   row that filters by them (whats-new.js), and the roadmap. */
html,body{margin:0} body{background:var(--paper);color:var(--ink);font-family:var(--font-ui);-webkit-font-smoothing:antialiased}
a{color:var(--accent-strong)}
.wrap{margin:0 auto;padding:24px 22px 60px} .wrap > *{max-width:700px} /* one measure for all of it, as body > .wrap keeps */
h1{font-family:var(--font-headline);font-weight:700;font-size:var(--text-3xl);letter-spacing:-.02em;margin:34px 0 8px}
.lede{font-size:var(--text-md);line-height:var(--leading-prose);color:var(--ink-soft);margin:0 0 8px}
h2{font-family:var(--font-headline);font-weight:700;font-size:var(--text-xl);margin:40px 0 14px;padding-bottom:8px;border-bottom:1px solid var(--rule)}
.entry{margin:0 0 28px}
.entry .date{font:500 var(--text-xs)/1.3 var(--font-ui);color:var(--ink-faint)}
.entry .t{font-weight:600;font-size:var(--text-md);margin:4px 0 6px;color:var(--ink)}
.entry .d{font-size:var(--text-sm);line-height:var(--leading-prose);color:var(--ink-soft)}
.road{display:flex;gap:12px;align-items:flex-start;margin:0 0 16px}
.road .tag{flex:none;font:600 var(--text-2xs)/1 var(--font-ui);padding:6px 9px;border-radius:var(--radius-pill);border:1px solid var(--rule);color:var(--ink-soft);margin-top:2px;min-width:74px;text-align:center}
.road .tag.now{color:var(--good);border-color:var(--good);background:var(--good-soft)}
.road .tag.next{color:var(--warn);border-color:var(--warn);background:var(--warn-soft)}
.road .rt{font-weight:600;font-size:var(--text-md);margin-bottom:3px}
.road .rd{font-size:var(--text-sm);line-height:var(--leading-prose);color:var(--ink-soft)}
.cta{margin:34px 0 0;font-size:var(--text-sm);line-height:var(--leading-prose);color:var(--ink-soft)}
@media(max-width:600px){h1{font-size:var(--text-2xl)}}
.wn-feed{margin:0 0 16px;font:var(--text-sm)/var(--leading-prose) var(--font-ui);color:var(--ink-soft);}
.wn-feed a{color:var(--accent);text-decoration:underline;text-underline-offset:2px;}
.wn-feed a:hover{text-decoration-thickness:2px;}

/* Each entry's tags, under its date, written by feed.mjs from data-tags. */
.entry .tags{display:flex;flex-wrap:wrap;gap:4px;margin:6px 0 0;padding:0;list-style:none}
.entry .tags li{font:600 var(--text-2xs)/1 var(--font-ui);padding:4px 8px;border-radius:var(--radius-pill);border:1px solid var(--rule);color:var(--ink-soft)}
.entry[hidden]{display:none}
/* New since this browser last read the page (whats-new.js). */
.entry.is-new .date::after{content:"New since your last visit";margin-left:8px;padding:2px 7px;border-radius:var(--radius-pill);background:var(--accent-soft);color:var(--accent-strong);font-weight:600}

/* The row that filters by tag. */
.wn-filter{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 22px}
.wn-filter button{min-width:44px;min-height:36px;padding:6px 12px;border:1px solid var(--rule);border-radius:var(--radius-pill);background:transparent;color:var(--ink-soft);font:500 var(--text-xs)/1 var(--font-ui);cursor:pointer;transition:background-color var(--dur-2) var(--ease-standard),border-color var(--dur-2) var(--ease-standard),color var(--dur-2) var(--ease-standard)}
.wn-filter button:hover{border-color:var(--rule-strong);color:var(--ink)}
.wn-filter button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.wn-filter button[aria-pressed="true"]{background:var(--accent-soft);border-color:var(--accent-border);color:var(--accent-strong);font-weight:600}
@media (pointer:coarse){.wn-filter button{min-height:44px}}
.wn-count{margin:-12px 0 20px;font-size:var(--text-xs);color:var(--ink-faint)}