/* Low Frequency Gallery: developer's blog
   Sits on top of ../style.css. Kept in its own file so the main stylesheet's cache isn't touched. */

/* blog index */
.bhead{padding-block:56px 34px;border-bottom:1px solid var(--line)}
.bhead h1{font-size:clamp(40px,6vw,68px);margin:0 0 16px}
.bhead .lead{margin:0 0 20px}
.rss{display:inline-flex;align-items:center;gap:8px;font:500 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-decoration:none;border:1px solid var(--line);border-radius:999px;padding:8px 12px}
.rss:hover{color:var(--ink);border-color:var(--muted)}
.rss svg{width:12px;height:12px}

.posts{list-style:none;margin:0;padding:0 0 80px}
.post{border-bottom:1px solid var(--line)}
.post a{display:grid;grid-template-columns:150px minmax(0,1fr);gap:8px 32px;padding-block:30px;text-decoration:none;color:var(--ink)}
@media (max-width:700px){.post a{grid-template-columns:1fr}}
.post time{font:500 12px/1.9 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.post h2{font:800 clamp(24px,3vw,32px)/1.1 var(--display);letter-spacing:-.02em;margin:0 0 10px;transition:color .15s}
.post a:hover h2{color:var(--lamp)}
.post p{color:var(--muted);margin:0 0 12px;max-width:64ch}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tags span{font:500 11px/1 var(--mono);letter-spacing:.06em;border:1px solid var(--line);border-radius:999px;padding:5px 9px;color:var(--muted)}

/* single post */
.article{padding-block:28px 40px}
.article header{padding-block:10px 30px;border-bottom:1px solid var(--line);margin-bottom:34px}
.article header h1{font-size:clamp(36px,5.4vw,60px);margin:0 0 14px}
.meta{font:500 12px/1.6 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin:0 0 16px}
.prose{font-size:17px;color:var(--muted)}
.prose p,.prose ul,.prose ol{margin:0 0 20px;max-width:66ch}
.prose h2{font:800 26px/1.15 var(--display);letter-spacing:-.01em;color:var(--ink);margin:44px 0 14px}
.prose h3{font:700 20px/1.2 var(--display);color:var(--ink);margin:30px 0 10px}
.prose strong{color:var(--ink);font-weight:500}
.prose li{margin-bottom:8px}
.prose li::marker{color:var(--lamp)}
.prose code{font:15px var(--mono);background:var(--plinth);border:1px solid var(--line);border-radius:5px;padding:2px 6px;color:var(--ink)}
.prose blockquote{margin:0 0 20px;padding:4px 0 4px 20px;border-left:3px solid var(--lamp);color:var(--ink)}
.prose figure{margin:30px 0}
.prose figure img{border-radius:10px;border:1px solid var(--line);width:100%;height:auto}
.prose figcaption{font:500 12px/1.4 var(--mono);color:var(--muted);margin-top:8px;letter-spacing:.04em}
.endcard{border:1px solid var(--line);border-radius:12px;background:var(--wall2);padding:22px 24px;margin:44px 0 20px}
.endcard h2{font:700 20px/1.2 var(--display);margin:0 0 6px;color:var(--ink)}
.endcard p{color:var(--muted);margin:0 0 16px;font-size:15px}
.endcard .buy{display:flex;gap:10px;flex-wrap:wrap}