/*
* The public blog — listing and article. Loaded only by the two blog
* views (via `content_for :head`), on top of marketing.css, which already
* supplies the reset, the nav, the footer, the buttons and the band.
* Ported from the static blog.html / blog-post.html prototypes.
*
* Category chips are `.cat-chip`, not `.chip`: marketing.css already owns
* `.chip` for the pricing/product mockups and the two want different type.
*/
:root{
--font-read:"Source Serif 4",Georgia,serif;
}
.wrap-narrow{max-width:760px;margin:0 auto;padding:0 24px}
/* ---------- reading progress ---------- */
.progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--spine);z-index:80;transition:width .1s linear}
/* ---------- listing hero ---------- */
.blog-hero{padding:64px 0 34px}
.blog-hero h1{font-size:clamp(2.2rem,4.6vw,3.3rem);margin-top:14px}
.blog-hero .lede{margin-top:16px}
/* ---------- category filter ---------- */
.filters{display:flex;gap:9px;flex-wrap:wrap;padding:8px 0 34px}
.filters a{font-size:.86rem;font-weight:500;padding:8px 16px;border-radius:99px;
border:1.5px solid var(--line);color:var(--slate);background:#fff;transition:.15s}
.filters a:hover{border-color:var(--pine);color:var(--pine)}
.filters a[aria-current="true"]{background:var(--pine);border-color:var(--pine);color:#fff}
/* ---------- cover art ----------
Generated in CSS and tinted by category, so a post without an uploaded
image still looks deliberate. An uploaded cover renders as an ![]()
inside .cover and simply sits on top of the gradient. */
.cover{position:relative;overflow:hidden;background:var(--pine-deep);display:grid;place-items:center}
.cover::before{content:"";position:absolute;inset:0;
background:radial-gradient(420px 260px at 22% 12%,rgba(20,184,166,.42),transparent 62%),
radial-gradient(380px 300px at 84% 90%,rgba(37,99,235,.40),transparent 60%)}
.cover::after{content:"";position:absolute;left:34px;top:-20px;bottom:-20px;width:4px;background:var(--spine);opacity:.75}
.cover[data-cat="Product"]::before{background:radial-gradient(420px 260px at 22% 12%,rgba(20,184,166,.5),transparent 62%),radial-gradient(380px 300px at 84% 90%,rgba(11,107,78,.5),transparent 60%)}
.cover[data-cat="Payroll"]::before{background:radial-gradient(420px 260px at 22% 12%,rgba(185,127,20,.42),transparent 62%),radial-gradient(380px 300px at 84% 90%,rgba(37,99,235,.36),transparent 60%)}
.cover[data-cat="Culture"]::before{background:radial-gradient(420px 260px at 22% 12%,rgba(139,92,246,.42),transparent 62%),radial-gradient(380px 300px at 84% 90%,rgba(20,184,166,.36),transparent 60%)}
.cover[data-cat="AI at work"]::before{background:radial-gradient(420px 260px at 22% 12%,rgba(37,99,235,.46),transparent 62%),radial-gradient(380px 300px at 84% 90%,rgba(20,184,166,.42),transparent 60%)}
.cover-mark{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:10px;
font-family:var(--font-mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.cover-mark svg{opacity:.9}
.cover-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2}
/* ---------- featured post ---------- */
.featured{display:grid;grid-template-columns:1.05fr .95fr;gap:0;background:#fff;border:1px solid var(--line);
border-radius:20px;overflow:hidden;box-shadow:var(--shadow-lg);margin-bottom:52px}
.featured .cover-link{display:block;min-height:340px}
.featured .cover{min-height:340px;height:100%}
.featured-body{padding:40px}
.featured-cta{margin-top:26px}
.post-card > a{display:block}
.featured-body h2{font-size:clamp(1.5rem,2.6vw,2.05rem);margin:14px 0 12px}
.featured-body p{color:var(--slate);font-size:1rem}
.flag{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:.66rem;
letter-spacing:.13em;text-transform:uppercase;color:var(--amber);background:var(--amber-bg);
padding:5px 12px;border-radius:99px;font-weight:500}
/* ---------- post grid ---------- */
.post-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
.post-card{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;
display:flex;flex-direction:column;box-shadow:var(--shadow);transition:transform .18s,box-shadow .18s}
.post-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.post-card .cover{height:170px}
.post-card-body{padding:22px;display:flex;flex-direction:column;flex:1}
.post-card h3{font-size:1.14rem;line-height:1.28;margin:12px 0 9px}
.post-card p{font-size:.9rem;color:var(--slate);flex:1}
.cat-chip{display:inline-block;font-size:.68rem;font-weight:600;padding:4px 11px;border-radius:99px;
background:var(--mist);color:var(--pine);letter-spacing:.02em}
.byline{display:flex;align-items:center;gap:10px;margin-top:18px;font-size:.8rem;color:var(--slate);flex-wrap:wrap}
.avatar{width:28px;height:28px;border-radius:50%;flex:none;display:grid;place-items:center;
color:#fff;font-size:.7rem;font-weight:700;font-family:var(--font-mono)}
.byline b{font-weight:600;color:var(--ink)}
.dot{opacity:.5}
/* ---------- pagination ---------- */
.pager{display:flex;justify-content:center;align-items:center;gap:6px;margin-top:52px}
.pager a,.pager span{min-width:40px;height:40px;display:grid;place-items:center;padding:0 12px;
border-radius:10px;font-size:.9rem;font-weight:500;color:var(--slate);border:1.5px solid transparent}
.pager a:hover{background:#fff;border-color:var(--line);color:var(--ink)}
.pager .on{background:var(--pine);color:#fff}
.pager .gap{pointer-events:none}
/* ---------- closing band ---------- */
.blog-band{padding:56px 48px;margin-top:72px}
.blog-band p{color:#B9CFC6;margin-top:12px;position:relative;max-width:46ch}
.blog-band .band-actions{margin-top:26px;position:relative;display:flex;gap:12px;flex-wrap:wrap}
.blog-band .btn-outline{border-color:rgba(255,255,255,.3);color:#fff;background:transparent}
.blog-band .btn-outline:hover{border-color:#fff}
/* ============================================================
ARTICLE
============================================================ */
.crumbs{font-size:.84rem;color:var(--slate);padding:26px 0 0}
.crumbs a:hover{color:var(--pine)}
.crumbs span{opacity:.5;margin:0 7px}
.article-head{padding:22px 0 30px}
.article-head h1{font-size:clamp(2.1rem,4.4vw,3.1rem);margin:16px 0 18px;letter-spacing:-.028em}
.article-head .lede{font-size:1.15rem;line-height:1.55}
.article-meta{display:flex;align-items:center;gap:12px;margin-top:26px;padding-top:22px;
border-top:1px solid var(--line);font-size:.88rem;color:var(--slate);flex-wrap:wrap}
.article-meta .avatar{width:40px;height:40px;font-size:.85rem}
.article-meta b{color:var(--ink);font-weight:600;display:block;font-size:.92rem}
.article-cover{height:min(420px,46vw);border-radius:20px;overflow:hidden;margin:8px 0 44px;box-shadow:var(--shadow-lg)}
/* prose + sticky sidebar. minmax(0,1fr) on the prose track: a bare 1fr has
a min-content floor, and one long would push the page sideways. */
.article-layout{display:grid;grid-template-columns:minmax(0,1fr) 232px;gap:56px;align-items:start}
.toc{position:sticky;top:96px}
.toc h4{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
color:var(--slate);font-weight:500;margin-bottom:14px}
.toc ul{display:grid;gap:2px;border-left:2px solid var(--line)}
.toc a{display:block;padding:7px 0 7px 16px;font-size:.86rem;color:var(--slate);margin-left:-2px;
border-left:2px solid transparent;line-height:1.4}
.toc a:hover{color:var(--ink)}
.toc a.on{color:var(--pine);border-left-color:var(--pine);font-weight:500}
.share{margin-top:32px;padding-top:24px;border-top:1px solid var(--line)}
.share h4{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
color:var(--slate);font-weight:500;margin-bottom:14px}
.share-row{display:flex;gap:8px;margin-top:12px}
.share-row button,.share-row a{width:38px;height:38px;border-radius:10px;border:1.5px solid var(--line);
background:#fff;display:grid;place-items:center;color:var(--slate);cursor:pointer;transition:.15s}
.share-row button:hover,.share-row a:hover{border-color:var(--pine);color:var(--pine)}
.share-row .copied{border-color:var(--pine);color:var(--pine)}
/* ---------- prose ---------- */
.prose{font-family:var(--font-read);font-size:1.16rem;line-height:1.72;color:#1B2E26;max-width:68ch}
.prose > * + *{margin-top:1.35em}
.prose h2{font-family:var(--font-display);font-size:1.72rem;line-height:1.22;margin-top:2.2em;letter-spacing:-.02em;scroll-margin-top:96px}
.prose h3{font-family:var(--font-display);font-size:1.28rem;line-height:1.3;margin-top:1.8em;scroll-margin-top:96px}
.prose a{color:var(--pine);text-decoration:underline;text-underline-offset:3px;font-weight:600}
.prose strong{font-weight:700;color:var(--ink)}
.prose ul,.prose ol{padding-left:1.4em;display:grid;gap:.5em}
.prose ul li{list-style:disc}
.prose ol li{list-style:decimal}
.prose li::marker{color:var(--pine)}
.prose blockquote{border-left:4px solid;border-image:var(--spine) 1;padding:4px 0 4px 26px;
font-family:var(--font-display);font-size:1.3rem;line-height:1.42;font-weight:600;
letter-spacing:-.012em;color:var(--ink);margin:1.8em 0}
.prose blockquote p{margin:0}
.prose code{font-family:var(--font-mono);font-size:.86em;background:var(--mist);
padding:2px 7px;border-radius:6px;color:var(--pine-dark)}
.prose pre{background:var(--pine-deep);color:#CFE3DA;padding:20px 22px;border-radius:14px;
overflow-x:auto;font-family:var(--font-mono);font-size:.86rem;line-height:1.6}
.prose pre code{background:none;padding:0;color:inherit}
.prose hr{border:0;height:1px;background:var(--line);margin:2.6em 0}
.prose figure{margin:2em 0}
.prose figcaption{font-family:var(--font-body);font-size:.84rem;color:var(--slate);margin-top:10px;text-align:center}
.prose img{border-radius:12px}
.prose-scroll,.prose table{width:100%}
.prose table{border-collapse:collapse;font-family:var(--font-body);font-size:.94rem}
.prose th{text-align:left;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;
text-transform:uppercase;color:var(--slate);padding:10px 12px;border-bottom:2px solid var(--line);font-weight:500}
.prose td{padding:11px 12px;border-bottom:1px solid var(--line)}
.prose .callout{background:#fff;border:1px solid var(--line);border-left:4px solid var(--pine);
border-radius:12px;padding:20px 24px;font-family:var(--font-body);font-size:1rem;line-height:1.6;
box-shadow:var(--shadow)}
.prose .callout b{display:block;font-family:var(--font-display);font-size:.95rem;margin-bottom:6px;letter-spacing:-.01em}
/* ---------- author bio ---------- */
.author-box{display:flex;gap:18px;align-items:flex-start;background:#fff;border:1px solid var(--line);
border-radius:18px;padding:26px;margin-top:56px;box-shadow:var(--shadow)}
.author-box .avatar{width:54px;height:54px;font-size:1.05rem}
.author-box h4{font-family:var(--font-display);font-size:1.05rem;margin-bottom:4px;letter-spacing:-.01em}
.author-box .role{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.1em;
text-transform:uppercase;color:var(--slate);margin-bottom:10px}
.author-box p{font-size:.92rem;color:var(--slate)}
/* ---------- related ---------- */
.related{margin-top:76px;padding:48px 0 0;border-top:1px solid var(--line)}
.related h2{font-size:1.5rem;margin-bottom:26px}
/* ---------- empty state ---------- */
.empty{text-align:center;padding:70px 24px;background:#fff;border:1px dashed var(--line);border-radius:18px}
.empty h3{font-size:1.2rem;margin-bottom:8px}
.empty p{color:var(--slate);font-size:.94rem}
/* ---------- responsive ---------- */
@media (max-width:1020px){
.article-layout{grid-template-columns:1fr;gap:0}
.toc{display:none}
.share{border-top:0;margin-top:40px;padding-top:0}
}
@media (max-width:900px){
.post-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.featured{grid-template-columns:1fr}
.featured .cover,.featured .cover-link{min-height:220px}
.featured-body{padding:28px}
.blog-band{padding:40px 26px}
}
@media (max-width:620px){
.post-grid{grid-template-columns:minmax(0,1fr)}
.prose{font-size:1.08rem}
.article-cover{height:220px;border-radius:14px}
}