/* Journal article: the same greyscale, mono language as the home page. */
:root { --k0:#000; --k1:#0b0b0b; --k2:#141414; --k3:#262626; --k4:#4d4d4d; --k5:#8c8c8c; --k6:#cfcfcf; --k7:#fff;
  --mono:"JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; --dev:"Noto Sans Devanagari","Kohinoor Devanagari",sans-serif; --mant: clamp(13px,1.3vw,16px); color-scheme: dark; }
* { box-sizing: border-box; }
html { background: var(--k0); scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--k0); color: var(--k6); font-family: var(--mono); font-size: 15px; line-height: 1.8; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--k7); outline-offset: 3px; }
.hud { position: absolute; z-index: 10; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--k5); }
#logo { left: clamp(16px,3vw,40px); top: clamp(14px,2.6vw,32px); display: flex; flex-direction: column; gap: 1px; color: var(--k7); }
#logo .dv { font-family: var(--dev); font-weight: 500; font-size: var(--mant); letter-spacing: .02em; text-transform: none; line-height: 1.55; display: block; }
#logo .en { font-size: max(7.5px, calc(var(--mant) * .5)); letter-spacing: .14em; color: var(--k5); line-height: 1.6; display: block; margin-top: 5px; }
#ctl { right: clamp(16px,3vw,40px); top: clamp(14px,2.6vw,32px); }
#ctl a { color: var(--k7); text-decoration: underline; text-underline-offset: 4px; }
.top, main, footer .wrap { max-width: 860px; margin: 0 auto; padding-inline: clamp(16px,4vw,32px); }
.top { padding-top: clamp(110px,16vw,190px); padding-bottom: 36px; }
.kick { margin: 0 0 22px; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--k5); }
h1 { margin: 0 0 28px; color: var(--k7); font-weight: 500; font-size: clamp(26px,4vw,46px); line-height: 1.12; letter-spacing: -.045em; text-wrap: balance; }
.dek { margin: 0 0 16px; max-width: 64ch; color: var(--k6); }
.ruler { list-style: none; display: flex; gap: 0; padding: 0; margin: 40px 0 18px; overflow-x: auto; border-top: 1px solid var(--k3); }
.ruler li { flex: 0 0 auto; min-width: 92px; }
.ruler a { display: grid; justify-items: start; gap: 6px; padding: 12px 14px 12px 0; font-size: 10.5px; }
.ruler small { color: var(--k5); letter-spacing: .06em; font-size: 9.5px; text-transform: uppercase; }
.ruler i { width: 7px; height: 7px; background: var(--k4); display: block; }
.ruler .rel-secure i { background: var(--k7); } .ruler .rel-attested i { background: var(--k5); } .ruler .rel-soft i { background: transparent; border: 1px solid var(--k5); }
.ruler b { color: var(--k6); font-weight: 500; font-size: 11.5px; letter-spacing: -.01em; }
.ruler a:hover b { color: var(--k7); }
.how { margin: 0; font-size: 11.5px; color: var(--k5); max-width: 70ch; }
.badge { display: inline-block; border: 1px solid var(--k4); padding: 0 8px; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--k6); line-height: 1.7; }
.badge.rel-secure { background: var(--k7); color: var(--k0); border-color: var(--k7); } .badge.rel-attested { border-color: var(--k6); } .badge.rel-soft { border-style: dashed; color: var(--k5); }
main { padding-bottom: 80px; }
.text { padding: clamp(44px,6vw,76px) 0 8px; border-top: 1px solid var(--k3); }
.no { margin: 0 0 14px; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--k5); }
h2 { margin: 0; color: var(--k7); font-weight: 500; font-size: clamp(20px,2.6vw,32px); line-height: 1.2; letter-spacing: -.035em; }
.deva { margin: 6px 0 22px; font-family: var(--dev); font-size: 15px; color: var(--k5); }
.meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1px; background: var(--k3); border: 1px solid var(--k3); margin: 0 0 30px; }
.meta div { background: var(--k0); padding: 12px 14px; }
.meta dt { font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--k5); }
.meta dd { margin: 4px 0 0; color: var(--k7); font-size: 13.5px; line-height: 1.5; }
.text section { margin: 0 0 22px; }
.text h3 { margin: 0 0 8px; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--k5); font-weight: 400; }
.text p { margin: 0 0 14px; max-width: 68ch; color: var(--k6); }
.text p b { color: var(--k7); font-weight: 500; }
.mine { border-top-color: var(--k5); }
footer { border-top: 1px solid var(--k3); }
footer .wrap { padding-block: 36px; display: grid; gap: 12px; }
footer p { margin: 0; font-size: 12.5px; line-height: 1.7; color: var(--k5); }
footer a { color: var(--k7); text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 560px) { :root { --mant: 12.5px; } .top { padding-top: 96px; } }

/* Markdown articles */
.by { margin: -8px 0 0; font-size: 11.5px; color: var(--k5); letter-spacing: .04em; }
.kick a { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--k4); }
.prose { padding-bottom: 80px; }
.prose > p:first-child em { color: var(--k5); font-size: 12px; font-style: normal; letter-spacing: .02em; }
.prose p { margin: 0 0 16px; max-width: 68ch; color: var(--k6); }
.prose h2 { margin: 52px 0 14px; font-size: clamp(19px,2.2vw,26px); line-height: 1.25; }
.prose h3 { margin: 34px 0 10px; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--k5); font-weight: 400; }
.prose strong { color: var(--k7); font-weight: 500; }
.prose em { color: var(--k6); }
.prose a { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--k4); color: var(--k7); }
.prose ul, .prose ol { margin: 0 0 18px; padding-left: 1.3em; max-width: 68ch; }
.prose li { margin: 0 0 6px; color: var(--k6); }
.prose hr { border: 0; border-top: 1px solid var(--k3); margin: 44px 0 20px; }
.prose hr ~ p { font-size: 12px; color: var(--k5); line-height: 1.7; }
.prose table { display: block; overflow-x: auto; border-collapse: collapse; margin: 0 0 24px; font-size: 12.5px; max-width: 100%; }
.prose th, .prose td { border: 1px solid var(--k3); padding: 8px 12px; text-align: left; vertical-align: top; line-height: 1.5; }
.prose th { color: var(--k7); font-weight: 500; background: var(--k1); white-space: nowrap; }
.prose td { color: var(--k6); }
.prose blockquote { margin: 0 0 24px; padding: 2px 0 2px 18px; border-left: 1px solid var(--k4); }
.prose blockquote p { margin-bottom: 10px; }
.prose blockquote.skt { border-left-color: var(--k5); padding: 14px 0 6px 18px; background: linear-gradient(90deg, var(--k1), transparent 70%); }
.prose blockquote.skt p:nth-child(1) { font-family: var(--dev); font-size: 17px; line-height: 1.9; color: var(--k7); }
.prose blockquote.skt p:nth-child(2) { font-size: 12px; line-height: 1.7; color: var(--k5); }
.prose blockquote.skt p:nth-child(2) em { color: var(--k5); font-style: italic; }
.prose blockquote.skt p:nth-child(n+3) { font-size: 14.5px; color: var(--k6); }
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--k3); border: 1px solid var(--k3); margin: 56px 0 24px; }
.pager a, .pager span { background: var(--k0); padding: 16px 18px; display: grid; gap: 6px; align-content: start; }
.pager a:hover { background: var(--k2); }
.pager .n { text-align: right; grid-column: 2; }
.pager small, .toc small, .jser small, .singles small { font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--k5); }
.pager b { color: var(--k7); font-weight: 500; line-height: 1.35; }
.toc { border: 1px solid var(--k3); padding: 0; margin-top: 8px; }
.toc summary { cursor: pointer; padding: 14px 18px; color: var(--k7); font-size: 12px; letter-spacing: .06em; }
.toc ol { list-style: none; margin: 0; padding: 4px 18px 16px; max-width: none; columns: 2 280px; column-gap: 32px; }
.toc li { break-inside: avoid; margin: 0; padding: 5px 0; }
.toc li small { display: inline-block; min-width: 76px; }
.toc li.here a { color: var(--k7); text-decoration: none; }
.toc li.here a::before { content: "→ "; }

/* Journal index */
.jindex { max-width: 960px; margin: 0 auto; padding: 0 clamp(16px,4vw,32px) 80px; }
.jser { padding: clamp(36px,5vw,60px) 0 12px; border-top: 1px solid var(--k3); }
.jser .no { margin: 0 0 12px; }
.jser .blurb { margin: 8px 0 26px; max-width: 62ch; color: var(--k6); }
.parts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1px; background: var(--k3); border: 1px solid var(--k3); }
.parts li { background: var(--k0); }
.parts a, .singles a { display: grid; gap: 6px; padding: 16px 18px; height: 100%; align-content: start; }
.parts a:hover, .singles a:hover { background: var(--k2); }
.parts b, .singles b { color: var(--k7); font-weight: 500; line-height: 1.35; font-size: 14px; }
.singles { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1px; background: var(--k3); border: 1px solid var(--k3); }
.singles li { background: var(--k0); }
.singles span { font-size: 12px; line-height: 1.6; color: var(--k5); }
@media (max-width: 560px) { .pager { grid-template-columns: 1fr; } .pager .n { grid-column: 1; text-align: left; } .prose blockquote.skt p:nth-child(1) { font-size: 16px; } }
