/*
Theme Name: NoKYC Ledger
Description: Chiaroscuro — dark stages alternating with bone galleries, theatrical display type, oversized tabular numerals. Signal orange appears once per frame and only on a CTA.
Version: 0.4.0
Author: nokyc.com
Requires PHP: 8.1
Text Domain: nokyc-ledger
*/

/* ---------------------------------------------------------------------------
   Tokens. Orange is the ONLY saturated colour and is reserved for actions.
   State colours stay desaturated and carry a mark (✓ × ?), so they never
   compete with the CTA and still read in greyscale.
   ------------------------------------------------------------------------ */
:root{
  --ink:#0B0C0E; --ink-2:#15171A; --ink-3:#1F2226;
  --bone:#F1EEE8; --bone-2:#E4E0D7; --bone-3:#CFCABE;
  --accent:#FF5A1F; --accent-deep:#D8410E;
  --good:#4E7A5E; --warn:#8A7539; --flag:#A34A3C;
  --on-ink:#F1EEE8; --on-ink-mute:#A8AEB4;
  --on-bone:#0B0C0E; --on-bone-mute:#6B6459;

  --display:"Bodoni 72","Bodoni MT",Didot,"Didot LT STD","Playfair Display","Hoefler Text",Georgia,serif;
  --body:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,"Cascadia Mono",Menlo,Consolas,monospace;
  --measure:64ch;
  --shade:#EAECE5;
}

*,*::before,*::after{box-sizing:border-box;}
body{margin:0;background:var(--ink);color:var(--on-ink);font-family:var(--body);
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;}
.wrap{max-width:1200px;margin:0 auto;padding:0 28px;}
img{max-width:100%;height:auto;}

/* slabs */
.slab{padding:76px 0;position:relative;}
.slab-ink{background:var(--ink);color:var(--on-ink);}
.slab-bone{background:var(--bone);color:var(--on-bone);}
.slab-bone .mute{color:var(--on-bone-mute);}
.mute{color:var(--on-ink-mute);}

/* parallax: fixed attachment on the atmospheric plates.
   Disabled on touch — iOS ignores background-attachment:fixed and it janks. */
.para{background-size:cover;background-position:center;background-attachment:fixed;}
@media (hover:none),(prefers-reduced-motion:reduce){
  .para{background-attachment:scroll;}
}
.para-veil{position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,rgba(11,12,14,.62) 0%,rgba(11,12,14,.86) 100%);pointer-events:none;}
/* Content must sit ABOVE the veil. The hero is .hero (not .slab), so it needs
   elevating explicitly or the absolutely-positioned veil paints over it. */
.slab > .wrap,
.hero > .wrap{position:relative;z-index:1;}

h1,h2,h3{font-family:var(--display);font-weight:400;letter-spacing:-.02em;
  text-wrap:balance;margin:0 0 .35em;line-height:1.04;}
h1{font-size:clamp(38px,6.2vw,68px);}
h2{font-size:clamp(30px,4.4vw,50px);}
h3{font-size:22px;line-height:1.15;}
/* Paragraphs fill their container; templates that want a narrow column set one
   on the container (hero ledes do), not on every p site-wide. */
p{margin:0 0 1em;}
.lede{font-size:19px;line-height:1.5;}
a{color:inherit;text-underline-offset:3px;}

.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--on-ink-mute);margin:0 0 18px;display:flex;align-items:center;gap:12px;}
.slab-bone .eyebrow{color:var(--on-bone-mute);}
.eyebrow::after{content:"";flex:1;height:1px;background:currentColor;opacity:.25;}

/* nav */
.site-head{border-bottom:1px solid #2C3136;position:sticky;top:0;z-index:30;
  background:rgba(9,10,12,.98);backdrop-filter:blur(10px);}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding-top:16px;padding-bottom:16px;flex-wrap:wrap;}
.brand-mark{font-family:var(--display);font-size:23px;text-decoration:none;color:var(--on-ink);line-height:0;}
.brand-mark i{color:var(--accent);font-style:normal;}
/* the SVG wordmark (light grey + orange marks — drawn for the dark header) */
.brand-mark img{display:block;height:26px;width:auto;}
@media(max-width:860px){.brand-mark img{height:22px;}}
.site-nav{display:flex;gap:26px;font-family:var(--mono);font-size:12.5px;font-weight:500;
  text-transform:uppercase;letter-spacing:.1em;flex-wrap:wrap;align-items:center;}
.site-nav a{color:#F1EEE8;text-decoration:none;padding-bottom:3px;border-bottom:1px solid transparent;opacity:.92;}
.site-nav a:hover,.site-nav a:focus-visible{color:#fff;opacity:1;border-bottom-color:var(--accent);}

/* dropdown (By coin). Hover/focus on pointer devices; on touch the parent link
   simply navigates to the /pay/ hub, which lists every coin anyway. */
.nav-item{position:relative;}
/* The anchor's 3px underline padding isn't counted in the flex item's height
   when it's inline inside a wrapper div, so it centred ~2px low next to its
   siblings. inline-block makes the box honest. */
.site-nav .nav-item > a{display:inline-block;}
.nav-car{font-size:9px;opacity:.6;}
.nav-sub{position:absolute;top:calc(100% + 13px);left:-18px;min-width:180px;
  background:#0E1013;border:1px solid #2C3136;padding:8px 0;display:none;
  flex-direction:column;z-index:40;}
.nav-item:hover .nav-sub,.nav-item:focus-within .nav-sub{display:flex;}
/* invisible bridge so the pointer can cross the gap without closing the menu */
.nav-item:hover::before{content:"";position:absolute;left:-18px;right:-18px;top:100%;height:14px;}
.nav-sub a{padding:8px 18px;border-bottom:none;opacity:.85;}
.nav-sub a:hover,.nav-sub a:focus-visible{background:var(--ink-2);opacity:1;border-bottom-color:transparent;}
@media (hover:none){.nav-sub{display:none !important;}}

/* mobile nav: a hamburger. The hiding is gated behind html.js so a no-JS
   visitor gets the plain wrapped list — nav is never unreachable. */
.nav-toggle{display:none;font-family:var(--mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;background:none;border:1px solid var(--ink-3);
  color:var(--on-ink);padding:9px 14px;cursor:pointer;}
@media(max-width:860px){
  .js .nav-toggle{display:inline-block;}
  .js .site-nav{display:none;}
  .js .nav-open .site-nav{display:flex;width:100%;flex-direction:column;
    align-items:stretch;gap:0;padding:6px 0 10px;border-top:1px solid var(--ink-3);margin-top:4px;}
  .js .nav-open .site-nav > a{padding:12px 2px;border-bottom:1px solid var(--ink-3);}
  .js .nav-open .nav-item{width:100%;}
  .js .nav-open .nav-item > a{display:block;padding:12px 2px;border-bottom:1px solid var(--ink-3);}
  /* coin sub-links sit indented inside the open panel */
  .js .nav-open .nav-sub{display:flex !important;position:static;border:none;
    background:none;min-width:0;padding:0 0 6px 16px;}
  .js .nav-open .nav-sub a{padding:9px 2px;}
}

/* breadcrumbs — rendered on every page except the front */
.crumbs{background:var(--ink);border-bottom:1px solid var(--ink-3);}
.crumbs ol{list-style:none;margin:0;padding:11px 0;display:flex;flex-wrap:wrap;gap:7px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--on-ink-mute);}
.crumbs li{display:flex;align-items:center;gap:7px;min-width:0;}
.crumbs li+li::before{content:"/";opacity:.4;}
.crumbs a{color:var(--on-ink-mute);text-decoration:none;}
.crumbs a:hover,.crumbs a:focus-visible{color:var(--on-ink);}
.crumbs [aria-current]{color:var(--on-ink);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;max-width:40ch;}

/* hero. Sizes are CLASSES, never inline min-height styles — an inline style
   overrides the mobile collapse below and leaves a huge dead gap under the
   breadcrumbs on phones. That bug shipped once. */
.hero{padding:44px 0 40px;overflow:hidden;display:flex;align-items:center;
  min-height:min(52vh,520px);}
.hero--s{min-height:min(30vh,280px);}
.hero--m{min-height:min(40vh,380px);}
@media(max-width:860px){
  .hero,.hero--s,.hero--m{min-height:auto;padding:26px 0 24px;}
}
.hero-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:44px;align-items:center;width:100%;}
@media(max-width:860px){.hero-grid{grid-template-columns:1fr;gap:32px;}}
.hero h1 em{font-style:italic;color:var(--accent);}
.tick{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:11.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--on-ink-mute);
  border:1px solid var(--ink-3);padding:7px 12px;margin-bottom:24px;background:rgba(11,12,14,.5);}
.tick .pulse{width:6px;height:6px;background:var(--good);border-radius:50%;animation:pulse 2.6s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:.35;}50%{opacity:1;}}
.figure{border-left:2px solid var(--accent);padding-left:22px;}
.figure .n{font-family:var(--mono);font-size:clamp(40px,5.4vw,62px);line-height:.9;
  font-variant-numeric:tabular-nums;letter-spacing:-.04em;display:block;}
.figure .k{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--on-ink-mute);display:block;margin-top:14px;max-width:26ch;line-height:1.6;}

/* Toplist styling lives in toplist-nokyc.css — the plugin obfuscates its class
   names, so those rules must be registered via bm_obfuscate_extra_css_files to be
   hashed in lockstep. Putting them here would silently never match. */

/* ---- register table: this one KEEPS the verdict columns ---- */
.tbl-wrap{overflow-x:auto;border-top:1px solid var(--bone-3);border-bottom:1px solid var(--bone-3);margin-top:26px;}
.slab-ink .tbl-wrap{border-color:var(--ink-3);}
table.register{border-collapse:collapse;width:100%;min-width:680px;font-family:var(--mono);
  font-size:12.5px;font-variant-numeric:tabular-nums;}
table.register thead th{text-align:left;font-weight:400;font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--on-bone-mute);padding:11px 16px 11px 0;
  border-bottom:1px solid var(--bone-3);white-space:nowrap;}
table.register td{padding:13px 16px 13px 0;border-bottom:1px solid var(--bone-3);vertical-align:middle;}
table.register tbody tr:hover{background:#FFFDF8;}
table.register caption{caption-side:bottom;text-align:left;font-family:var(--mono);font-size:11px;
  color:var(--on-bone-mute);padding-top:12px;line-height:1.6;max-width:84ch;}
.brand-cell{font-family:var(--display);font-size:19px;}

.st{font-weight:700;white-space:nowrap;font-size:11.5px;}
.st::before{display:inline-block;width:1.15em;}
.st-ok{color:var(--good);} .st-ok::before{content:"✓";}
.st-no{color:var(--flag);} .st-no::before{content:"×";}
.st-un{color:var(--warn);} .st-un::before{content:"?";}

/* tones + state pill (operator pages, monitor table) */
.tone-ok{color:var(--good);} .tone-warn{color:var(--warn);} .tone-flag{color:var(--flag);}
.state{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  border:1px solid currentColor;padding:3px 8px;white-space:nowrap;}
.state-flagged{color:var(--flag);} .state-consistent{color:var(--good);} .state-unknown{color:var(--warn);}

/* quoted clause + its source line */
.clause{border-left:2px solid var(--bone-3);padding:4px 0 4px 20px;margin:14px 0 24px;}
.slab-ink .clause{border-left-color:var(--ink-3);}
.clause blockquote{margin:0 0 8px;font-style:italic;font-size:17px;line-height:1.65;}
.clause .src{font-family:var(--mono);font-size:11px;color:var(--on-bone-mute);margin:0;line-height:1.7;}
.slab-ink .clause .src{color:var(--on-ink-mute);}
/* machine-captured clause on unassessed operator pages */
.clause__cap{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--on-bone-mute);margin:0 0 8px;}
.pending-strip{font-family:var(--mono);font-size:11.5px;color:var(--on-bone-mute);
  border:1px dashed var(--bone-3);padding:10px 14px;margin:18px 0 8px;display:inline-block;}

/* changes feed (homepage strip) */
.feed{display:grid;gap:1px;background:var(--ink-3);border:1px solid var(--ink-3);margin-top:26px;}
.feed-row{background:rgba(21,23,26,.92);padding:18px 22px;display:grid;
  grid-template-columns:96px 1fr auto;gap:20px;align-items:center;transition:background .16s ease;
  color:inherit;text-decoration:none;}
.feed-row:hover{background:rgba(31,34,38,.95);}
@media(max-width:760px){.feed-row{grid-template-columns:1fr;gap:6px;}}
.feed-date{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--on-ink-mute);}
.feed-txt{margin:0;max-width:none;font-size:16px;}
.feed-txt b{font-family:var(--display);font-weight:400;font-size:19px;}
.feed-tag{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  border:1px solid currentColor;padding:3px 7px;white-space:nowrap;}

/* ---- changelog ledger (/changes/): rows are details elements, the diff is
        rendered from crawler data, no editorial required ---- */
.chglog{margin-top:26px;border:1px solid var(--ink-3);}
details.chg{background:var(--ink-2);}
details.chg + details.chg{border-top:1px solid var(--ink-3);}
details.chg[open]{background:#191C20;}
.chg summary{list-style:none;cursor:pointer;display:grid;
  grid-template-columns:96px minmax(0,1fr) auto 20px;gap:18px;align-items:baseline;
  padding:16px 20px;}
.chg summary::-webkit-details-marker{display:none;}
.chg summary:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;}
.chg-date{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--on-ink-mute);white-space:nowrap;}
.chg-what{min-width:0;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;}
.chg-brand{font-family:var(--display);font-weight:400;font-size:19px;}
.chg-tag{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  border:1px solid currentColor;padding:3px 7px;white-space:nowrap;color:var(--on-ink-mute);}
.chg-tag--reverted{color:var(--warn);}
.chg-tag--note{color:var(--on-ink);}
.chg-delta{font-family:var(--mono);font-size:11px;color:var(--on-ink-mute);
  font-variant-numeric:tabular-nums;white-space:nowrap;}
.chg-delta .d-add{color:#8FAF9A;}
.chg-delta .d-del{color:#BF8D80;}
.chg-x{font-family:var(--mono);font-size:15px;color:var(--on-ink-mute);justify-self:end;
  transition:transform .16s ease;}
details[open] .chg-x{transform:rotate(45deg);}
.chg-body{padding:2px 20px 20px;}
.chg-cap{font-family:var(--mono);font-size:11px;color:var(--on-ink-mute);max-width:76ch;margin:10px 0 0;line-height:1.7;}
.chg-src{font-family:var(--mono);font-size:11px;color:var(--on-ink-mute);margin:14px 0 0;line-height:1.8;}
.chg-src a{color:inherit;}
.chg-src a:hover{color:var(--on-ink);}
.chg-note{border-left:2px solid var(--accent);padding:2px 0 2px 18px;margin-top:18px;max-width:76ch;}
.chg-note p{margin-bottom:.6em;}
@media(max-width:760px){
  .chg summary{grid-template-columns:minmax(0,1fr) 20px;gap:6px 12px;padding:14px 16px;}
  .chg-date{order:-1;grid-column:1 / -1;}
  .chg-delta{grid-column:1;}
  .chg-x{grid-row:2;}
  .chg-body{padding:2px 16px 16px;}
}

/* the diff itself — desaturated wash + real <del>/<ins> semantics */
.diff{font-size:15.5px;line-height:1.8;color:#C9CDD1;background:var(--ink);
  border:1px solid var(--ink-3);padding:18px 22px;margin:14px 0 0;}
.diff del{color:#C79A8C;background:rgba(163,74,60,.16);text-decoration:line-through;
  text-decoration-thickness:1px;padding:1px 3px;}
.diff ins{color:#A9C7B2;background:rgba(78,122,94,.18);text-decoration:none;padding:1px 3px;}
.diff .d-skip{font-family:var(--mono);font-size:11px;color:var(--on-ink-mute);white-space:nowrap;}
.diff-legend{font-family:var(--mono);font-size:10.5px;color:var(--on-ink-mute);
  display:flex;gap:20px;flex-wrap:wrap;margin:10px 0 0;}
.diff-legend del{color:#C79A8C;background:rgba(163,74,60,.16);text-decoration:line-through;padding:0 3px;}
.diff-legend ins{color:#A9C7B2;background:rgba(78,122,94,.18);text-decoration:none;padding:0 3px;}

/* Inline / Side-by-side toggle. Rendered only when an old version exists. */
.diff-toggle{display:flex;gap:8px;margin:14px 0 0;}
.dt-btn{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  background:none;border:1px solid var(--ink-3);color:var(--on-ink-mute);padding:7px 12px;cursor:pointer;}
.dt-btn.is-on{color:var(--on-ink);border-color:var(--on-ink-mute);background:var(--ink-2);}
.diff-split{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--ink-3);
  border:1px solid var(--ink-3);margin:14px 0 0;}
@media(max-width:820px){.diff-split{grid-template-columns:1fr;}}
.diff-pane{background:var(--ink);padding:16px 20px;min-width:0;}
.diff-pane__h{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--on-ink-mute);margin:0 0 10px;}
.diff-pane__txt{font-size:15px;line-height:1.75;color:#C9CDD1;}
/* the split view carries a MILD wash and no strikethrough — it exists to read
   both versions whole, not to re-shout the inline marks */
.diff-pane__txt mark{padding:1px 3px;background:none;color:inherit;}
.diff-pane__txt mark.w-del{background:rgba(163,74,60,.20);color:#D7B4AA;}
.diff-pane__txt mark.w-add{background:rgba(78,122,94,.20);color:#B7D2C0;}

/* pagination */
.pager{margin-top:26px;display:flex;gap:8px;flex-wrap:wrap;font-family:var(--mono);font-size:12px;}
.pager .page-numbers{padding:8px 13px;border:1px solid var(--ink-3);color:var(--on-ink);
  text-decoration:none;font-variant-numeric:tabular-nums;}
.pager a.page-numbers:hover,.pager a.page-numbers:focus-visible{border-color:var(--accent);}
.pager .page-numbers.current{background:var(--ink-2);}

/* rails */
.rails{display:flex;flex-wrap:wrap;gap:1px;background:var(--ink-3);border:1px solid var(--ink-3);margin-top:24px;}
.rail{background:var(--ink-2);padding:16px 22px;flex:1 1 128px;text-decoration:none;color:var(--on-ink);
  transition:background .16s ease;}
.rail:hover{background:#1B1E22;}
.rail b{display:block;font-family:var(--display);font-size:20px;font-weight:400;}
.rail span{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--on-ink-mute);}

.withheld{border:1px dashed var(--ink-3);padding:12px 16px;margin:14px 0;
  font-family:var(--mono);font-size:12px;color:var(--on-ink-mute);max-width:var(--measure);}
.slab-bone .withheld{border-color:var(--bone-3);color:var(--on-bone-mute);}
.empty{border:1px solid var(--ink-3);background:var(--ink-2);padding:22px 24px;margin:18px 0;max-width:var(--measure);}
.slab-bone .empty{border-color:var(--bone-3);background:var(--bone-2);}
.empty p{margin:0;}

/* reveal */
.js .rv{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease;}
.js .rv.in{opacity:1;transform:none;}

/* footer */
.site-foot{background:var(--ink-2);padding:40px 0;font-family:var(--mono);font-size:11px;
  color:var(--on-ink-mute);line-height:1.8;border-top:1px solid var(--ink-3);}
.site-foot a{color:var(--on-ink-mute);}
.site-foot p{max-width:none;}

a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
.skip{position:absolute;left:-9999px;}
.skip:focus{left:8px;top:8px;background:var(--ink);color:var(--on-ink);padding:8px 12px;border:1px solid var(--accent);z-index:40;}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;}
  .rv{opacity:1;transform:none;}
}


/* Mobile: drop the hero stat so the toplist reaches the first screen. */
@media(max-width:860px){
  .hero .figure{display:none;}
  .hero .lede{font-size:17px;}
  .slab{padding:48px 0;}
  #picks{padding-top:34px;}
}

/* Prose inside the bone slabs needs its own rhythm — the article is the page's
   substance, not an afterthought bolted to the bottom. It fills the container;
   the container (.wrap) is the measure. */
.article{font-size:17.5px;}
.article > *:first-child{margin-top:0;}
.article h2{font-size:clamp(26px,3.4vw,36px);margin-top:1.5em;}
.article h3{font-size:clamp(19px,2.2vw,23px);margin-top:1.3em;}
.article p{margin-bottom:1.05em;}
.article a{color:#8A3A12;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;}
.article a:hover{color:var(--accent-deep);}
.slab-ink .article a{color:#E0A183;}

/* ---- lists: a hanging accent tick instead of default bullets ---- */
.article ul,.article ol{padding-left:0;margin:1em 0 1.2em;list-style:none;}
.article ul li,.article ol li{position:relative;padding-left:30px;margin-bottom:.55em;line-height:1.55;}
.article ul li::before{content:"";position:absolute;left:4px;top:.62em;
  width:8px;height:2px;background:var(--accent);}
.article ol{counter-reset:li;}
.article ol li{counter-increment:li;}
.article ol li::before{content:counter(li);position:absolute;left:0;top:.05em;
  font-family:var(--mono);font-size:12px;font-weight:700;color:var(--accent);
  min-width:20px;}
.article li > ul,.article li > ol{margin:.4em 0 .2em;}

/* ---- tables: ledger styling, striped, scrollable on narrow screens ---- */
.article .tablewrap,.article figure.wp-block-table{overflow-x:auto;margin:22px 0;}
.article table{width:100%;border-collapse:collapse;font-family:var(--mono);
  font-size:13px;font-variant-numeric:tabular-nums;min-width:520px;
  border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);}
.article thead th{text-align:left;font-family:var(--mono);font-size:10.5px;
  text-transform:uppercase;letter-spacing:.09em;color:var(--on-bone-mute);
  font-weight:400;padding:11px 16px 11px 0;border-bottom:1px solid var(--ink);white-space:nowrap;}
.article tbody td{padding:11px 16px 11px 0;border-bottom:1px solid var(--bone-3);
  vertical-align:top;line-height:1.5;}
.article tbody tr:nth-child(odd){background:var(--shade,#EEF0EA);}
.article tbody tr:last-child td{border-bottom:none;}

/* ---- byline ---- */
.byline{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:18px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--on-ink-mute);}
.slab-bone .byline{color:var(--on-bone-mute);}
.byline-by{color:inherit;}
.byline-by a{color:inherit;}
.byline-upd{text-transform:uppercase;letter-spacing:.1em;font-size:10.5px;}
.byline-sep{opacity:.5;}

/* ---- author bio box at the foot of articles + author archive header ---- */
.authbox{border-top:1px solid var(--bone-3);margin-top:44px;padding-top:20px;}
.slab-ink .authbox{border-top-color:var(--ink-3);}
.authbox__eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--on-bone-mute);margin:0 0 6px;}
.slab-ink .authbox__eyebrow{color:var(--on-ink-mute);}
.authbox__name{font-family:var(--display);font-size:21px;margin:0 0 6px;}
.authbox__name a{text-decoration:none;}
.authbox__name a:hover{color:var(--accent-deep);}
.authbox__bio{font-size:15px;color:var(--on-bone-mute);margin:0;max-width:70ch;}
.slab-ink .authbox__bio{color:var(--on-ink-mute);}

/* ---- full-width toplist band on landing pages ---- */
.toplist-wide{margin-top:14px;margin-bottom:26px;}
.toplist-wide > .eyebrow{color:var(--on-bone-mute);}

/* ---- pros/cons (editorial shortcode) ---- */
.proscons{margin:26px 0;}
.proscons__title{font-family:var(--display);font-size:22px;margin:0 0 12px;}
.proscons__grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--bone-3);border:1px solid var(--bone-3);}
@media(max-width:640px){.proscons__grid{grid-template-columns:1fr;}}
.proscons__col{background:var(--bone);padding:18px 20px;}
.proscons__head{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.12em;
  margin:0 0 12px;padding-bottom:8px;border-bottom:1px solid var(--bone-3);}
.proscons__col--pro .proscons__head{color:var(--good);}
.proscons__col--con .proscons__head{color:var(--flag);}
.proscons__list{list-style:none;margin:0;padding:0;}
.proscons__list li{position:relative;padding-left:24px;margin-bottom:9px;line-height:1.45;font-size:15.5px;max-width:none;}
.proscons__list li::before{position:absolute;left:2px;top:0;font-family:var(--mono);font-weight:700;}
.proscons__col--pro .proscons__list li::before{content:"+";color:var(--good);}
.proscons__col--con .proscons__list li::before{content:"\2212";color:var(--flag);}
/* the shortcode renders inside .article, whose generic list styling paints an
   orange dash ::before on every li — that stacked a dash UNDER the +/− marks.
   Neutralise the article rules inside pros/cons. */
.article .proscons__list{padding-left:0;margin:0;}
.article .proscons__list li{padding-left:24px;margin-bottom:9px;line-height:1.45;}
.article .proscons__list li::before{background:none;width:auto;height:auto;left:2px;top:0;}

/* ---- CTA block (editorial shortcode) ---- */
.cta-block{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:22px 0;
  padding:18px 20px;background:var(--ink);border:1px solid var(--ink-3);}
.slab-bone .cta-block{background:var(--ink);}
.cta-btn{display:inline-block;background:var(--accent);color:#fff;text-decoration:none;
  font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;
  padding:14px 26px;white-space:nowrap;transition:background .16s ease;}
.cta-btn:hover,.cta-btn:focus-visible{background:var(--accent-deep);}
.cta-note{font-family:var(--mono);font-size:10.5px;color:var(--on-ink-mute);line-height:1.5;}

/* ---- register counts strip ---- */
.counts{display:flex;gap:0;flex-wrap:wrap;border:1px solid var(--bone-3);margin:24px 0 0;background:var(--bone-2);}
.counts div{padding:16px 22px;border-right:1px solid var(--bone-3);flex:1 1 150px;min-width:140px;}
.counts div:last-child{border-right:none;}
.counts .n{font-family:var(--mono);font-size:30px;font-variant-numeric:tabular-nums;line-height:1;
  display:block;margin-bottom:6px;}
.counts .k{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--on-bone-mute);}
/* dark-slab variant */
.slab-ink .counts{border-color:var(--ink-3);background:var(--ink-2);}
.slab-ink .counts div{border-right-color:var(--ink-3);}
.slab-ink .counts .k{color:var(--on-ink-mute);}

/* ---- /pay/ hub coin cards ---- */
.coin-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1px;
  background:var(--bone-3);border:1px solid var(--bone-3);margin-top:26px;}
.coin-card{background:var(--bone);padding:24px 24px 20px;text-decoration:none;color:var(--on-bone);
  display:flex;flex-direction:column;gap:6px;transition:background .16s ease;}
.coin-card:hover{background:#FFFDF8;}
.coin-card__ticker{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--accent);font-weight:700;}
.coin-card__name{font-family:var(--display);font-size:28px;line-height:1;}
.coin-card__angle{font-size:14.5px;color:var(--on-bone-mute);line-height:1.4;margin-top:2px;flex:1;}
.coin-card__go{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.1em;
  color:var(--on-bone);margin-top:10px;padding-top:12px;border-top:1px solid var(--bone-3);}
.coin-card:hover .coin-card__go{color:var(--accent-deep);}

/* ---- landing-page toplist heading (editable H2) ---- */
.toplist-wide__h2{font-family:var(--display);font-weight:400;letter-spacing:-.015em;
  font-size:clamp(26px,3.6vw,38px);line-height:1.05;margin:8px 0 4px;color:var(--on-bone);}

/* the affiliate disclosure line under the toplist byline */
.disclose{font-family:var(--mono);font-size:11px;line-height:1.7;color:var(--on-ink-mute);
  max-width:58ch;margin:10px 0 0;}

/* ---- homepage product cards: the receipts behind the ranking ---- */
.receipts{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1px;
  background:var(--ink-3);border:1px solid var(--ink-3);margin-top:30px;}
.receipt{background:var(--ink-2);padding:22px 24px;text-decoration:none;color:var(--on-ink);
  display:flex;flex-direction:column;gap:7px;transition:background .16s ease;}
.receipt:hover{background:#1B1E22;}
.receipt .n{font-family:var(--mono);font-size:34px;font-variant-numeric:tabular-nums;line-height:1;}
.receipt b{font-family:var(--display);font-weight:400;font-size:19px;}
.receipt span{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--on-ink-mute);line-height:1.6;}