/* Live article cards + rotating carousel for the Writing section.
   Extends the existing .pub-card styles rather than replacing them, so the
   static fallback and the real cards look like one system. */

/* Published articles and "Coming Soon" placeholders share the same grid, but
   only .pub-live cards are real articles, so only they are interactive - the
   placeholders keep the default cursor and hold no link at all. */
.pub-card.pub-live{cursor:pointer}

/* Counterpart to the placeholders' "Coming Soon" pill. */
.pub-read{
  align-self:flex-start;font-size:13px;font-weight:700;
  letter-spacing:.03em;color:var(--gold);
}
.pub-card.pub-live:hover .pub-read{text-decoration:underline}

.pub-cover.has-img{padding:0}
.pub-cover.has-img img{width:100%;height:100%;object-fit:cover;display:block}

.pub-body h3 a{color:inherit;text-decoration:none}
.pub-body h3 a:hover{color:var(--navy-2);text-decoration:underline}
.pub-body h3 a:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:4px}

.pub-meta{align-self:flex-start;font-size:12.5px;color:var(--muted);letter-spacing:.02em}
.pub-more{margin-top:30px;text-align:center}

/* ---------------- carousel ----------------
   Only applied once JS has real data. Without it .pub-grid stays the original
   CSS grid, so the no-JS fallback is unaffected. */
.pub-grid.is-carousel{display:block}
.pub-viewport{overflow:hidden}
.pub-track{
  display:flex;gap:22px;align-items:stretch;
  transition:transform .55s cubic-bezier(.4,0,.2,1);
  will-change:transform;
}
.pub-track>.pub-card{flex:0 0 calc((100% - 44px) / 3)}
@media (max-width:1000px){
  .pub-track>.pub-card{flex:0 0 calc((100% - 22px) / 2)}
}
@media (max-width:640px){
  .pub-track>.pub-card{flex:0 0 100%}
}
@media (prefers-reduced-motion:reduce){
  .pub-track{transition:none}
}

/* Cards in a flex row stretch to the tallest, so the pills line up. */
.pub-track>.pub-card .pub-body{height:100%}

.pub-nav{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:26px}
.pub-arrow{
  width:40px;height:40px;flex:none;border-radius:50%;
  border:1px solid var(--line);background:var(--card);color:var(--slate);
  font-size:16px;line-height:1;cursor:pointer;
  transition:border-color .2s,color .2s,background .2s;
}
.pub-arrow:hover{border-color:var(--navy);color:var(--ink)}
.pub-dots{display:flex;align-items:center;gap:8px}
.pub-dot{
  width:8px;height:8px;padding:0;border-radius:50%;
  border:none;background:#cfcabc;cursor:pointer;
  transition:background .2s,transform .2s;
}
.pub-dot:hover{background:var(--muted)}
.pub-dot.on{background:var(--gold);transform:scale(1.35)}