/* Small additions from build/pages.py (techfix): the "Sound.me in brief" box in posts, the links under the post call to action, the 404 page. */

/* ---------- posts: facts box after the intro ---------- */
.post-content .post-facts { background: var(--light); border-radius: 18px; padding: 16px 20px 17px; font-size: 15.5px; line-height: 1.55; color: #3d3d47; }
.post-content .post-facts p { margin: 0; }
.post-content .post-facts b { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); opacity: .55; }
.post-content .post-facts ul { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 4px 18px; }
.post-content .post-facts li, .post-content .post-facts li + li { margin: 0; }
.post-content .post-facts a { font-weight: 600; color: var(--ink); text-decoration-color: rgba(27, 27, 31, .3); }
.post-content .post-facts a:hover { color: #c9520b; text-decoration-color: currentColor; }
.post-content .post-facts + *, .post-content * + .post-facts { margin-top: 1.4em; }

/* ---------- posts: links under the call to action ---------- */
.post-cta-links { display: flex; flex-wrap: wrap; gap: 8px 26px; margin-top: 22px; font-size: 16px; font-weight: 600; }
.post-cta-links a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; opacity: .88; transition: opacity .2s; }
.post-cta-links a:hover { opacity: 1; }

/* ---------- 404 ---------- */
.nf { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; }
.nf .wrap { width: 100%; }
.nf-links { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.nf-links a { display: flex; flex-direction: column; gap: 2px; padding: 16px 20px; border-radius: 18px; background: var(--light); transition: background-color .2s, transform .2s; }
.nf-links a:hover { background: #ececf1; transform: translateX(4px); }
.nf-links b { font-size: 18px; font-weight: 600; letter-spacing: -.02em; }
.nf-links span { font-size: 14.5px; opacity: .65; }