/* Monero Friendly — blog. Warm magazine take on the shop-window language: tinted tiles, big type, pill labels. */

.bg-lead{position:relative;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,3fr);gap:32px;align-items:center;background:var(--tint);border-radius:28px;padding:40px 44px;margin-bottom:28px;overflow:hidden}
.bg-lead h2{font-size:clamp(30px,4vw,48px);font-weight:800;letter-spacing:-.04em;line-height:1.02;margin:14px 0 0;font-variation-settings:"opsz" 96}
.bg-lead h2 a,.bg-card h2 a{color:var(--ink);text-decoration:none}
.bg-lead h2 a::after,.bg-card h2 a::after{content:"";position:absolute;inset:0;border-radius:inherit}
.bg-lead:hover h2 a,.bg-card:hover h2 a{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.12em}
.bg-lead p{font-size:19px;color:var(--ink-2);margin:14px 0 18px;max-width:52ch}
.bg-lead-art .sticker{width:min(220px,100%);margin:0 auto;transform:rotate(-9deg)}
.bg-meta{font-size:15px;color:var(--ink-3)}
.bg-lead .pill,.bg-card .pill,.bg-hd .pill{background:rgb(255 255 255/.75);color:var(--ink);font-weight:650}
.pill.sp{background:#FFE7D6!important;color:var(--xmr-text)!important}

.bg-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.bg-card{position:relative;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow);overflow:hidden;transition:transform .18s ease,box-shadow .18s ease}
.bg-card:hover{transform:translateY(-3px) rotate(-.3deg);box-shadow:var(--shadow-up)}
.bg-tile{height:92px;margin:10px 10px 0;border-radius:14px;background:var(--tint);display:flex;align-items:flex-start;gap:6px;padding:14px}
.bg-body{padding:16px 22px 22px;display:flex;flex-direction:column;gap:10px;flex:1}
.bg-card h2{font-size:24px;font-weight:750;letter-spacing:-.025em;line-height:1.15}
.bg-body p{margin:0;color:var(--ink-2);font-size:16px;line-height:1.5}
.bg-body .bg-meta{margin-top:auto;font-size:14px}

/* article */
.bg-hd{max-width:860px;margin-top:22px}
.bg-hd h1{font-size:clamp(36px,5.4vw,64px);font-weight:800;letter-spacing:-.045em;line-height:1;margin:14px 0 0;font-variation-settings:"opsz" 96}
.bg-hd .lede{font-size:20px;color:var(--ink-2);max-width:56ch;margin:16px 0 0}
.bg-hd .bg-meta{margin:18px 0 0}
.bg-art{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:56px;align-items:start}
.bg-text{max-width:70ch;font-size:18.5px;line-height:1.7}
.bg-text h2{font-size:31px;font-weight:800;letter-spacing:-.03em;line-height:1.12;margin:52px 0 14px;scroll-margin-top:96px}
.bg-text h3{font-size:21px;font-weight:750;margin:30px 0 8px}
.bg-text p{margin:0 0 1.05em}
.bg-text ul,.bg-text ol{padding-left:24px}
.bg-text li{margin:7px 0}
.bg-text li::marker{color:var(--leaf)}
.bg-text strong{font-weight:700}
.bg-text .tldr,.bg-text .callout{background:var(--leaf-soft);border-radius:var(--r-card);padding:22px 26px;margin:0 0 34px;font-size:17px}
.bg-text .tldr b:first-child,.bg-text .callout b:first-child{display:block;font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--leaf-dark);margin-bottom:6px}
.bg-text .tldr ul{margin:0}
.bg-text .warn{background:#FFF0E0;color:#5C2A00}
.bg-text .warn b:first-child{color:#A63D00}
.bg-text blockquote{margin:28px 0;padding:18px 24px;background:var(--wash);border-radius:var(--r-in);font-size:19px;font-weight:500}
.bg-text blockquote p:last-child{margin:0}
.bg-text .tbl{overflow-x:auto;margin:26px 0;border:1.5px solid var(--line);border-radius:var(--r-in)}
.bg-text table{width:100%;border-collapse:collapse;font-size:15.5px;line-height:1.45;min-width:560px}
.bg-text th,.bg-text td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.bg-text thead th{background:var(--wash-2);font-size:14px;font-weight:650}
.bg-text tbody tr:last-child td,.bg-text tbody tr:last-child th{border-bottom:0}
.bg-text code{font-size:.85em;background:var(--wash-2);border-radius:6px;padding:2px 6px}
.bg-text pre{font-size:14.5px;line-height:1.55;background:var(--ink);color:#F6F3EE;border-radius:var(--r-in);padding:16px 18px;overflow-x:auto}
.bg-text pre code{background:none;padding:0}
.bg-text ol.steps{counter-reset:st;list-style:none;padding:0}
.bg-text ol.steps>li{counter-increment:st;position:relative;padding-left:54px;margin:18px 0}
.bg-text ol.steps>li::before{content:counter(st);position:absolute;left:0;top:0;width:38px;height:38px;border-radius:50%;background:var(--ink);color:#fff;font-weight:800;font-size:16px;display:grid;place-items:center}
.bg-text details.drop p{margin:0;color:var(--ink-2);font-size:17px}
.bg-src{font-size:15.5px;line-height:1.5}
.bg-src span{color:var(--ink-3);font-size:14px;margin-left:4px}
.bg-note{font-size:15px;color:var(--ink-3)}
.bg-side{position:sticky;top:96px}
.bg-toc ol{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.bg-toc a{display:block;padding:8px 12px;border-radius:12px;color:var(--ink-2);text-decoration:none;font-size:15.5px;line-height:1.35}
.bg-toc a:hover{background:rgb(255 255 255/.7);color:var(--ink)}
.bg-toc a.on{background:#fff;color:var(--ink);font-weight:650}

@media (max-width:1060px){.bg-art{grid-template-columns:minmax(0,1fr)}.bg-side{display:none}}
@media (max-width:760px){
  .bg-lead{grid-template-columns:minmax(0,1fr);padding:28px 24px}
  .bg-lead-art{display:none}
  .bg-grid{grid-template-columns:minmax(0,1fr)}
  .bg-text{font-size:17.5px}
  .bg-text h2{font-size:26px;margin-top:40px}
}

.bg-text ol.steps>li{display:block;grid-template-columns:none}
.bg-text ol.steps code{word-break:break-all}
.bg-text ol.steps{display:block;margin:20px 0 24px}
.bg-text ol.steps>li{margin:0 0 16px;min-height:38px}