Preferred source

<div class="source"><div class="pick"><div class="circle">P</div><div><b>Paperline Journal</b><small>Reader source list</small></div><button id="pick">SELECT</button></div><div class="story"><span id="badge">SOURCE</span><b>How a small town rebuilt its library</b><small>Paperline Journal · reporting</small></div></div>

.source{width:min(89%,550px);display:grid;gap:clamp(10px,2.2vmin,19px);font:800 clamp(10px,max(1.8vmin,1vw),15px) sans-serif;color:var(--fg)}.pick{display:flex;align-items:center;gap:clamp(7px,1.5vmin,15px);background:var(--surface);border:1px solid var(--line);padding:clamp(9px,1.8vmin,17px)}.circle{width:clamp(27px,5vmin,44px);height:clamp(27px,5vmin,44px);border-radius:50%;display:grid;place-items:center;background:var(--fg);color:var(--bg);font-size:1.4em}.pick div:nth-child(2){display:grid;gap:2px}.pick small,.story small{color:var(--muted);font-size:max(10px,1vw,.75em)}.pick button{margin-left:auto;background:var(--fg);color:var(--bg);border:0;padding:6px 10px;font:inherit;cursor:pointer}.story{display:grid;gap:4px;padding:clamp(9px,1.8vmin,17px);border-left:5px solid var(--line);background:var(--surface)}.story span{color:var(--muted);font-size:max(10px,1vw,.7em);letter-spacing:.1em}.story b{font-size:clamp(12px,2.3vmin,21px)}.story.chosen{border-color:var(--accent)}.story.chosen span{color:var(--accent)}@media(min-width:700px){body > :not(script){zoom:1.55}.map,.feed,.linkmap{height:48%}}

const story=document.querySelector('.story'),badge=document.querySelector('#badge'),button=document.querySelector('#pick');let selected=false;function show(){story.classList.toggle('chosen',selected);badge.textContent=selected?'PREFERRED':'SOURCE';button.textContent=selected?'SELECTED':'SELECT'}button.addEventListener('click',()=>{clearInterval(timer);selected=!selected;show()});setTimeout(()=>{selected=true;show()},900);const timer=setInterval(()=>{selected=!selected;show()},3400);