/* ==========================================================================
   KO Research Labs — journal templates
   Loaded on blog pages only (home.php / archive.php, single.php).
   Builds on tokens and components in styles.css.
   ========================================================================== */

/* ---------- Generated covers (stand-in for featured images) ---------- */
.cover { position: relative; display: grid; place-items: center; overflow: hidden; border-radius: 12px; background: var(--cover-bg, #E0F2FE); }
.cover::before {
  content: ""; position: absolute; inset: 0; opacity: .7;
  background-image: linear-gradient(rgba(15, 23, 42, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(15, 23, 42, .06) 1px, transparent 1px);
  background-size: 24px 24px;
}
.cover svg { position: relative; width: 62%; height: auto; overflow: visible; transition: transform .8s var(--ease-out); }
.cover--ink { --cover-bg: #0F172A; }
.cover--ink::before { background-image: linear-gradient(rgba(148, 163, 184, .1) 1px, transparent 1px), linear-gradient(90deg, rgba(148, 163, 184, .1) 1px, transparent 1px); }
.cover--slate { --cover-bg: #E2E8F0; }
.cover--mist { --cover-bg: #EFF4FF; }
.cover--sky { --cover-bg: #DCE9FF; }
.cv-k { fill: none; stroke: var(--primary); stroke-width: 2; }
.cv-o { fill: none; stroke: var(--agent-o); stroke-width: 2; }
.cv-fill { fill: var(--primary); }
.cv-ink { fill: var(--ink); }
.cv-line { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cv-dash { fill: none; stroke: rgba(15, 23, 42, .3); stroke-width: 1.5; stroke-dasharray: 4 5; }
.cv-light { fill: none; stroke: #38BDF8; stroke-width: 2; stroke-linecap: round; }
.cv-light-fill { fill: #38BDF8; }
.cv-faint { fill: none; stroke: rgba(148, 163, 184, .45); stroke-width: 1.5; stroke-dasharray: 4 5; }

/* ---------- Post meta line ---------- */
.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0; font: 500 11px/1.4 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.post-meta__cat { color: var(--primary-ink); }
.post-meta span + span::before { content: "·"; margin-right: 12px; color: #94A3B8; }

/* ---------- Archive (home.php / archive.php) ---------- */
.journal { padding: clamp(40px, 6vw, 64px) 0 var(--sec); }
.journal__bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: clamp(32px, 5vw, 48px); }
.journal__bar .chips { min-width: 0; max-width: calc(100% + var(--gutter) * 2); flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--gutter) * -1); padding: 2px var(--gutter); }
.journal__bar .chips::-webkit-scrollbar { display: none; }
.journal__count { margin: 0; font: 500 12px var(--f-mono); letter-spacing: .04em; color: var(--muted); }

.post-feature {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center;
  margin-bottom: clamp(48px, 7vw, 80px); padding-bottom: clamp(48px, 7vw, 80px); border-bottom: 1px solid var(--rule);
}
.post-feature .cover { aspect-ratio: 4 / 3; border-radius: var(--radius); }
.post-feature__body { display: grid; gap: 18px; justify-items: start; }
.post-feature__label { display: inline-flex; align-items: center; gap: 8px; font: 500 11px var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.post-feature__label::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--primary); }
.post-feature h2 { margin: 0; font: 400 clamp(36px, 4.4vw, 60px)/1.02 var(--f-display); letter-spacing: -.02em; text-wrap: balance; }
.post-feature p:not(.post-meta) { margin: 0; font-size: 18px; color: var(--ink-2); max-width: 48ch; }

.post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(40px, 5vw, 56px) clamp(20px, 3vw, 32px); margin: 0; padding: 0; list-style: none; }
.post-card { position: relative; display: grid; gap: 14px; align-content: start; }
.post-card[hidden] { display: none; }
.post-card .cover { aspect-ratio: 16 / 11; }
.post-card h3 { margin: 4px 0 0; font: 400 clamp(26px, 2.2vw, 30px)/1.1 var(--f-display); letter-spacing: -.01em; text-wrap: balance; }
.post-card p:not(.post-meta) { margin: 0; color: var(--ink-2); font-size: 16px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.post-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 12px; }
.post-card__link:focus-visible { outline: none; }
.post-card:has(.post-card__link:focus-visible) { outline: 2px solid var(--primary); outline-offset: 8px; border-radius: 12px; }
.post-card h3 a, .post-feature h2 a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .45s var(--ease-out); }
@media (hover: hover) {
  .post-card:hover .cover svg, .post-feature:hover .cover svg { transform: scale(1.06); }
  .post-card:hover h3 a, .post-feature:hover h2 a { background-size: 100% 1px; }
}
.journal__empty[hidden] { display: none; }

/* ---------- Newsletter band ---------- */
.newsletter { background: var(--night); color: var(--on-night); padding: clamp(64px, 9vw, 112px) 0; }
.newsletter__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: end; }
.newsletter h2 { margin: 14px 0 0; font: 400 clamp(36px, 4.4vw, 60px)/1.02 var(--f-display); letter-spacing: -.02em; }
.newsletter h2 em { color: var(--primary-on-night); }
.newsletter form { display: grid; gap: 12px; }
.newsletter label { font-size: 14px; font-weight: 600; }
.newsletter .input { background: rgba(248, 250, 252, .05); border-color: var(--night-rule); color: var(--on-night); }
.newsletter .input::placeholder { color: #8695AB; }
.newsletter .input:focus { border-color: var(--primary-on-night); box-shadow: 0 0 0 3px rgba(56, 189, 248, .2); }
.newsletter .btn { height: 48px; }
.newsletter .btn::before { background: var(--surface); }
@media (hover: hover) { .newsletter .btn:hover { --fg: var(--ink); } }
.newsletter__fine { margin: 0; font-size: 13px; color: var(--on-night-muted); }
.newsletter__status { margin: 0; min-height: 1.4em; font-size: 14px; color: var(--success-on-night); }
.newsletter__status.is-error { color: var(--error-on-night); }

/* ---------- Single post (single.php) ---------- */
.read-progress { position: fixed; top: 0; left: 0; right: 0; z-index: 110; height: 3px; background: var(--primary); transform-origin: left; transform: scaleX(0); pointer-events: none; }

.article-head { padding: clamp(128px, 15vw, 160px) 0 clamp(32px, 5vw, 48px); }
.article-head__inner { max-width: 900px; }
.article-head .post-meta { margin-top: 28px; }
.article-head__title { margin: 16px 0 0; font: 400 clamp(44px, 6.4vw, 92px)/.98 var(--f-display); letter-spacing: -.03em; text-wrap: balance; }
.article-head__dek { margin: 24px 0 0; font-size: clamp(18px, 1.6vw, 21px); line-height: 1.55; color: var(--ink-2); max-width: 60ch; }
.byline { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--rule); }
.byline__who { display: flex; align-items: center; gap: 12px; }
.avatar { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--surface); font: 600 13px var(--f-mono); letter-spacing: .04em; }
.avatar--lg { width: 64px; height: 64px; font-size: 16px; }
.byline__name { display: block; font-weight: 600; }
.byline__role { display: block; font-size: 14px; color: var(--muted); }
.byline .post-meta { margin: 0; }

.article-cover { margin: 0 0 clamp(40px, 6vw, 72px); }
.article-cover .cover { aspect-ratio: 21 / 9; border-radius: var(--radius); }
.article-cover .cover svg { width: 46%; }
.article-cover figcaption { margin-top: 12px; font: 500 11px/1.5 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }

.article-layout { display: grid; grid-template-columns: 220px minmax(0, 720px); justify-content: center; gap: clamp(40px, 6vw, 88px); align-items: start; }
.toc { position: sticky; top: 104px; display: grid; gap: 28px; }
.toc__label { margin: 0 0 12px; font: 500 11px var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.toc ol { margin: 0; padding: 0; list-style: none; counter-reset: toc; border-left: 1px solid var(--rule); }
.toc li { counter-increment: toc; }
.toc a {
  display: grid; grid-template-columns: 26px 1fr; padding: 8px 0 8px 16px; margin-left: -1px; border-left: 2px solid transparent;
  font-size: 14px; line-height: 1.4; color: var(--muted); transition: color .2s, border-color .2s;
}
.toc a::before { content: counter(toc, decimal-leading-zero); font: 500 11px/1.7 var(--f-mono); }
.toc a:hover { color: var(--ink); }
.toc a.is-active { color: var(--ink); border-left-color: var(--primary); }
.share { display: flex; flex-wrap: wrap; gap: 8px; }
.share a, .share button {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--rule-strong); color: var(--ink-2);
  transition: border-color .2s, color .2s, background-color .2s;
}
.share a:hover, .share button:hover { border-color: var(--ink); color: var(--ink); }
.share svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* Prose */
.prose { font-size: 18px; line-height: 1.75; color: var(--ink-2); }
.prose > * { margin: 0 0 1.2em; }
.prose > :first-child { margin-top: 0; }
.prose > p:first-child::first-letter { float: left; margin: .06em .1em 0 0; font: 400 4.2em/.8 var(--f-display); color: var(--ink); }
.prose h2 { margin: 2.2em 0 .6em; font: 400 clamp(32px, 3.2vw, 42px)/1.08 var(--f-display); letter-spacing: -.015em; color: var(--ink); scroll-margin-top: 110px; }
.prose h3 { margin: 1.8em 0 .5em; font-size: 20px; font-weight: 600; line-height: 1.35; color: var(--ink); scroll-margin-top: 110px; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose a { color: var(--primary-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prose a:hover { text-decoration-thickness: 2px; }
.prose ul, .prose ol { padding-left: 0; list-style: none; }
.prose li { position: relative; padding-left: 32px; margin-bottom: .55em; }
.prose ul li::before { content: ""; position: absolute; left: 8px; top: .72em; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--primary); }
.prose ol { counter-reset: li; }
.prose ol li { counter-increment: li; }
.prose ol li::before { content: counter(li, decimal-leading-zero); position: absolute; left: 0; top: .2em; font: 500 13px/1.7 var(--f-mono); color: var(--primary-ink); }
.prose blockquote { margin: 2em 0; padding: 4px 0 4px 28px; border-left: 3px solid var(--primary); }
.prose blockquote p { margin: 0; font: 400 italic clamp(26px, 2.6vw, 32px)/1.25 var(--f-display); color: var(--ink); }
.prose blockquote cite { display: block; margin-top: 14px; font: 500 11px var(--f-mono); font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.prose figure { margin: 2.2em 0; }
.prose figcaption { margin-top: 12px; font: 500 11px/1.6 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.prose .notice { font-size: 16px; }
.prose .spec-table { font-size: 15px; }
.table-scroll { overflow-x: auto; }
.diagram { padding: 24px; border-radius: var(--radius); border: 1px solid var(--rule); background: var(--surface-raised); }
.diagram svg { width: 100%; height: auto; }
.diagram text { font: 500 11px var(--f-mono); letter-spacing: .06em; fill: var(--ink-2); }
.diagram .d-rule { stroke: var(--rule-strong); stroke-width: 1.5; }
.diagram .d-node { fill: var(--surface-raised); stroke: var(--ink); stroke-width: 1.5; }
.diagram .d-lock { fill: var(--primary); }
.diagram .d-label { fill: var(--ink); font-weight: 600; }

.article-foot { display: grid; gap: 28px; margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--rule); }
.article-foot__row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; }
.author-box { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start; }
.author-box h2 { margin: 0; font-size: 17px; font-weight: 600; }
.author-box p { margin: 6px 0 0; font-size: 15px; color: var(--ink-2); }
.post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.post-nav a { display: grid; gap: 8px; padding: 20px; border-radius: 12px; border: 1px solid var(--rule); background: var(--surface-raised); transition: border-color .2s; }
.post-nav a:hover { border-color: var(--rule-strong); }
.post-nav span { font: 500 11px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.post-nav strong { font: 400 22px/1.15 var(--f-display); }
.post-nav a:last-child { text-align: right; }

.related-posts { padding: clamp(64px, 9vw, 112px) 0 var(--sec); border-top: 1px solid var(--rule); margin-top: clamp(64px, 9vw, 112px); }
.related-posts h2 { margin: 0 0 36px; font: 400 clamp(36px, 4vw, 56px)/1 var(--f-display); letter-spacing: -.02em; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 940px) {
  .post-feature { grid-template-columns: 1fr; }
  .newsletter__grid { grid-template-columns: 1fr; }
  .article-layout { grid-template-columns: minmax(0, 1fr); }
  .article-layout > * { min-width: 0; }
  .toc { position: static; order: 2; }
  .toc nav { display: none; }
}
@media (max-width: 600px) {
  .post-grid { grid-template-columns: 1fr; }
  .post-nav { grid-template-columns: 1fr; }
  .post-nav a:last-child { text-align: left; }
  .prose { font-size: 17px; }
  .article-cover .cover { aspect-ratio: 4 / 3; }
  .article-cover .cover svg { width: 72%; }
}

/* ---------- Tables and code in prose (legal pages, journal entries) ---------- */
.prose .wp-block-table { margin: 1.6em 0; overflow-x: auto; }
.prose .wp-block-table table { width: 100%; border-collapse: collapse; border: 1px solid var(--rule); background: var(--surface-raised); font-size: 15px; line-height: 1.55; }
.prose .wp-block-table th, .prose .wp-block-table td { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--surface-subdued); }
.prose .wp-block-table thead th { font: 500 11px/1.4 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); background: var(--surface); border-bottom: 1px solid var(--rule); }
.prose code { padding: 1px 6px; border-radius: 4px; background: var(--surface-subdued); font: 500 .85em var(--f-mono); color: var(--ink); }
.prose--legal > p:first-child::first-letter { float: none; margin: 0; font: inherit; color: inherit; }
.prose--legal h2 { font-size: clamp(28px, 2.6vw, 34px); }