/* Page styles from the original design (page-blog). Generated by tools/seed/services.php. */
.blog-hero{padding:140px 0 12px}
.blog-hero h1{font-size:clamp(2.6rem,6vw,5rem);letter-spacing:-.05em;max-width:14ch}
.blog-hero .sub{max-width:62ch;margin-top:18px;color:var(--ink-2);font-size:clamp(1.05rem,1.4vw,1.22rem)}
.queue{list-style:none;display:grid;gap:10px}
.queue li{background:var(--panel);border-radius:var(--r-md);padding:14px 16px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:baseline}
.queue b{font-weight:500;letter-spacing:-.02em}
.queue span{color:var(--ink-2);font-size:15px}

/* ==========================================================================
   Blog index: topic filter, the newest essay as a featured card, then a grid.
   Solid paper surfaces (no glass on an empty page); the blue is used once, on the
   featured card's "Read the essay" control.
   ========================================================================== */
body.blog main.ix-main > .sec.bx-index{margin-top:clamp(48px,6vw,88px)}
.bx-h{margin-bottom:clamp(18px,2.4vw,28px)}
.bx-h h2{font-size:clamp(1.75rem,3vw,2.5rem)}

/* Topic filter (links, no script) */
.bx-filter{margin-bottom:clamp(20px,2.6vw,32px)}
.bx-filter ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.bx-filter a{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:8px 16px;border-radius:999px;background:var(--panel);color:var(--ink);font-size:15px;font-weight:500;letter-spacing:-.015em;line-height:1.2;transition:background-color .2s,color .2s}
.bx-filter a:hover{background:#ddd8ce}
.bx-filter a[aria-current="page"]{background:var(--ink);color:#fff}
.bx-n{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:rgb(255 255 255/.7);color:var(--ink-2);font-size:13px;font-weight:550;font-variant-numeric:tabular-nums}
.bx-filter a[aria-current="page"] .bx-n{background:rgb(255 255 255/.18);color:#fff}

/* Shared card parts */
.bx-chip{display:inline-flex;align-items:center;align-self:flex-start;min-height:28px;padding:4px 12px;border-radius:999px;background:var(--card);color:var(--ink);font-size:14px;font-weight:500;letter-spacing:-.01em;line-height:1.2;transition:background-color .35s var(--ease)}
.bx-foot{display:flex;flex-wrap:wrap;align-items:center;color:var(--ink-2);font-size:14px;font-weight:500;line-height:1.4}
.bx-foot > * + *::before{content:"";display:inline-block;width:3px;height:3px;margin:0 10px;border-radius:50%;background:currentColor;vertical-align:middle;transform:translateY(-2px)}
/* Readability layer sets every time element to 13px; card meta keeps one size. */
body.ix-rd.blog main .bx-index .bx-foot time{font-size:14px !important;line-height:1.4}

/* Featured: the newest essay */
.bx-feat{display:grid;gap:clamp(24px,3.4vw,48px);padding:clamp(24px,3.4vw,44px);border-radius:var(--r-xl);background:var(--card);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink);transition:box-shadow .35s var(--ease),transform .35s var(--ease)}
.bx-feat:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1px rgb(22 21 19/.16),0 18px 40px -26px rgb(22 21 19/.35)}
.bx-feat .bx-chip{background:var(--panel)}
.bx-feat-main{display:flex;flex-direction:column;gap:16px;min-width:0}
.bx-top{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.bx-new{color:var(--ink-2);font-size:14px;font-weight:500}
.bx-feat-t{font-size:clamp(1.85rem,3.4vw,2.9rem);line-height:1.04;letter-spacing:-.04em;max-width:18ch;text-wrap:balance}
.bx-feat-p{max-width:58ch;color:var(--ink-2);font-size:1.0625rem;line-height:1.55;text-wrap:pretty}
.bx-go{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;margin-top:auto;padding:12px 18px;border-radius:999px;background:var(--lime-2);color:#fff;font-size:15px;font-weight:550;letter-spacing:-.015em;transition:background-color .25s}
.bx-go::after{content:"";width:7px;height:7px;border:solid currentColor;border-width:1.5px 1.5px 0 0;transform:rotate(45deg)}
.bx-feat:hover .bx-go{background:#163eae}
.bx-feat-fig img{width:100%;height:100%;min-height:240px;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-lg);background:var(--panel)}
.bx-feat-kp{display:flex;flex-direction:column;align-self:start;padding:clamp(20px,2.4vw,28px);border-radius:var(--r-lg);background:var(--panel)}
.bx-kp-h{font-size:15px;font-weight:550;letter-spacing:-.015em;padding-bottom:6px}
.bx-kp{position:relative;padding:11px 0 11px 22px;border-top:1px solid rgb(22 21 19/.12);color:var(--ink);font-size:15px;line-height:1.45}
.bx-kp::before{content:"";position:absolute;left:0;top:calc(11px + .725em - 4px);width:8px;height:8px;border-radius:2px;background:var(--lime-2)}
@media (min-width:1000px){
  .bx-feat{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:stretch}
}

/* The rest: a grid of equal cards */
.bx-grid{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:12px}
.bx-grid > li{display:flex}
.bx-card{display:flex;flex:1;flex-direction:column;gap:12px;padding:22px;border-radius:var(--r-lg);background:var(--panel);color:var(--ink);transition:transform .35s var(--ease),background-color .35s var(--ease)}
.bx-card:hover{transform:translateY(-4px);background:var(--card)}
.bx-card:hover .bx-chip{background:var(--panel)}
.bx-card-t{margin-top:4px;font-size:1.3rem;line-height:1.15;letter-spacing:-.025em;text-wrap:balance}
.bx-card-p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;color:var(--ink-2);font-size:15px;line-height:1.5}
.bx-card .bx-foot{margin-top:auto;padding-top:12px;border-top:1px solid rgb(22 21 19/.12)}
@media (max-width:1023px){.bx-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.bx-grid{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){
  .bx-feat,.bx-card,.bx-filter a,.bx-go{transition:none}
  .bx-feat:hover,.bx-card:hover{transform:none}
}
/* QA-FINAL 11: no orphan slot in the last row. Six tracks at three-up: a last row of two splits it
   in half, a lone last card takes the row; at two-up a lone last card takes the row. */
@media (min-width:1024px){
  .bx-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
  .bx-grid > li{grid-column:span 2}
  .bx-grid > li:nth-last-child(2):nth-child(3n+1),.bx-grid > li:last-child:nth-child(3n+2){grid-column:span 3}
  .bx-grid > li:last-child:nth-child(3n+1){grid-column:1 / -1}
}
@media (min-width:641px) and (max-width:1023px){.bx-grid > li:last-child:nth-child(odd){grid-column:1 / -1}}