/* Blog index, blog posts — plus the pieces changelog pages share (illustrations, page header, prose, motion). */

/* ---------- Illustrations (inline SVG, see tools/gen-blog.mjs) ---------- */
.art { width: 100%; height: 100%; display: block; overflow: visible; }
.art * { vector-effect: non-scaling-stroke; }
.art .g1 { stroke: rgba(16,18,19,.045); stroke-width: 1; fill: none; }
.art .g2 { stroke: rgba(16,18,19,.075); stroke-width: 1; fill: none; }
.art .brkt { stroke: var(--ink); stroke-width: 1.5; fill: none; }
.art .ln { stroke: #B9BEC4; stroke-width: 1; }
.art .ln--dot { stroke: #C6CACF; stroke-dasharray: 1.5 3; }
.art .ln--faint { stroke: #DADDE0; fill: none; }
.art .ln--pk { stroke: #E6A8AF; stroke-width: 1; fill: none; }
.art .ln--lane { stroke: #CCD0D4; fill: none; }
.art .ln--floor { stroke: #DEE1E4; fill: none; }
.art .ln--dash { stroke: var(--ink); stroke-dasharray: 4 3; }
.art .ln--o { stroke: var(--signal); stroke-width: 1.2; fill: none; }
.art .art--feat .ln--o, .art--feat .ln--o { stroke-dasharray: 5 4; stroke-width: 1.4; }
.art--bars .ln--o { stroke-dasharray: 5 4; }
.art .ln--k { stroke: var(--ink); stroke-width: 1; fill: none; }
.art .o { fill: var(--signal); }
.art .k { fill: var(--ink); }
.art .gr { fill: #DADDE0; }
.art .gr2 { fill: #C6CACF; }
.art .gr3 { fill: #E0E3E5; }
.art .gk { fill: #767D85; }
.art .box { stroke: var(--ink); stroke-width: 1; }
.art .box--o { stroke: var(--signal); }
.art .box--idle { stroke: #DADDE0; }
.art .iso { stroke: var(--ink); stroke-width: 1; stroke-linejoin: round; }
.art .bar rect { stroke: var(--ink); stroke-width: 1; }
.art .bar__o { stroke: var(--signal) !important; }

/* Framed illustration panels */
.hero-wrap { padding-top: 32px; }
.hero-art { margin: 0 var(--pad); aspect-ratio: 1056 / 658; border: 1px solid var(--line); background: var(--bg); }

/* ---------- Motion: heading wipes, panel reveals, bar growth ---------- */
.js .wipe { clip-path: inset(-0.25em 100% -0.3em -0.1em); transition: clip-path 1.1s var(--ease); transition-delay: var(--d, 0s); }
.js .wipe.is-in { clip-path: inset(-0.25em -0.1em -0.3em -0.1em); }
.js .panel-in { clip-path: inset(0 0 100% 0); transition: clip-path 1.3s var(--ease); }
.js .panel-in.is-in { clip-path: inset(0 0 0 0); }
.js .feat__art { clip-path: inset(0 100% 0 0); transition: clip-path 1.2s var(--ease); }
.js .feat__art.is-in { clip-path: inset(0 0 0 0); }
.js .feat__art .bar { transform: scaleY(0); transform-box: fill-box; transform-origin: 50% 100%; transition: transform .9s var(--ease); transition-delay: calc(.35s + var(--i) * 70ms); }
.js .feat__art.is-in .bar { transform: none; }

/* Dashed underline that fills red from the left on hover */
.link.u-draw {
  background-image: repeating-linear-gradient(90deg, var(--signal) 0 3px, transparent 3px 6px), repeating-linear-gradient(90deg, rgba(16,18,19,.45) 0 3px, transparent 3px 6px);
  background-size: 0% 1px, 100% 1px; background-position: 0 100%, 0 100%; background-repeat: no-repeat;
  transition: background-size .55s var(--ease);
}
.link.u-draw:hover { color: var(--ink); background-size: 100% 1px, 100% 1px; }
.link.u-draw:hover .arr { color: var(--signal); }

/* Meta line: LINA PARK ▪ SEP 15, 2026 ▪ 8 MIN READ */
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font: 500 12px/1.4 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.meta__a { color: var(--ink); }
.sq { display: inline-block; width: 4px; height: 4px; background: #C6CACF; flex: none; }
.chip--ink::before { background: var(--ink); }

/* ---------- Blog index ---------- */
.bl-top__in { padding: 113px var(--pad) 63px; }
.bl-h1 { margin-top: 24px; font: 700 56px/62px var(--sans); letter-spacing: -0.03em; text-wrap: balance; max-width: 560px; }
.filt { display: inline-flex; flex-wrap: wrap; margin-top: 62px; border: 1px solid #A4AAB1; max-width: 100%; }
.filt__b {
  display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 24px; white-space: nowrap;
  font: 500 15px/1 var(--sans); color: var(--muted);
  border-left: 1px solid #A4AAB1; transition: color .2s, background-color .2s;
}
.filt__b:first-child { border-left: 0; }
.filt__b:hover { color: var(--ink); }
.filt__b.is-on { background: #fff; color: var(--ink); padding: 0 16px 0 14px; }
.filt__b.is-on::before { content: ''; width: 6px; height: 6px; background: var(--signal); }

.feat { display: grid; grid-template-columns: 520px 1fr; min-height: 440px; }
.feat__art { display: block; border-right: 1px solid var(--line); }
.feat__art .art { height: 100%; }
.feat__body { align-self: center; padding: 40px var(--pad) 40px 40px; }
.feat__h { margin-top: 22px; font: 600 40px/1.1 var(--sans); letter-spacing: -0.025em; text-wrap: balance; max-width: 400px; }
.feat__h a:hover { color: var(--signal); }
.feat__p { margin-top: 30px; max-width: 520px; font-size: 16px; line-height: 1.5; color: var(--muted); }
.feat__body .meta { margin-top: 22px; }
.feat__body .link { margin-top: 44px; }

/* Cards (index grid + "More from the blog") */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); }
.card {
  position: relative; display: flex; flex-direction: column; min-height: 525px; padding: 23px 24px 24px;
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: background-color .3s var(--ease);
}
.card:nth-child(3n) { border-right: 0; }
.card__art { aspect-ratio: 325 / 202; border: 1px solid var(--line); background: var(--bg); }
.card__row { display: flex; align-items: center; justify-content: space-between; margin-top: 31px; }
.card__min { color: var(--muted); }
.card__h { margin-top: 20px; font: 600 22px/1.25 var(--sans); letter-spacing: -0.015em; text-wrap: balance; }
.card__p { margin-top: 18px; font-size: 14px; line-height: 1.5; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card__date { margin-top: auto; padding-top: 32px; color: var(--muted); }
.card .cb { position: absolute; width: 10px; height: 10px; border: 0 solid var(--ink); opacity: 0; transition: opacity .25s var(--ease); pointer-events: none; }
.card .cb:nth-of-type(1) { top: 8px; left: 8px; border-top-width: 1.5px; border-left-width: 1.5px; }
.card .cb:nth-of-type(2) { top: 8px; right: 8px; border-top-width: 1.5px; border-right-width: 1.5px; }
.card .cb:nth-of-type(3) { bottom: 8px; left: 8px; border-bottom-width: 1.5px; border-left-width: 1.5px; }
.card .cb:nth-of-type(4) { bottom: 8px; right: 8px; border-bottom-width: 1.5px; border-right-width: 1.5px; }
.card:hover, .card:focus-visible { background: #fff; }
.card:hover .cb, .card:focus-visible .cb { opacity: 1; }
.card[hidden] { display: none; }
.bl-grid .wrap, .more .wrap { padding-bottom: 44px; }
.cards__none { padding: 48px var(--pad); color: var(--muted); }

/* ---------- Post / entry header ---------- */
.ph { padding: 72px var(--pad) 72px; }
.back { display: flex; align-items: center; width: max-content; min-height: 44px; font-size: 15px; font-weight: 500; color: var(--muted); transition: color .2s; }
.back:hover { color: var(--signal); }
.ph > .chip { display: flex; width: max-content; }
.ph > .chip, .ph__meta { margin-top: 48px; }
.ph__meta { display: flex; align-items: center; gap: 14px; }
.ph__meta .mono-xs { color: var(--muted); }
.ph__meta .ph__v { color: var(--ink); }
.ph__h { margin-top: 28px; font: 700 56px/62px var(--sans); letter-spacing: -0.03em; text-wrap: balance; max-width: 760px; }
.ph__lede { margin-top: 36px; max-width: 640px; font-size: 20px; line-height: 1.5; letter-spacing: -0.01em; color: var(--muted); }
.ph .meta { margin-top: 40px; }

/* ---------- Post body with sticky contents ---------- */
.post { display: grid; grid-template-columns: minmax(180px, 304px) minmax(0, 680px); padding: 86px var(--pad) 112px; }
.toc { position: sticky; top: 40px; align-self: start; padding-right: 24px; }
.toc__t { color: var(--muted); }
.toc__l { position: relative; margin-top: 22px; max-width: 220px; }
.toc__l::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--line); }
.toc__l li { position: relative; }
.toc__l a { display: flex; gap: 10px; padding: 5px 0 5px 28px; font-size: 14px; line-height: 1.4; color: var(--muted); transition: color .2s; }
.toc__l a:hover { color: var(--ink); }
.toc__l li::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 1.5px; background: var(--ink); transform: scaleY(0); transition: transform .35s var(--ease); }
.toc__l li::after { content: ''; position: absolute; left: 13px; top: 13px; width: 6px; height: 6px; background: var(--signal); transform: scale(0); transition: transform .3s var(--ease); }
.toc__l li.is-on a { color: var(--ink); }
.toc__l li.is-on::before { transform: none; }
.toc__l li.is-on::after { transform: none; }

/* Prose */
.prose { font-size: 18px; line-height: 1.71; color: var(--ink-2); letter-spacing: -0.006em; }
.prose > * + * { margin-top: 14px; }
.prose h2 { margin-top: 52px; font: 600 32px/1.2 var(--sans); letter-spacing: -0.025em; color: var(--ink); scroll-margin-top: 40px; }
.prose h3 { margin-top: 36px; font: 600 22px/1.3 var(--sans); letter-spacing: -0.015em; color: var(--ink); }
.prose h2 + *, .prose h3 + * { margin-top: 24px; }
.prose ul { margin-top: 0; }
.prose p + ul { margin-top: 0; }
.prose li { position: relative; padding-left: 24px; }
.prose li::before { content: '•'; position: absolute; left: 2px; color: var(--ink-2); }
.prose code { font: 400 15px/1 var(--mono); padding: 3px 6px; background: #fff; border: 1px solid var(--line); color: var(--ink); white-space: nowrap; }
.prose blockquote { margin: 28px 0; padding: 2px 0 2px 24px; border-left: 2px solid var(--signal); font-size: 17px; font-style: italic; color: var(--muted); }
.prose blockquote + * { margin-top: 0; }
.prose--center { max-width: 680px; margin: 0 auto; padding: 72px 0 112px; }
.entry--plain .prose--center { padding-top: 96px; }

.code { margin-top: 12px; background: var(--dark); color: #ECEDEF; }
.prose .code + * { margin-top: 36px; }
.code__tab { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 20px; border-bottom: 1px solid var(--dark-line); font: 500 12px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--dark-muted); }
.code__tab::before { content: ''; width: 6px; height: 6px; background: var(--signal); }
.code pre { margin: 0; padding: 24px 20px 26px; overflow-x: auto; font: 500 14px/1.75 var(--mono); letter-spacing: 0; }
.prose .code code, .code code { font: inherit; background: none; border: 0; padding: 0; color: inherit; white-space: pre; }

/* More from the blog */
.more__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 96px var(--pad) 40px; border-bottom: 1px solid var(--line); }
.more__h { font: 600 32px/1.15 var(--sans); letter-spacing: -0.025em; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .feat { grid-template-columns: 46% 1fr; }
  .post { grid-template-columns: 220px minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .bl-top__in { padding: 72px var(--pad) 48px; }
  .bl-h1 { font-size: 40px; line-height: 46px; }
  .filt { margin-top: 40px; display: flex; width: max-content; }
  .filt__b { padding: 0 16px; }
  .feat { grid-template-columns: 1fr; min-height: 0; }
  .feat__art { border-right: 0; border-bottom: 1px solid var(--line); aspect-ratio: 520 / 440; }
  .feat__body { padding: 32px var(--pad) 40px; }
  .feat__h { font-size: 32px; }
  .cards { grid-template-columns: 1fr; }
  .card { min-height: 0; border-right: 0; padding: 20px; }
  .card__date { padding-top: 24px; }
  .ph { padding: 48px var(--pad); }
  .ph > .chip, .ph__meta { margin-top: 32px; }
  .ph__meta { flex-wrap: wrap; gap: 10px; }
  .ph__h { font-size: 40px; line-height: 46px; margin-top: 20px; }
  .ph__lede { font-size: 18px; margin-top: 24px; }
  .ph .meta { margin-top: 28px; }
  .hero-wrap { padding-top: 20px; }
  .hero-art { margin: 0 var(--pad); }
  .post { grid-template-columns: minmax(0, 1fr); padding: 48px var(--pad) 72px; }
  .toc { position: static; padding: 0 0 32px; margin-bottom: 32px; border-bottom: 1px solid var(--line); }
  .toc__l { max-width: none; }
  .prose { font-size: 17px; }
  .prose h2 { font-size: 26px; margin-top: 40px; }
  .prose code { white-space: normal; word-break: break-word; }
  .prose--center { padding: 48px var(--pad) 72px; }
  .entry--plain .prose--center { padding-top: 48px; }
  .code pre { font-size: 13px; padding: 20px 16px; }
  .more__head { padding: 64px var(--pad) 28px; flex-wrap: wrap; }
  .more__h { font-size: 28px; }
}

/* Small renditions (cards): the drawing grid and brackets read lighter, as in the recording */
.card__art .art .g1 { stroke: rgba(16,18,19,.028); }
.card__art .art .g2 { stroke: rgba(16,18,19,.05); }
.card__art .art .brkt { stroke: #888F97; stroke-width: 1; }