/* The dev log's pages, over the studio's own styles.css (its colours and its round type). */
.post, .log { max-width: 760px; padding-top: 28px; padding-bottom: 24px; }
.post h1, .log h1 { font-size: clamp(32px, 5vw, 48px); margin-bottom: 22px; }
.post h2 { margin-top: 40px; }
.post h3 { font: 900 21px/1.3 var(--round); margin: 28px 0 10px; color: var(--lime); }
.post p, .post li { color: var(--cream); }
.post p { margin: 0 0 18px; }
.post ul, .post ol { margin: 0 0 18px; padding-left: 24px; }
.post li { margin-bottom: 8px; }
.post li::marker { color: var(--pink); }
.post strong { color: var(--lime); }
.post code { font: 15px/1.4 ui-monospace, "SF Mono", Menlo, Consolas, monospace; background: var(--purple-deep); border-radius: 6px; padding: 1px 6px; }

.post figure { margin: 26px 0; }
.post figure img { display: block; width: 100%; height: auto; image-rendering: pixelated; background: var(--purple-deep); border: 2px solid var(--purple-line); border-radius: 16px; box-shadow: 0 6px 0 var(--purple-deep); }
.post figcaption { margin-top: 12px; font-size: 14.5px; color: var(--soft); text-align: center; }

.table { overflow-x: auto; margin: 0 0 22px; border: 2px solid var(--purple-line); border-radius: 16px; }
.post table { width: 100%; border-collapse: collapse; font-size: 15.5px; }
.post th, .post td { text-align: left; padding: 9px 14px; vertical-align: top; }
.post th { background: var(--purple-card); color: var(--lime); font-weight: 800; }
.post tbody tr + tr td { border-top: 1px solid var(--purple-line); }
.post tbody tr:first-child td { border-top: 2px solid var(--purple-line); }

.turn { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 44px; padding-top: 20px; border-top: 2px solid var(--purple-line); font-weight: 800; }
.turn a { text-decoration: none; }
.turn .older::before { content: "\2190\00a0"; }
.turn .newer::after { content: "\00a0\2192"; }

.log .lede { margin-bottom: 30px; }
.game { padding: 6px 0 14px; }
.game h2 { margin-bottom: 8px; }
.game h2 a { color: var(--cream); text-decoration: none; }
.game h2 a:hover { color: var(--pink); }
.game .about { color: var(--soft); margin: 0 0 20px; }
.entry { background: var(--purple-card); border: 2px solid var(--purple-line); border-radius: 18px; padding: 22px 24px; margin-bottom: 18px; box-shadow: 0 5px 0 var(--purple-deep); }
.entry .eyebrow { margin-bottom: 10px; }
.entry h3 { font: 900 24px/1.2 var(--round); margin: 0 0 10px; }
.entry h3 a { color: var(--lime); text-decoration: none; }
.entry h3 a:hover { color: var(--pink); }
.entry p:last-child { margin: 0; color: var(--soft); }