/* ===========================================================================
   Blog — deploy 011. Loaded by the blog controllers only.
   Taken from concepts/blog.html and concepts/blog-post.html.
   =========================================================================== */

/* ---------- listing ---------- */
.posts3{display:grid; gap:var(--s-5); grid-template-columns:1fr}
@media(min-width:640px){.posts3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1024px){.posts3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.pcard{display:flex; flex-direction:column; border:1px solid var(--ink-700);
  border-radius:var(--r-card); overflow:hidden; background:var(--ink-900)}
.pcard:hover{border-color:rgba(60,180,252,.45)}
.pcard__media{aspect-ratio:16/6; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(150deg,var(--ink-600),var(--ink-800)); color:var(--spark-cyan);
  font-size:2rem}
.pcard:nth-child(2n) .pcard__media{background:linear-gradient(150deg,var(--violet),var(--ink-800))}
.pcard:nth-child(3n) .pcard__media{background:linear-gradient(150deg,var(--magenta),var(--ink-800))}
.pcard__media--img{background:none; padding:0}
.pcard__media img{width:100%; height:100%; object-fit:cover; display:block}
.pcard__b{padding:var(--s-5); display:flex; flex-direction:column; gap:10px; flex:1}
.pcard__t{font-family:var(--font-body); text-transform:none; letter-spacing:normal;
  font-size:1.125rem; font-weight:700; line-height:1.32; color:var(--text-primary)}
.pcard__t a{color:inherit}
.pcard__t a:hover{color:var(--spark-cyan); text-decoration:none}
.pcard__x{font-size:.9375rem; color:var(--text-secondary); line-height:1.55}
.pcard__go{margin-top:auto; padding-top:var(--s-3); font-size:.875rem; font-weight:700;
  color:var(--spark-cyan)}

/* ---------- a single post ---------- */
.arthead{padding-bottom:var(--s-6); border-bottom:1px solid var(--ink-700); margin-bottom:var(--s-6)}
.arthead h1{font-size:clamp(2rem,1.3rem + 2.6vw,3.25rem); line-height:1.02; margin-bottom:var(--s-4)}
.arthead__x{font-size:1.125rem; line-height:1.55; color:var(--text-secondary); max-width:60ch;
  margin-top:var(--s-4)}
.artmeta{font-size:.8125rem; text-transform:uppercase; letter-spacing:.06em;
  color:var(--text-tertiary)}
.arthero{display:block; width:100%; height:auto; border:1px solid var(--ink-700);
  border-radius:var(--r-tile); margin-bottom:var(--s-7)}

.article{font-size:1.0625rem; line-height:1.7; color:var(--text-secondary); max-width:68ch}
.article > * + *{margin-top:var(--s-5)}
.article h2{font-family:var(--font-display); text-transform:uppercase; letter-spacing:.01em;
  font-size:clamp(1.5rem,1.1rem + 1.4vw,2rem); color:var(--text-primary); margin-top:var(--s-7)}
.article h3,.article h4{font-family:var(--font-body); text-transform:none; letter-spacing:normal;
  font-size:1.25rem; font-weight:700; color:var(--text-primary); margin-top:var(--s-6)}
.article strong,.article b{color:var(--text-primary)}
.article ul,.article ol{padding-left:1.15em; margin-left:0}
.article li + li{margin-top:10px}
.article li::marker{color:var(--violet)}
.article a{text-decoration:underline; text-underline-offset:2px}
.article img{max-width:100%; height:auto; border-radius:var(--r-card)}
.article blockquote{margin:0; padding:var(--s-5) var(--s-6); border-left:3px solid var(--violet);
  background:var(--ink-800); border-radius:0 var(--r-card) var(--r-card) 0}
/* Word imports arrive full of inline styles that fight the palette. */
.article [style*="color"]{color:inherit !important}
.article [style*="background"]{background:none !important}

.artnav{display:grid; gap:var(--s-4); margin-top:var(--s-8); padding-top:var(--s-6);
  border-top:1px solid var(--ink-700)}
@media(min-width:768px){.artnav{grid-template-columns:1fr 1fr; gap:var(--s-6)}}
.artnav a{display:block; color:var(--text-primary); font-weight:700; line-height:1.35}
.artnav a:hover{color:var(--spark-cyan); text-decoration:none}
.artnav a span{display:block; font-size:.75rem; text-transform:uppercase; letter-spacing:.06em;
  color:var(--text-tertiary); font-weight:400; margin-bottom:6px}
@media(min-width:768px){.artnav__r{text-align:right}}

/* ---------- the newest post, leading the list ---------- */
.lead{display:grid; gap:var(--s-5); border:1px solid var(--ink-700); border-radius:var(--r-card);
  overflow:hidden; background:var(--ink-800); margin-bottom:var(--s-6); color:var(--text-primary)}
@media(min-width:900px){
  .lead{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:0; align-items:stretch}
}
.lead:hover{text-decoration:none; border-color:var(--spark-cyan); color:var(--text-primary)}
.lead__media{display:block; aspect-ratio:16/10; overflow:hidden}
@media(min-width:900px){.lead__media{aspect-ratio:auto; height:100%; min-height:280px}}
.lead__media img{width:100%; height:100%; object-fit:cover; display:block}
.lead__media--none{display:grid; place-items:center; font-size:2.5rem; color:var(--spark-cyan);
  background:linear-gradient(150deg,var(--ink-600),var(--ink-800))}
.lead__body{display:block; padding:var(--s-6)}
.lead__k{display:inline-block; font-size:.75rem; text-transform:uppercase; letter-spacing:.06em;
  font-weight:700; color:var(--text-on-accent); background:var(--fuse-gold);
  border-radius:var(--r-chip); padding:4px 9px; margin-bottom:var(--s-4)}
.lead__t{display:block; font-family:var(--font-display); font-weight:700; text-transform:uppercase;
  letter-spacing:.01em; font-size:clamp(1.5rem,1.1rem + 1.4vw,2rem); line-height:1.05}
.lead__x{display:block; color:var(--text-secondary); margin-top:var(--s-4); line-height:1.55}
.lead__m{display:block; font-size:.875rem; color:var(--text-tertiary); margin-top:var(--s-4)}

/* ---------- contents beside the article ---------- */
.artgrid{display:grid; gap:var(--s-6)}
@media(min-width:1000px){
  .artgrid--toc{grid-template-columns:minmax(0,1fr) 232px; gap:var(--s-8); align-items:start}
  .artgrid--toc .toc{position:sticky; top:143px}
  .artgrid--toc .article{grid-row:1}
  .artgrid--toc .toc{grid-column:2; grid-row:1}
}
.toc{border:1px solid var(--ink-700); border-radius:var(--r-card); background:var(--ink-800);
  padding:var(--s-5)}
.toc__h{font-size:.75rem; text-transform:uppercase; letter-spacing:.06em;
  color:var(--text-tertiary); margin-bottom:var(--s-3)}
.toc ol{list-style:none; margin:0; padding:0}
.toc li + li{margin-top:9px}
.toc a{font-size:.875rem; color:var(--text-secondary); line-height:1.4; display:block}
.toc a:hover{color:var(--spark-cyan); text-decoration:none}
.toc__l3{padding-left:var(--s-4)}
/* A heading landing under the sticky header would otherwise be hidden by it. */
.article h2[id],.article h3[id]{scroll-margin-top:150px}

/* ---------- who wrote it ---------- */
.authorbox{display:flex; gap:var(--s-5); align-items:flex-start; margin-top:var(--s-8);
  padding:var(--s-6); border:1px solid var(--ink-700); border-radius:var(--r-card);
  background:var(--ink-800)}
.authorbox i{color:var(--spark-cyan); font-size:1.5rem; flex:none; margin-top:2px}
.author__t{font-weight:700}
.author__s{font-size:.9375rem; color:var(--text-secondary); margin-top:var(--s-3);
  line-height:1.6; max-width:60ch}

/* ---------------------------------------------------------------------------
   Blog categories (deploy 089)
   Four came across from Journal; only the ones holding a live post appear.
   --------------------------------------------------------------------------- */
.catjump{display:flex; flex-wrap:wrap; gap:var(--s-2); margin-top:var(--s-5)}
.catjump a{display:inline-flex; align-items:baseline; gap:8px; padding:8px 14px;
  background:var(--ink-800); border:1px solid var(--ink-700); border-radius:var(--r-pill);
  font-family:var(--font-display); font-weight:600; font-size:1rem; letter-spacing:.01em;
  color:var(--text-secondary); text-decoration:none;
  transition:border-color var(--t-micro) ease-out, color var(--t-micro) ease-out}
.catjump a b{font-weight:700; font-size:.8125rem; color:var(--text-tertiary)}
.catjump a:hover{background:var(--ink-700); border-color:var(--fuse-gold);
  color:var(--fuse-gold); text-decoration:none}
.catjump a:hover b{color:var(--fuse-gold)}
.catjump a[aria-current="page"]{background:var(--fuse-gold); border-color:var(--fuse-gold);
  color:var(--ink-900)}
.catjump a[aria-current="page"] b{color:var(--ink-900)}

/* The categories a single article is filed under, above its title. */
.artcats{display:flex; flex-wrap:wrap; gap:var(--s-2); margin:0 0 var(--s-3)}
.artcats a{font-family:var(--font-display); font-weight:700; font-size:.8125rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--fuse-gold); text-decoration:none}
.artcats a:hover{color:var(--fuse-gold); text-decoration:underline}