/* Devlog pages (list + posts), on top of style.css. */
main.post,main.devlog-list{max-width:780px}
main.post h1{font-size:clamp(32px,5.4vw,52px)}
.kicker a{color:var(--muted);text-decoration:none}
.kicker a:hover{color:var(--text)}
.lead{font-size:18px}

.cover img,.post-card img{display:block;width:100%;height:auto;border-radius:16px;border:1px solid var(--line)}
.cover{display:block;margin:8px 0 40px}

article p,article li{font-size:17.5px;line-height:1.8}
article p{margin-bottom:20px}
article h2{font-size:26px}
article a{word-break:break-word}

/* click-to-play YouTube */
.yt-fig{margin:8px 0 28px}
.yt{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#000;border:1px solid var(--line)}
.yt img{width:100%;height:100%;object-fit:cover;display:block;opacity:.85}
.yt button{position:absolute;inset:0;width:100%;border:0;cursor:pointer;background:transparent}
.yt button::before{
  content:"";position:absolute;left:50%;top:50%;width:72px;height:50px;transform:translate(-50%,-50%);
  background:#FF0033;border-radius:14px;transition:transform .15s ease;
}
.yt button::after{
  content:"";position:absolute;left:50%;top:50%;transform:translate(-35%,-50%);
  border-style:solid;border-width:11px 0 11px 18px;border-color:transparent transparent transparent #fff;
}
.yt button:hover::before{transform:translate(-50%,-50%) scale(1.08)}
.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.yt-fig figcaption{font-family:var(--mono);font-size:13px;color:var(--dim);margin-top:10px}

/* Steam call to action */
.cta-box{
  margin:40px 0 28px;padding:32px 28px;text-align:center;
  background:rgba(123,216,143,.06);border:1px solid rgba(123,216,143,.25);border-radius:18px;
}
.cta-box p{color:var(--text);font-family:var(--display);font-weight:700;font-size:20px;margin-bottom:18px}
.btn-big{font-size:18px;padding:18px 44px}

/* list */
.post-card{
  display:grid;grid-template-columns:300px 1fr;gap:28px;align-items:center;
  margin:36px 0;padding:22px;border:1px solid var(--line);border-radius:18px;background:var(--panel);
  color:inherit;text-decoration:none;transition:border-color .2s ease;
}
.post-card:hover{border-color:var(--green)}
.post-card h2{margin:4px 0 10px;padding:0;border:0;font-size:22px;color:var(--text)}
.post-card p{margin-bottom:10px;font-size:15px}
.post-card .meta{margin-bottom:4px}
.post-card .more{color:var(--green);font-weight:600;font-size:15px}

@media (max-width:820px){
  .post-card{grid-template-columns:1fr;gap:16px;padding:16px}
  article p,article li{font-size:16.5px}
  .btn-big{padding:16px 30px;font-size:16px}
}