/* MoneroDir — blog ("reading room"). Card-catalogue language: tabs, call numbers, serif reading text. */

.bl-topic{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin:0 0 8px;display:flex;align-items:center;gap:8px}
.bl-topic::before{content:"";width:10px;height:15px;border-radius:2px 2px 0 0;background:var(--tab,var(--xmr));box-shadow:inset 0 -2px 0 rgb(0 0 0/.18)}
.bl-topic .mark{text-transform:none;letter-spacing:0}

/* index: lead story */
.bl-lead{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:40px;align-items:stretch;background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);padding:32px 32px 30px;position:relative;margin-bottom:12px}
.bl-lead::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:7px;background:var(--tab);border-radius:var(--r) var(--r) 0 0}
.bl-lead h2{font-size:clamp(26px,3.4vw,38px);letter-spacing:-.03em;line-height:1.1}
.bl-lead h2 a,.bl-list h2 a{color:var(--ink);text-decoration:none}
.bl-lead h2 a::after,.bl-list h2 a::after{content:"";position:absolute;inset:0}
.bl-lead:hover h2 a,.bl-list li:hover h2 a{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.15em}
.bl-ex{font-family:var(--serif);font-size:18px;line-height:1.55;color:var(--ink-2);margin:12px 0 0;max-width:62ch}
.bl-more{margin:18px 0 0;font-weight:600;color:var(--accent)}
.bl-callno{display:grid;grid-template-columns:auto 1fr;align-content:start;gap:0 14px;border-left:1px dashed var(--rule-strong);padding-left:24px;font-size:14px}
.bl-callno span{color:var(--ink-3);padding:8px 0;border-bottom:1px solid var(--rule)}
.bl-callno b{padding:8px 0;border-bottom:1px solid var(--rule);font-weight:600;text-align:right}

/* index: numbered list */
.bl-list{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.bl-list li{position:relative;display:grid;grid-template-columns:64px minmax(0,1fr) 150px;gap:0 24px;align-items:start;padding:24px 0;border-bottom:1px solid var(--rule)}
.bl-list li:hover{background:linear-gradient(90deg,var(--surface),transparent)}
.bl-no{font-size:34px;font-weight:800;letter-spacing:-.04em;line-height:1;color:var(--tab);padding-left:4px}
.bl-list h2{font-size:22px;letter-spacing:-.02em;line-height:1.2}
.bl-list .bl-ex{font-size:16.5px;margin-top:8px}
.bl-meta{margin:2px 0 0;display:grid;gap:2px;font-size:14px;color:var(--ink-3);text-align:right}
.bl-list-sm li{grid-template-columns:20px minmax(0,1fr) 120px;padding:16px 0}
.bl-list-sm .bl-no{width:10px;height:100%;min-height:40px;background:var(--tab);border-radius:2px;padding:0;opacity:.85}
.bl-list-sm h2{font-size:18px}

/* article */
.ar-hd{max-width:820px;padding:8px 0 28px;border-bottom:2px solid var(--ink);margin-bottom:36px}
.ar-hd h1{font-size:clamp(32px,4.8vw,52px);letter-spacing:-.035em;line-height:1.05;font-weight:800}
.ar-hd .lede{font-family:var(--serif);font-size:20px;line-height:1.55;color:var(--ink-2);margin:18px 0 0;max-width:62ch}
.ar-meta{display:flex;flex-wrap:wrap;gap:6px 18px;margin:20px 0 0;font-size:14px;color:var(--ink-3)}
.ar-meta>*+*::before{content:"·";margin-right:18px;color:var(--rule-strong)}
.ar-meta>*{display:inline-flex}
.ar-meta a{color:var(--ink-2)}
.ar-meta a::before{display:inline-block;text-decoration:none}
.ar{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:64px;align-items:start}
.ar-body{max-width:72ch}
.ar-body.prose{font-size:18.5px;line-height:1.7}
.ar-body>p:first-child{font-size:20px}
.ar-body h2{font-size:27px;letter-spacing:-.02em;margin:52px 0 14px;scroll-margin-top:92px;line-height:1.2}
.ar-body h3{font-size:20px;margin:32px 0 8px}
.ar-body p{margin:0 0 1.05em}
.ar-body li{margin:6px 0}
.ar-body li::marker{color:var(--ink-3)}
.ar-body strong{font-weight:650}
.ar-body a{text-decoration-thickness:1px}
.ar-body blockquote{margin:28px 0;padding:16px 22px;border-left:4px solid var(--xmr);background:var(--surface);border-radius:0 var(--r) var(--r) 0;font-size:18px}
.ar-body blockquote p:last-child{margin:0}
.ar-body .callout,.ar-body .tldr{font-family:var(--sans);font-size:16px;line-height:1.6;background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);border-radius:var(--r);padding:18px 22px;margin:0 0 32px}
.ar-body .tldr b:first-child,.ar-body .callout b:first-child{display:block;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);margin-bottom:6px}
.ar-body .tldr ul{margin:0;padding-left:20px}
.ar-body .warn{background:color-mix(in srgb,var(--warn) 12%,var(--surface));border-color:color-mix(in srgb,var(--warn) 45%,transparent)}
.ar-body .warn b:first-child{color:var(--warn)}
.ar-body .tbl{overflow-x:auto;margin:26px 0;border:1px solid var(--rule);border-radius:var(--r);background:var(--surface)}
.ar-body table{width:100%;border-collapse:collapse;font-family:var(--sans);font-size:15px;line-height:1.45;min-width:560px}
.ar-body th,.ar-body td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--rule);vertical-align:top}
.ar-body thead th{background:var(--surface-2);font-size:13px;font-weight:600;color:var(--ink-2)}
.ar-body tbody tr:last-child td,.ar-body tbody tr:last-child th{border-bottom:0}
.ar-body code{font-size:.85em;background:var(--surface-2);border-radius:4px;padding:2px 6px}
.ar-body pre{font-size:14.5px;line-height:1.55;background:var(--ink);color:var(--bg);border-radius:var(--r);padding:16px 18px;overflow-x:auto;margin:22px 0}
.ar-body pre code{background:none;padding:0;font-size:inherit}
.ar-body ol.steps{counter-reset:st;list-style:none;padding:0}
.ar-body ol.steps>li{counter-increment:st;position:relative;padding-left:46px;margin:16px 0}
.ar-body ol.steps>li::before{content:counter(st);position:absolute;left:0;top:1px;width:30px;height:30px;border-radius:50%;background:var(--ink);color:var(--bg);font:700 15px/30px var(--sans);text-align:center}
.ar-faq details.more{margin:0}
.ar-faq details.more summary{font-family:var(--sans);font-size:17px}
.ar-faq details.more p{font-size:17px;color:var(--ink-2);margin:0 0 18px}
.ar-src ol{font-family:var(--sans);font-size:15px;line-height:1.5;padding-left:22px}
.ar-src li{margin:6px 0}
.ar-src li span{color:var(--ink-3);font-size:13px;margin-left:4px}
.ar-note{font-family:var(--sans);font-size:14px;color:var(--ink-3);margin-top:16px}

.ar-side{position:sticky;top:92px;display:grid;gap:20px}
.ar-toc p{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin:0 0 10px}
.ar-toc ol{list-style:none;margin:0;padding:0;border-left:2px solid var(--rule)}
.ar-toc a{display:block;padding:6px 0 6px 14px;margin-left:-2px;border-left:2px solid transparent;font-size:14.5px;line-height:1.35;color:var(--ink-2);text-decoration:none}
.ar-toc a:hover{color:var(--ink);border-left-color:var(--ink-3)}
.ar-toc a.on{color:var(--ink);font-weight:600;border-left-color:var(--xmr)}
.ar-card p{font-size:14.5px;color:var(--ink-2);margin:10px 0 14px}

@media (max-width:1060px){.ar{grid-template-columns:minmax(0,1fr)}.ar-side{display:none}}
@media (max-width:820px){
  .bl-lead{grid-template-columns:minmax(0,1fr);padding:24px 20px;gap:20px}
  .bl-callno{border-left:0;padding-left:0;border-top:1px dashed var(--rule-strong);padding-top:8px}
  .bl-list li{grid-template-columns:44px minmax(0,1fr);gap:0 14px}
  .bl-list .bl-meta{grid-column:2;text-align:left;display:flex;gap:12px;margin-top:10px}
  .bl-no{font-size:26px}
  .bl-list-sm li{grid-template-columns:14px minmax(0,1fr)}
  .ar-body.prose{font-size:17.5px}
  .ar-body h2{font-size:23px;margin-top:40px}
}

.ar-body ol.steps>li{display:block;grid-template-columns:none}
.ar-body ol.steps code{word-break:break-all}