/* ========================================================================== TNS Kinetic, Blog Index (home), archive, single post, search, and 404. Loads on top of main.css (shared nav, footer, design tokens). The fixed nav is 64px, so the page clears it with top padding; the dark footer laps up over the bottom. ========================================================================== */ .blogpage{ background:var(--paper); color:var(--ink); padding:132px 0 120px; min-height:76vh; } /* masthead for index, archive, and search ------------------------------- */ .bloghd{margin-bottom:8px} .bloghd .kick{ display:inline-flex;align-items:center;gap:9px; font-size:12px;font-weight:700;letter-spacing:.3em;text-transform:uppercase; color:var(--ink);opacity:.6;margin:0; } .bloghd .kick .mk{width:16px;height:16px;display:inline-block;flex:none;color:var(--ink)} .bloghd .kick .mk svg{display:block;width:100%;height:100%} .bloghd .kick::before{display:none} .bloghd h1{ font-size:clamp(40px,7vw,86px);font-weight:700;letter-spacing:-.03em; line-height:.98;margin:14px 0 0; } .bloghd .sub{ margin:18px 0 0;max-width:62ch;font-size:16.5px;line-height:1.6; font-weight:500;opacity:.85; } /* post grid + cards ----------------------------------------------------- */ .postgrid{ display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:30px;margin-top:54px; } .pcard{ display:flex;flex-direction:column;overflow:hidden; background:var(--white);border:3px solid var(--ink);border-radius:22px; text-decoration:none;color:inherit; transition:transform .3s,box-shadow .3s; } .pcard:hover,.pcard.pop{transform:translate(-4px,-9px);box-shadow:12px 14px 0 var(--ink)} .pthumb{ display:block;aspect-ratio:16/10; background:var(--ink) center/cover no-repeat;border-bottom:3px solid var(--ink); } .pthumb.noimg{background:var(--yellow);display:grid;place-items:center;color:var(--ink)} .pthumb.noimg svg{width:46px;height:46px;opacity:.85} .pbody2{display:flex;flex-direction:column;flex:1;padding:26px 24px 28px} .pcat{font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);opacity:.6} .pcard h2{font-size:23px;font-weight:700;letter-spacing:-.02em;line-height:1.14;margin:10px 0 0} .pexc{margin-top:12px;font-size:14.5px;line-height:1.55;font-weight:500;opacity:.8;flex:1} .pmeta{margin-top:18px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.5} /* single article -------------------------------------------------------- */ .article{max-width:768px;margin:0 auto} .article .pcat{opacity:.6} .article h1{ font-size:clamp(34px,5.6vw,64px);font-weight:700;letter-spacing:-.03em; line-height:1.03;margin:12px 0 0; } .article .amet{ margin:18px 0 0;font-size:13px;font-weight:700;letter-spacing:.1em; text-transform:uppercase;opacity:.55; } .phero{ margin:36px 0 0;border:3px solid var(--ink);border-radius:22px;overflow:hidden; aspect-ratio:16/9;background:var(--ink) center/cover no-repeat; } .pbody{margin-top:36px;font-size:17.5px;line-height:1.72;font-weight:400} .pbody>*:first-child{margin-top:0} .pbody p{margin:1.15em 0} .pbody h2{font-size:30px;font-weight:700;letter-spacing:-.02em;line-height:1.1;margin:1.6em 0 .5em} .pbody h3{font-size:23px;font-weight:700;letter-spacing:-.01em;margin:1.4em 0 .4em} .pbody a{color:var(--ink);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:2px} .pbody img{max-width:100%;height:auto;border-radius:14px;margin:1.4em 0} .pbody ul,.pbody ol{margin:1.1em 0;padding-left:1.3em} .pbody li{margin:.4em 0} .pbody blockquote{ margin:1.5em 0;padding:6px 0 6px 24px;border-left:4px solid var(--yellow); font-size:20px;font-weight:600;font-style:normal; } .pbody code{background:rgba(65,65,65,.1);padding:2px 6px;border-radius:5px;font-size:.9em} .pbody figure{margin:1.4em 0} .pbody figcaption{font-size:13px;opacity:.6;margin-top:8px} /* legacy imported posts ------------------------------------------------- */ /* Some posts were pasted from the old site as a single HTML block. That markup wraps the body in
and ships an embedded rule forcing links white, both fighting the paper palette. These pin the inner wrapper back to the kinetic ink so legacy posts match. The selectors outrank the inline colour and the embedded !important link rule. */ .pbody article{color:var(--ink) !important} .pbody article a{color:var(--ink) !important;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:2px} /* back link, pagination, buttons, empty + 404 --------------------------- */ .backlink{ display:inline-flex;align-items:center;gap:9px;margin-top:50px; font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase; color:var(--ink);text-decoration:none;opacity:.7;transition:opacity .25s; } .backlink:hover{opacity:1} .backlink svg{width:18px;height:12px} .screen-reader-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} .pagination{ margin-top:64px; /* the_posts_pagination outputs a