/* The devlog: its index, its posts, and the cards the home page shares. */
.blog-page{padding-top:76px}
.blog-head{max-width:760px;padding:60px 0 40px}
.blog-head h1{margin:12px 0 16px}
.post-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px}
.post-card{display:flex;flex-direction:column;background:var(--green);border-radius:20px;overflow:hidden;color:var(--cream);text-decoration:none;box-shadow:0 0 0 1px var(--green-light);transition:transform .25s,box-shadow .25s}
.post-card:hover{transform:translateY(-4px);box-shadow:0 0 0 2px var(--gold),0 20px 40px rgba(0,0,0,.35)}
.post-card .cover{aspect-ratio:16/9;background:var(--green-light);display:grid;place-items:center;overflow:hidden}
.post-card .cover img{width:100%;height:100%;object-fit:cover}
.post-card .cover img.nocover{width:30%;height:auto;object-fit:contain;opacity:.5;filter:brightness(0) invert(.9)}
.post-card .txt{padding:20px 22px 24px}
.post-card time,.post time{font-size:12px;color:var(--gold);letter-spacing:.14em;text-transform:uppercase;font-family:Marcellus,serif}
.post-card h3{font:400 24px/1.2 Marcellus,serif;margin:8px 0}
.post-card p{color:var(--muted);font-size:15px}
.empty{color:var(--muted)}

.devlog{padding-block:110px 40px}
.devlog-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:32px;flex-wrap:wrap}
.devlog-head h2{margin-top:12px}
.devlog .more{font:400 14px Marcellus,serif;letter-spacing:.2em;text-transform:uppercase;text-decoration:none}

.post{max-width:820px;padding-block:40px 60px}
.post .back{font-size:14px;text-decoration:none}
.post header{margin:28px 0 36px}
.post h1{font:400 clamp(34px,5vw,56px)/1.1 Marcellus,serif;margin:12px 0 16px}
.post-body{font-size:18px;line-height:1.7}
.post-body>*+*{margin-top:1.1em}
.post-body h2{font:400 32px/1.2 Marcellus,serif;margin-top:1.8em}
.post-body h3{font:600 21px Figtree,sans-serif;margin-top:1.6em}
.post-body ul,.post-body ol{padding-left:1.3em}
.post-body li::marker{color:var(--gold)}
.post-body blockquote{border-left:3px solid var(--gold);padding:4px 0 4px 20px;color:var(--muted);font-style:italic}
.post-body code{background:var(--green);padding:2px 6px;border-radius:6px;font-size:.9em}
.post-media{margin-block:1.8em}
.post-media .frame{position:relative;border-radius:16px;overflow:hidden;box-shadow:0 0 0 1px var(--green-light),0 18px 36px rgba(0,0,0,.35)}
.post-media img,.post-media video{display:block;width:100%;border-radius:16px}
.post-media .frame img,.post-media .frame video{border-radius:0}
.post-media .ai-note{position:absolute;left:12px;top:12px}
.post-media figcaption{margin-top:10px;font-size:14px;color:var(--muted);text-align:center}
.yt{aspect-ratio:16/9;background:radial-gradient(circle at 50% 45%,var(--green-light),var(--green-dark) 75%)}
.yt-play{all:unset;position:absolute;inset:0;cursor:pointer;display:grid;place-items:center;align-content:center;gap:14px}
.yt-play:focus-visible{outline:2px solid var(--gold);outline-offset:-4px}
.yt-icon{width:76px;height:76px;border-radius:50%;background:var(--gold);position:relative;box-shadow:0 10px 30px rgba(0,0,0,.4);transition:transform .2s}
.yt-icon::after{content:"";position:absolute;left:31px;top:24px;border-left:22px solid var(--green-dark);border-top:14px solid transparent;border-bottom:14px solid transparent}
.yt-play:hover .yt-icon{transform:scale(1.08)}
.yt-note{font-size:12px;color:var(--muted)}
.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.pager{display:flex;justify-content:space-between;gap:20px;margin-top:60px;padding-top:24px;border-top:1px solid var(--green-light)}
.pager a{text-decoration:none;max-width:48%}
.final.small{padding-block:80px}
/* The rig's renders (clear backgrounds) at their own size, on a soft stage. */
.post-media .frame:has(img[src*="/genetics/"]){background:radial-gradient(circle at 50% 45%,var(--green-light),var(--green) 70%);padding:16px}
.post-media img[src*="/genetics/"]{max-width:360px;margin:0 auto}
/* The holder card: a quiet, see-through placeholder that keeps the row balanced. */
.post-card.holder{background:rgba(28,51,41,.35);box-shadow:inset 0 0 0 1px rgba(212,176,104,.28);border:1px dashed rgba(212,176,104,.0)}
.post-card.holder .cover{background:repeating-linear-gradient(135deg,rgba(45,74,60,.35) 0 12px,rgba(45,74,60,.18) 12px 24px)}
.post-card.holder .cover img{width:22%;height:auto;object-fit:contain;opacity:.35}
.post-card.holder h3{color:var(--muted)}
.post-card.holder .soon{font:400 12px Marcellus,serif;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);opacity:.8}
.post-card.holder:hover{box-shadow:inset 0 0 0 1px var(--gold)}
/* The rig's renders as covers: whole, on the card's own green. */
.post-card .cover img[src*="/genetics/"]{object-fit:contain;padding:10px 16px;background:radial-gradient(circle at 50% 45%,var(--green-light),var(--green) 75%)}
/* Each card shows it leads on: a small gold arrow, bottom right, that moves on hover. */
.post-card{position:relative}
.post-card .txt{padding-bottom:54px}
.post-card::after{content:"";position:absolute;right:18px;bottom:16px;width:30px;height:30px;border-radius:50%;
  box-shadow:inset 0 0 0 1px rgba(212,176,104,.55);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d4b068' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/14px no-repeat;
  transition:transform .25s,background-color .25s}
.post-card:hover::after{transform:translateX(4px);background-color:rgba(212,176,104,.12)}
/* The holder isn't a link: no arrow, no lift. */
.post-card.holder::after{display:none}
.post-card.holder:hover{transform:none;box-shadow:inset 0 0 0 1px rgba(212,176,104,.28)}
.post-card.holder .txt{padding-bottom:24px}

/* Contents lists and tables on the long pages (privacy, terms). */
.post-body .contents{border-left:3px solid var(--gold);padding:4px 0 4px 20px}
.post-body .contents ol{margin:.4em 0 0}
.post-body table{border-collapse:collapse;width:100%;font-size:16px}
.post-body th,.post-body td{text-align:left;vertical-align:top;padding:8px 10px;border-bottom:1px solid rgba(255,255,255,.15)}