/* Read surface; palette, self-hosted type, navigation inherit katalog.css. */
.harih-blog-body { font-family:var(--font-body); }
.blog-shell { max-width:1100px; margin-inline:auto; padding:24px var(--pad-x) 64px; }
.blog-shell a:not(.btn) { color:var(--c-accent-teks); text-underline-offset:.2em; }
.blog-shell a:not(.btn):hover { text-decoration-thickness:2px; }
.blog-shell a:focus-visible,.blog-shell button:focus-visible,.blog-skip:focus-visible { outline:3px solid var(--c-accent-teks); outline-offset:5px; }
.blog-skip { position:absolute; left:20px; top:12px; transform:translateY(-180%); z-index:1000; padding:12px 18px; background:var(--c-surface); color:var(--c-ink); }
.blog-skip:focus { transform:translateY(0); }
.blog-breadcrumb { display:flex; flex-wrap:wrap; gap:10px; font-size:14px; line-height:1.6; color:var(--c-ink-2); margin-bottom:44px; }
.blog-intro { max-width:760px; margin:0 0 44px; }
.blog-intro h1,.blog-article-header h1 { font-family:var(--font-display); font-weight:400; font-size:clamp(2.2rem,4.8vw,4rem); line-height:1.08; letter-spacing:-.025em; margin:0 0 24px; text-wrap:balance; overflow-wrap:anywhere; color:var(--c-ink); }
.blog-intro>p,.blog-deck { font-size:clamp(1.125rem,2vw,1.3rem); line-height:1.6; color:var(--c-ink-2); max-width:65ch; }
.blog-topics { display:flex; flex-wrap:wrap; gap:12px 24px; padding-bottom:20px; border-bottom:1px solid var(--c-line-2); }
.blog-topics a { min-height:44px; display:inline-flex; align-items:center; font-size:16px; }
.blog-topics [aria-current] { font-weight:700; text-decoration-thickness:2px; }
.blog-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:24px; align-items:center; padding:32px 0; border-bottom:1px solid var(--c-line-2); }
.blog-row-topic { margin:0 0 8px; font-size:14px; color:var(--c-ink-2); }
.blog-row h2 { font-family:var(--font-display); font-size:clamp(1.5rem,2.5vw,2rem); font-weight:400; line-height:1.25; margin:0 0 12px; max-width:34ch; text-align:left; }
.blog-row h2 a { text-decoration:none; }
.blog-row p:not(.blog-row-topic) { color:var(--c-ink-2); font-size:17px; line-height:1.65; max-width:65ch; margin:0; }
.blog-row-read { min-height:44px; display:inline-flex; align-items:center; gap:10px; white-space:nowrap; }
.blog-pagination { display:flex; gap:12px; flex-wrap:wrap; padding-top:32px; }
.blog-pagination a { min-width:44px; min-height:44px; display:grid; place-items:center; border:1px solid var(--c-line-2); border-radius:8px; }
.blog-pagination [aria-current] { font-weight:700; background:var(--c-cek); }
.blog-empty { max-width:65ch; padding:32px 0; }
.blog-empty h2 { font-family:var(--font-display); font-weight:400; font-size:28px; }
.blog-empty p { line-height:1.75; color:var(--c-ink-2); margin-bottom:24px; }
.blog-editorial-link { margin:36px 0 0; font-size:16px; line-height:1.6; }
.blog-article-shell { max-width:960px; }
.blog-article-header,.blog-prose,.blog-toc,.blog-sources,.blog-next,.blog-disclosure { max-width:70ch; margin-inline:auto; }
.blog-article-header { margin-bottom:36px; }
.blog-featured-image { max-width:70ch; margin:0 auto 36px; }
.blog-featured-image img { display:block; width:100%; height:auto; border-radius:16px; }
.blog-featured-image figcaption { margin-top:12px; color:var(--c-ink-2); font-size:14px; line-height:1.6; }
.blog-article-header h1 { font-size:clamp(2.15rem,4.5vw,3.65rem); }
.blog-byline { font-size:14px; line-height:1.8; color:var(--c-ink-2); margin-top:24px; }
.blog-preview-note { padding:14px 18px; border:1px solid var(--c-warn-line); background:var(--c-warn-bg); color:var(--c-warn-ink); line-height:1.5; }
.blog-toc { padding:24px 0; margin-bottom:32px; border-block:1px solid var(--c-line-2); }
.blog-toc h2 { font-size:18px; font-weight:700; margin:0 0 12px; }
.blog-toc h2,.blog-prose h2,.blog-sources h2,.blog-next h2,.blog-related>h2 { text-align:left; }
.blog-toc ol { margin:0; padding-left:24px; }
.blog-toc li { padding:5px 0; line-height:1.6; }
.blog-prose { font-size:18px; line-height:1.8; color:var(--c-ink); overflow-wrap:anywhere; }
.blog-prose p { margin:0 0 1.3em; }
.blog-prose h2,.blog-sources h2,.blog-next h2,.blog-related>h2 { font-family:var(--font-display); font-size:clamp(1.65rem,3vw,2.1rem); font-weight:400; line-height:1.25; margin:2.2em 0 .7em; scroll-margin-top:28px; text-wrap:balance; overflow-wrap:anywhere; }
.blog-prose h3 { font-size:21px; line-height:1.4; margin:1.8em 0 .6em; }
.blog-prose ul,.blog-prose ol { padding-left:1.5em; margin:0 0 1.5em; }
.blog-prose li { margin:.35em 0; }
.blog-prose pre { white-space:pre-wrap; overflow-wrap:anywhere; font-family:var(--font-body); font-size:17px; line-height:1.7; padding:24px; margin:12px 0; border:1px solid var(--c-line-2); border-radius:12px; background:var(--c-surface); color:var(--c-ink); }
.blog-copy-controls { display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin:12px 0 28px; }
.blog-copy-button { font:inherit; font-size:15px; font-weight:600; min-height:44px; padding:10px 16px; border:1px solid var(--c-accent-teks); border-radius:8px; background:transparent; color:var(--c-accent-teks); cursor:pointer; }
.blog-copy-button:hover { background:var(--c-cek); }
.blog-copy-button:disabled { opacity:.65; cursor:wait; }
.blog-copy-status { color:var(--c-ink-2); font-size:14px; line-height:1.5; }
.blog-prose table { width:100%; border-collapse:collapse; font-size:16px; line-height:1.6; margin:24px 0 32px; table-layout:fixed; }
.blog-prose caption { text-align:left; font-weight:600; margin-bottom:12px; color:var(--c-ink); }
.blog-prose th,.blog-prose td { text-align:left; vertical-align:top; padding:14px 10px; border-bottom:1px solid var(--c-line-2); overflow-wrap:anywhere; }
.blog-prose thead { background:var(--c-cek); }
.blog-sources { margin-top:44px; padding-top:12px; border-top:1px solid var(--c-line-2); font-size:15px; line-height:1.7; }
.blog-sources h2 { font-size:26px; margin:20px 0 16px; }
.blog-sources ul { padding-left:20px; }
.blog-sources p,.blog-disclosure { color:var(--c-ink-2); }
.blog-next { margin-top:44px; padding:28px 0; border-block:1px solid var(--c-line-2); }
.blog-next h2 { margin:0 0 16px; }
.blog-next p { font-size:17px; line-height:1.7; margin:0 0 20px; }
.blog-next .btn { max-width:100%; min-width:0; white-space:normal; text-align:center; }
.harih-blog-body .kaki-cc { color:var(--c-accent-ink); opacity:1; }
.blog-disclosure { margin-top:28px; font-size:14px; line-height:1.8; }
.blog-related { margin-top:60px; }
.blog-related>h2 { margin:0 0 8px; }
@media (max-width:600px) { .blog-row { grid-template-columns:1fr; gap:10px; } .blog-breadcrumb { margin-bottom:30px; } .blog-prose { font-size:17px; } .blog-prose pre { padding:18px; } .blog-prose th,.blog-prose td { padding:12px 7px; font-size:14px; } }
@media print { .harih-blog-body .nav,.harih-blog-body .kaki,.blog-next,.blog-related,.blog-copy-controls,.blog-toc,.blog-skip { display:none; } .blog-shell { max-width:none; padding:0; } .blog-prose { font-size:11pt; max-width:none; } .blog-prose pre { break-inside:avoid; } }