/* ============================================================
   Dilinx blog theme
   Extends landing.css. Light editorial: wide margins, serif
   display, mono labels, one green accent, thin rules. Figures
   are inline SVG so they stay crisp, follow the palette, and
   can be animated without loading anything extra.
   (c) 2026 Dilinx Inc.
   ============================================================ */

.blog-wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

/* ---------- masthead ---------- */
.bhead { padding: 74px 0 34px; border-bottom: 1px solid var(--border); }
.bhead__eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--teal); margin: 0 0 14px; }
.bhead h1 { font-family: var(--disp); font-size: clamp(34px, 5vw, 52px); line-height: 1.08; letter-spacing: -.02em; margin: 0 0 14px; color: var(--text); }
.bhead__dek { font-size: 17px; line-height: 1.65; color: var(--muted); max-width: 62ch; margin: 0; }

/* ---------- index grid ---------- */
.blist { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 26px; padding: 44px 0 70px; }
.bcard { display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; text-decoration: none; color: inherit; box-shadow: var(--shadow-card); transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.bcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--border-2); }
.bcard__fig { background: linear-gradient(160deg, #f4f8ee, #eef4fa); border-bottom: 1px solid var(--border); padding: 20px 20px 12px; }
.bcard__fig svg { display: block; width: 100%; height: auto; }
.bcard__body { padding: 20px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.bcard__tag { font-family: var(--mono); font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--buy-dark, #5a9e00); margin-bottom: 10px; }
.bcard h2 { font-family: var(--disp); font-size: 21px; line-height: 1.25; margin: 0 0 9px; letter-spacing: -.01em; }
.bcard p { font-size: 14.5px; line-height: 1.6; color: var(--muted); margin: 0 0 16px; flex: 1; }
.bcard__meta { font-family: var(--mono); font-size: 11px; color: var(--dim); display: flex; gap: 10px; align-items: center; }
.bcard__meta i { width: 3px; height: 3px; border-radius: 50%; background: var(--dim); display: inline-block; font-style: normal; }

/* ---------- article ---------- */
.post { max-width: 720px; margin: 0 auto; padding: 0 24px; }
.post__head { padding: 62px 0 0; }
.post__kicker { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--teal); margin: 0 0 16px; }
.post__head h1 { font-family: var(--disp); font-size: clamp(30px, 4.4vw, 44px); line-height: 1.12; letter-spacing: -.02em; margin: 0 0 18px; }
.post__dek { font-size: 18px; line-height: 1.62; color: var(--muted); margin: 0 0 22px; }
.post__meta { font-family: var(--mono); font-size: 11.5px; color: var(--dim); display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding-bottom: 26px; border-bottom: 1px solid var(--border); }
.post__meta i { width: 3px; height: 3px; border-radius: 50%; background: var(--dim); display: inline-block; font-style: normal; }

.post__body { padding: 30px 0 10px; font-size: 16.5px; line-height: 1.72; color: #1e293b; }
.post__body > p { margin: 0 0 20px; }
.post__body h2 { font-family: var(--disp); font-size: 25px; line-height: 1.25; letter-spacing: -.01em; margin: 40px 0 14px; color: var(--text); }
.post__body h3 { font-size: 16px; font-weight: 700; margin: 28px 0 10px; color: var(--text); }
.post__body a { color: var(--teal); text-underline-offset: 2px; }
.post__body strong { font-weight: 600; color: var(--text); }
.post__body ul, .post__body ol { margin: 0 0 20px; padding-left: 22px; }
.post__body li { margin-bottom: 8px; }

/* pull quote / callout */
.note { border-left: 3px solid var(--buy); background: #f6faee; padding: 15px 18px; border-radius: 0 10px 10px 0; margin: 0 0 22px; font-size: 15.5px; line-height: 1.62; color: #33422a; }

/* equations, set in the display serif so they read as maths, not code */
/* line-height 1 here because the stacked .frac below creates a tall line box,
   which otherwise leaves a block of dead space under every fraction */
.eq { font-family: var(--disp); font-size: 19px; line-height: 1; text-align: center; padding: 20px 14px; margin: 0 0 8px; background: var(--bg-2); border: 1px solid var(--border); border-radius: 12px; color: var(--text); overflow-x: auto; }
.eq em { font-style: italic; }
.eq .op { color: var(--dim); padding: 0 4px; }
.eq-note { font-family: var(--mono); font-size: 11.5px; color: var(--dim); text-align: center; margin: 0 0 24px; }
.frac { display: inline-flex; flex-direction: column; vertical-align: middle; text-align: center; margin: 0 4px; line-height: 1.35; }
.frac span:first-child { border-bottom: 1px solid currentColor; padding: 0 7px 2px; }
.frac span:last-child { padding: 2px 7px 0; }

/* figures */
.fig { margin: 0 0 26px; }
.fig svg { display: block; width: 100%; height: auto; background: var(--panel); border: 1px solid var(--border); border-radius: 14px; }
.fig figcaption { font-family: var(--mono); font-size: 11.5px; line-height: 1.6; color: var(--dim); margin-top: 10px; text-align: center; }

/* tables */
.tbl-wrap { overflow-x: auto; margin: 0 0 12px; border: 1px solid var(--border); border-radius: 12px; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 14.5px; }
table.tbl caption { caption-side: bottom; font-family: var(--mono); font-size: 11.5px; color: var(--dim); padding: 10px 4px 0; text-align: left; }
table.tbl th, table.tbl td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--border); }
table.tbl thead th { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); background: var(--bg-2); font-weight: 500; }
table.tbl tbody tr:last-child td { border-bottom: 0; }
table.tbl td.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
table.tbl tr.hi td { background: #f6faee; font-weight: 600; }

/* SVG chart primitives, shared by every figure */
.c-axis { stroke: var(--border-2); stroke-width: 1; }
.c-grid { stroke: var(--border); stroke-width: 1; stroke-dasharray: 3 4; }
.c-lbl { font-family: var(--mono); font-size: 10px; fill: var(--dim); }
.c-lbl-b { font-family: var(--mono); font-size: 10.5px; fill: var(--muted); font-weight: 500; }
.c-line { fill: none; stroke: var(--buy); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.c-line-2 { fill: none; stroke: var(--teal); stroke-width: 2.5; stroke-dasharray: 5 4; stroke-linecap: round; }
.c-line-3 { fill: none; stroke: var(--sell); stroke-width: 2.5; stroke-linecap: round; }
.c-area { fill: url(#gGreen); }
.c-bar { fill: var(--buy); }
.c-bar-2 { fill: var(--teal); }
.c-bar-3 { fill: var(--sell); }
.c-dot { fill: var(--buy); }

/* article footer */
.post__foot { margin: 40px 0 0; padding: 26px 0 0; border-top: 1px solid var(--border); }
.post__license { font-family: var(--mono); font-size: 11.5px; line-height: 1.7; color: var(--dim); margin: 0 0 22px; }
.post__cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 22px 24px; background: var(--bg-2); border: 1px solid var(--border); border-radius: 14px; margin-bottom: 30px; }
.post__cta p { margin: 0; flex: 1 1 250px; font-size: 15px; line-height: 1.6; color: var(--muted); }
.post__cta .btn { flex: none; }

.post__more { padding: 0 0 70px; }
.post__more h2 { font-family: var(--disp); font-size: 19px; margin: 0 0 14px; }
.post__more ul { list-style: none; margin: 0; padding: 0; }
.post__more li { border-top: 1px solid var(--border); }
.post__more a { display: block; padding: 13px 0; text-decoration: none; color: var(--text); font-size: 15px; transition: color .15s; }
.post__more a:hover { color: var(--teal); }
.post__more span { font-family: var(--mono); font-size: 11px; color: var(--dim); display: block; margin-top: 2px; }

/* breadcrumb */
.crumb { font-family: var(--mono); font-size: 11.5px; color: var(--dim); padding: 22px 0 0; }
.crumb a { color: var(--dim); text-decoration: none; }
.crumb a:hover { color: var(--teal); text-decoration: underline; }
.crumb span { padding: 0 6px; opacity: .6; }

@media (max-width: 620px) {
  .bhead { padding: 52px 0 26px; }
  .post__head { padding: 44px 0 0; }
  .post__body { font-size: 16px; }
  .eq { font-size: 16.5px; }
}