/* StuckBTC - shared blog styles. Same tokens as the homepage. */

:root{
  --bg:#000000; --panel:#050503; --panel2:#0A0906;
  --edge:#1C1A14; --edge2:#2A2618;
  --ink:#EAE4D3; --body:#B9B2A1; --soft:#9A937F; --dim:#585243;
  --amb:#FFB000; --ok:#7CE38B; --warn:#FFD166; --bad:#FF7A66;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:"Familjen Grotesk",ui-sans-serif,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
::selection{background:rgba(255,176,0,.3);}
:focus-visible{outline:2px solid var(--amb);outline-offset:3px;border-radius:2px;}
a{color:var(--amb);text-decoration:none;}
a:hover{text-decoration:underline;text-underline-offset:3px;}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* ---- nav ---- */
.navbar{
  position:sticky;top:0;z-index:60;
  background:rgba(0,0,0,.82);backdrop-filter:saturate(1.3) blur(12px);
  border-bottom:1px solid var(--edge);
}
.nav{
  position:relative;
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  max-width:1240px;margin:0 auto;padding:12px clamp(16px,3vw,28px);
}
.nav__links a{position:relative;padding-bottom:3px;}
.nav__links a::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1.5px;
  background:var(--amb);transform:scaleX(0);transform-origin:left;transition:transform .2s ease;
}
.nav__links a:hover::after{transform:scaleX(1);}
.brand{display:flex;align-items:center;line-height:0;}
.brand img{height:38px;width:auto;display:block;}
@media(max-width:600px){.brand img{height:30px;}}
/* min-width:0 lets this shrink below its content width, so its own
   flex-wrap can actually wrap. Without it the row sizes to max-content
   and drags the whole page wider than a phone viewport. */
.nav__links{margin-left:auto;display:flex;gap:16px;flex-wrap:wrap;min-width:0;}
.nav__links a{
  font-family:"Spline Sans Mono",ui-monospace,monospace;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--soft);white-space:nowrap;
}
.nav__links a:hover{color:var(--amb);text-decoration:none;}
@media(max-width:680px){
  .nav{gap:10px;}
  .nav__links{width:100%;margin-left:0;gap:14px;}
  .nav__links a{font-size:10.5px;}
}

/* ---- shell ---- */
.wrap{max-width:1240px;margin:0 auto;padding:0 clamp(16px,3vw,28px);}
main{max-width:820px;margin:0 auto;padding:clamp(20px,3vw,32px) clamp(16px,3vw,28px) clamp(48px,6vw,80px);}

/* ---- breadcrumb ---- */
.crumb{
  font-family:"Spline Sans Mono",monospace;font-size:11px;letter-spacing:.08em;
  color:var(--dim);margin-bottom:clamp(22px,3vw,32px);
}
.crumb a{color:var(--soft);}
.crumb span{color:var(--dim);margin:0 7px;}

/* ---- article header ---- */
.ahead{margin-bottom:clamp(26px,4vw,40px);}
.ahead .kicker{
  display:flex;align-items:center;gap:12px;margin-bottom:16px;
  font-family:"Spline Sans Mono",monospace;font-size:10.5px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--amb);
}
.ahead .kicker::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--edge2),transparent);}
h1{
  margin:0 0 18px;font-family:"Bricolage Grotesque",ui-sans-serif,sans-serif;
  font-size:clamp(30px,5vw,50px);font-weight:800;letter-spacing:-.028em;line-height:1.06;
  color:var(--ink);text-wrap:balance;
}
.deck{
  margin:0 0 22px;font-size:clamp(16.5px,2vw,19px);line-height:1.6;color:var(--body);max-width:62ch;
}
.byline{
  display:flex;gap:20px;flex-wrap:wrap;padding:14px 0;
  border-top:1px solid var(--edge);border-bottom:1px solid var(--edge);
  font-family:"Spline Sans Mono",monospace;font-size:10.5px;letter-spacing:.06em;color:var(--dim);
}
.byline b{color:var(--soft);font-weight:500;}

/* ---- answer capsule ---- */
.capsule{
  border:1px solid var(--edge2);border-left:3px solid var(--amb);border-radius:12px;
  background:linear-gradient(135deg, rgba(255,176,0,.06), rgba(255,176,0,0) 55%), var(--panel2);
  padding:22px 24px;margin:clamp(24px,3vw,32px) 0;
}
.capsule__tag{
  display:inline-block;margin-bottom:10px;padding:3px 10px;border-radius:4px;
  background:rgba(255,176,0,.14);color:var(--amb);
  font-family:"Spline Sans Mono",monospace;font-size:10px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;
}
.capsule p{margin:0;font-size:16.5px;line-height:1.7;color:var(--body);}
.capsule p b{color:var(--ink);font-weight:600;}

/* ---- prose ---- */
article h2{
  margin:clamp(42px,5vw,58px) 0 16px;font-family:"Bricolage Grotesque",sans-serif;
  font-size:clamp(23px,3.2vw,32px);font-weight:700;letter-spacing:-.02em;line-height:1.14;
  color:var(--ink);max-width:26ch;text-wrap:balance;
}
article h2::before{
  content:"";display:block;width:34px;height:2px;background:var(--amb);
  margin-bottom:14px;opacity:.75;
}
article h3{
  margin:32px 0 12px;font-family:"Bricolage Grotesque",sans-serif;
  font-size:clamp(17px,2.1vw,20px);font-weight:700;letter-spacing:-.01em;line-height:1.25;
  color:var(--ink);padding-left:14px;border-left:2px solid var(--edge2);
}
article p{margin:0 0 17px;font-size:16.5px;line-height:1.78;color:var(--body);}
article p b,article li b{color:var(--ink);font-weight:600;}
article ul,article ol{margin:0 0 18px;padding-left:0;list-style:none;}
article li{
  position:relative;padding-left:24px;margin-bottom:10px;
  font-size:16.5px;line-height:1.72;color:var(--body);
}
article ul li::before{content:"\25B8";position:absolute;left:2px;top:1px;color:var(--amb);font-size:13px;}
article ol{counter-reset:n;}
article ol li{counter-increment:n;}
article ol li::before{
  content:counter(n);position:absolute;left:0;top:2px;color:var(--amb);
  font-family:"Spline Sans Mono",monospace;font-size:11px;font-weight:600;
}

/* ---- callout boxes ---- */
.box{
  border:1px solid var(--edge);border-radius:12px;background:var(--panel2);
  padding:20px 22px;margin:24px 0;
}
.box .bh{
  margin:0 0 10px;font-family:"Bricolage Grotesque",sans-serif;font-size:16px;font-weight:700;
  letter-spacing:-.01em;color:var(--ink);
}
.box p:last-child,.box ul:last-child,.box li:last-child{margin-bottom:0;}
.box--ok{border-left:3px solid var(--ok);}
.box--ok .bh{color:var(--ok);}
.box--warn{border-left:3px solid var(--warn);}
.box--warn .bh{color:var(--warn);}
.box--bad{border-left:3px solid var(--bad);}
.box--bad .bh{color:var(--bad);}
.box--data{border-left:3px solid var(--amb);}
.box--data .bh{color:var(--amb);}
.box__meta{
  margin-top:12px;padding-top:10px;border-top:1px solid var(--edge);
  font-family:"Spline Sans Mono",monospace;font-size:10px;letter-spacing:.06em;color:var(--dim);
}

/* ---- stat strip ---- */
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:26px 0;}
@media(min-width:700px){.stats{grid-template-columns:repeat(4,1fr);}}
.stat{
  border:1px solid var(--edge);border-radius:12px;background:var(--panel2);
  padding:16px 16px 14px;position:relative;overflow:hidden;
}
.stat::after{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--amb),transparent 70%);opacity:.5;
}
.stat b{
  display:block;font-family:"Bricolage Grotesque",sans-serif;font-size:clamp(20px,2.4vw,26px);
  font-weight:800;letter-spacing:-.02em;color:var(--amb);line-height:1.05;font-variant-numeric:tabular-nums;
}
.stat > span{
  display:block;margin-top:7px;font-family:"Spline Sans Mono",monospace;font-size:9.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--dim);line-height:1.6;
}

/* ---- tables ---- */
.tblwrap{overflow-x:auto;border:1px solid var(--edge);border-radius:12px;margin:24px 0;}
table{border-collapse:collapse;width:100%;min-width:560px;font-size:14px;font-variant-numeric:tabular-nums;}
caption{
  caption-side:top;text-align:left;padding:14px 16px 0;
  font-family:"Spline Sans Mono",monospace;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim);
}
th{
  text-align:left;font-family:"Spline Sans Mono",monospace;font-weight:600;font-size:10px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--dim);
  padding:12px 16px;border-bottom:1px solid var(--edge2);background:var(--panel);white-space:nowrap;
}
td{padding:12px 16px;border-bottom:1px solid var(--edge);color:var(--body);line-height:1.6;vertical-align:top;}
tr:last-child td{border-bottom:0;}
td b{color:var(--ink);font-weight:600;}
.t-ok{color:var(--ok);} .t-warn{color:var(--warn);} .t-bad{color:var(--bad);} .t-amb{color:var(--amb);}

/* ---- inline CTA ---- */
.cta{
  display:grid;gap:16px;align-items:center;grid-template-columns:1fr;
  border:1px solid var(--edge2);border-left:3px solid var(--amb);border-radius:14px;
  background:linear-gradient(100deg, rgba(255,176,0,.09), rgba(255,176,0,0) 60%), var(--panel2);
  padding:22px 24px;margin:32px 0;
}
@media(min-width:700px){.cta{grid-template-columns:1fr auto;gap:24px;}}
.cta .ch{
  margin:0 0 6px;font-family:"Bricolage Grotesque",sans-serif;font-size:19px;font-weight:800;
  letter-spacing:-.018em;color:var(--ink);
}
.cta p{margin:0;font-size:15px;line-height:1.6;color:var(--soft);}
.cta a.btn{
  display:inline-block;border-radius:10px;padding:13px 24px;white-space:nowrap;
  background:linear-gradient(120deg,#FFC24B,var(--amb) 55%,#E2900B);color:#171000;
  font-family:"Bricolage Grotesque",sans-serif;font-size:14.5px;font-weight:800;
  box-shadow:0 8px 26px -10px rgba(255,176,0,.6), inset 0 1px 0 rgba(255,255,255,.35);
}
.cta a.btn:hover{filter:brightness(1.07);text-decoration:none;}

/* ---- FAQ ---- */
.faq details{
  border:1px solid var(--edge);border-radius:10px;background:var(--panel);
  margin-bottom:8px;overflow:hidden;
}
.faq summary{
  cursor:pointer;list-style:none;padding:16px 18px;
  font-family:"Bricolage Grotesque",sans-serif;font-size:16px;font-weight:700;
  letter-spacing:-.005em;color:var(--ink);
  display:flex;justify-content:space-between;align-items:center;gap:12px;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";color:var(--amb);font-size:18px;flex:none;}
.faq details[open] summary::after{content:"\2212";}
.faq details[open] summary{border-bottom:1px solid var(--edge);}
.faq .a{padding:16px 18px;font-size:15.5px;line-height:1.75;color:var(--body);}
.faq .a p{margin:0 0 12px;}
.faq .a p:last-child{margin-bottom:0;}

/* ---- related ---- */
.related{margin-top:clamp(44px,6vw,64px);border-top:1px solid var(--edge);padding-top:28px;}
.related h2{margin-top:0;}
.related h2::before{display:none;}
.rgrid{display:grid;gap:10px;grid-template-columns:1fr;}
@media(min-width:700px){.rgrid{grid-template-columns:repeat(3,1fr);}}
.rcard{
  display:block;border:1px solid var(--edge);border-radius:12px;background:var(--panel2);
  padding:18px 20px;transition:border-color .18s;
}
.rcard:hover{border-color:var(--edge2);text-decoration:none;}
.rcard b{
  display:block;font-family:"Bricolage Grotesque",sans-serif;font-size:15.5px;font-weight:700;
  color:var(--ink);letter-spacing:-.01em;line-height:1.25;margin-bottom:7px;
}
.rcard > span{display:block;font-size:13.5px;line-height:1.6;color:var(--soft);}

/* ---- blog index ---- */
.idx{display:grid;gap:12px;grid-template-columns:1fr;margin-bottom:clamp(36px,5vw,52px);}
@media(min-width:760px){.idx{grid-template-columns:repeat(2,1fr);}}
.icard{
  display:flex;flex-direction:column;border:1px solid var(--edge);border-radius:14px;
  background:var(--panel2);padding:22px 24px;transition:border-color .18s;
}
.icard:hover{border-color:var(--edge2);text-decoration:none;}
.icard h3{
  margin:0 0 9px;padding:0;border:0;font-family:"Bricolage Grotesque",sans-serif;
  font-size:19px;font-weight:800;letter-spacing:-.018em;line-height:1.2;color:var(--ink);
}
.icard p{margin:0 0 14px;font-size:14.5px;line-height:1.6;color:var(--soft);flex:1;}
.icard .meta{
  font-family:"Spline Sans Mono",monospace;font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--dim);
}
.clusterhead{
  display:flex;align-items:center;gap:14px;margin:clamp(34px,4vw,48px) 0 18px;
  font-family:"Spline Sans Mono",monospace;font-size:10.5px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--amb);
}
.clusterhead::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--edge2),transparent);}

/* ============================ FOOTER ============================
   Four movements: a closing statement, the link grid, a live network
   ticker, then the fine print. The ticker is the point: it is the only
   part of a footer anywhere that is worth looking at twice.        */

footer{
  position:relative;margin-top:clamp(56px,7vw,96px);
  border-top:1px solid var(--edge2);
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255,176,0,.055), transparent 62%),
    linear-gradient(180deg, var(--panel2), var(--bg) 55%);
}
footer::before{
  content:"";position:absolute;top:-1px;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,176,0,.55) 22%,rgba(255,176,0,.55) 78%,transparent);
}
footer .fwrap{max-width:1240px;margin:0 auto;padding:0 clamp(16px,3vw,28px);}
footer{padding-bottom:0;}
footer .fwordmark{margin-bottom:0;}

/* -- 1. closing statement -- */
.fcall{
  display:grid;gap:22px;grid-template-columns:1fr;align-items:center;
  padding:clamp(40px,5vw,64px) 0 clamp(30px,4vw,44px);
}
@media(min-width:860px){.fcall{grid-template-columns:minmax(0,1fr) auto;gap:48px;}}
.fcall h3{
  margin:0 0 10px;font-family:"Bricolage Grotesque",ui-sans-serif,sans-serif;
  font-size:clamp(26px,3.6vw,40px);font-weight:800;letter-spacing:-.03em;line-height:1.04;
  color:var(--ink);max-width:18ch;text-wrap:balance;
}
.fcall h3 em{font-style:normal;color:var(--amb);}
.fcall p{margin:0;font-size:15.5px;line-height:1.65;color:var(--soft);max-width:50ch;}
.fcta{
  display:inline-flex;align-items:center;gap:11px;white-space:nowrap;
  border-radius:12px;padding:16px 28px;
  background:linear-gradient(120deg,#FFC24B,var(--amb) 55%,#E2900B);color:#171000;
  font-family:"Bricolage Grotesque",sans-serif;font-size:15.5px;font-weight:800;letter-spacing:-.005em;
  box-shadow:0 12px 34px -12px rgba(255,176,0,.65), inset 0 1px 0 rgba(255,255,255,.4);
  transition:transform .16s cubic-bezier(.2,.9,.3,1), filter .16s;
}
.fcta:hover{filter:brightness(1.07);text-decoration:none;transform:translateY(-1px);}
.fcta svg{flex:none;}

/* -- 2. link grid -- */
.fgrid{
  display:grid;gap:30px;grid-template-columns:1fr;
  padding:clamp(30px,4vw,42px) 0;border-top:1px solid var(--edge);
}
@media(min-width:620px){.fgrid{grid-template-columns:repeat(2,1fr);}}
@media(min-width:900px){.fgrid{grid-template-columns:repeat(3,1fr);gap:34px;}}
/* five link columns: the brand block spans two so the four lists sit on one
   row instead of orphaning the last one onto a second. */
@media(min-width:1120px){
  .fgrid{grid-template-columns:1.55fr repeat(4,1fr);gap:34px;}
  .fmark{grid-column:auto;}
}
.fmark img{height:32px;width:auto;display:block;margin-bottom:15px;}
.fmark p{margin:0 0 16px;font-size:13.5px;line-height:1.7;color:var(--soft);max-width:42ch;}
.fmark p b{color:var(--ink);font-weight:600;}
.fbadges{display:flex;gap:7px;flex-wrap:wrap;}
.fbadge{
  display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;
  border:1px solid var(--edge2);background:rgba(255,255,255,.015);
  font-family:"Spline Sans Mono",monospace;font-size:9px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--soft);
}
.fbadge::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--ok);}
footer .fh{
  margin:0 0 15px;font-family:"Spline Sans Mono",monospace;font-size:9.5px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--dim);
}
footer ul{margin:0;padding:0;list-style:none;}
footer li{margin-bottom:11px;line-height:1.4;}
footer li a{
  font-family:"Familjen Grotesk",sans-serif;font-size:14px;font-weight:500;color:var(--body);
  transition:color .15s;
}
footer li a:hover{color:var(--amb);text-decoration:none;}
footer li small{
  display:block;margin-top:3px;font-family:"Spline Sans Mono",monospace;
  font-size:9px;letter-spacing:.05em;color:var(--dim);line-height:1.5;
}
.fnew{
  display:inline-block;margin-left:7px;padding:2px 6px;border-radius:3px;vertical-align:1.5px;
  background:var(--amb);color:#141000;
  font-family:"Spline Sans Mono",monospace;font-size:8px;font-weight:600;letter-spacing:.14em;
}

/* -- 3. live network ticker -- */
.fticker{
  display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  border:1px solid var(--edge);border-radius:14px;overflow:hidden;
  background:var(--edge);margin-bottom:clamp(24px,3vw,34px);
}
@media(min-width:760px){.fticker{grid-template-columns:auto repeat(4,1fr);}}
.fcell{
  background:var(--panel);padding:15px 18px;display:flex;flex-direction:column;gap:6px;min-width:0;
}
.fcell > span{
  font-family:"Spline Sans Mono",monospace;font-size:9px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim);white-space:nowrap;
}
.fcell b{
  font-family:"Bricolage Grotesque",sans-serif;font-size:clamp(15px,1.7vw,19px);font-weight:800;
  letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1;
}
.fcell--live{background:linear-gradient(135deg, rgba(124,227,139,.09), var(--panel) 70%);justify-content:center;}
.fcell--live b{
  display:flex;align-items:center;gap:9px;color:var(--ok);
  font-family:"Spline Sans Mono",monospace;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
}
.fcell--live b::before{
  content:"";width:7px;height:7px;border-radius:50%;background:var(--ok);flex:none;
  box-shadow:0 0 0 0 rgba(124,227,139,.6);animation:fpulse 2.6s ease-out infinite;
}
@keyframes fpulse{
  0%{box-shadow:0 0 0 0 rgba(124,227,139,.55);}
  70%{box-shadow:0 0 0 8px rgba(124,227,139,0);}
  100%{box-shadow:0 0 0 0 rgba(124,227,139,0);}
}
.fcell--amb b{color:var(--amb);}

/* -- 4. fine print -- */
/* Oversized wordmark closing the page. The box is deliberately shorter than
   the glyph and sits flush with the bottom edge, so the letterforms are cut
   by the page rather than floating in a band of empty space above it. */
.fwordmark{
  margin:clamp(14px,2.2vw,26px) 0 0;
  height:clamp(42px,8.6vw,116px);
  overflow:hidden;user-select:none;pointer-events:none;
}
.fwordmark span{
  display:block;text-align:center;
  font-family:"Bricolage Grotesque",ui-sans-serif,sans-serif;
  font-weight:800;letter-spacing:-.045em;line-height:.78;
  font-size:clamp(66px,15.8vw,206px);
  color:transparent;
  background:linear-gradient(180deg,rgba(234,228,211,.30),rgba(234,228,211,.14));
  -webkit-background-clip:text;background-clip:text;
}
@media(max-width:560px){.fwordmark span{letter-spacing:-.05em;}}
.stamp{
  border-top:1px solid var(--edge);padding:20px 0 8px;
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  font-family:"Spline Sans Mono",monospace;font-size:10px;letter-spacing:.05em;
  color:var(--dim);line-height:1.8;
}
.stamp b{color:var(--soft);font-weight:500;}
.stamp a{color:var(--dim);}
.stamp a:hover{color:var(--amb);}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;}
}