/* DegenKit blog — shared by /blog/ and every post. Dark by default, light via html[data-theme="light"]. */
:root{--gut:clamp(16px,4vw,40px); --ink:#F4EFE6; --soft:#D8D3C7; --btn-grad:linear-gradient(180deg,#FFB44F 0%,#FF7A1A 55%,#F2560C 100%); --o-shadow:#A83C05;}
html[data-theme="light"]{--void:#FAF7F2; --panel:#FFFFFF; --panel-2:#F3EEE4; --line:#E2DBCB; --cream:#231F19; --muted:#77705E; --ink:#231F19; --soft:#3A352C; --orange-bright:#C2410C;}
html[data-theme="light"] header{background:rgba(250,247,242,0.9);}
html[data-theme="light"] .logo-text{color:#231F19;}
html[data-theme="light"] nav.site-nav a.navlink:hover{color:#231F19;}
html[data-theme="light"] .footer-brand p, html[data-theme="light"] .footer-col a{color:#77705E;}
html[data-theme="light"] .footer-col h4{color:#231F19;}

.bwrap{max-width:1200px; margin:0 auto; padding:0 var(--gut) 90px;}
.theme-toggle{width:40px; height:40px; border-radius:50%; border:1px solid var(--line); background:var(--panel); cursor:pointer; margin-right:10px;}
.header-actions{display:flex; align-items:center;}

/* ---------- index ---------- */
.b-hero{padding:clamp(34px,6vw,64px) 0 clamp(20px,3vw,34px);}
.b-hero h1{font-family:'Space Grotesk',sans-serif; font-weight:800; font-size:clamp(34px,5.4vw,58px); line-height:1.04; margin:6px 0 12px;
  background:linear-gradient(90deg,#FFD9A8,#FF7A1A 55%,#E8505B); -webkit-background-clip:text; background-clip:text; color:transparent;}
html[data-theme="light"] .b-hero h1{background:linear-gradient(90deg,#C2410C,#EA580C 55%,#DB2777); -webkit-background-clip:text; background-clip:text;}
.b-hero p{color:var(--muted); font-size:17px; margin:0; max-width:560px;}
.empty{color:var(--muted); padding:40px 0;}

.cover{position:relative; aspect-ratio:16/9; overflow:hidden; border-radius:14px; background:var(--panel-2); border:1px solid var(--line);}
.cover img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s;}
.cover.ph{display:grid; place-items:center; background:linear-gradient(135deg,#FF7A1A22,#E8505B33), var(--panel);}
.cover.ph img{width:28%; height:auto; object-fit:contain; opacity:.9;}
.chip{display:inline-block; font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.08em; text-transform:uppercase; padding:3px 10px; border-radius:100px; background:rgba(255,122,26,.14); color:var(--orange-bright);}
.c-meta{display:flex; align-items:center; flex-wrap:wrap; gap:8px 10px; font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--muted);}

.feature{display:grid; grid-template-columns:1.35fr 1fr; gap:clamp(20px,3vw,40px); align-items:center; padding:clamp(14px,2vw,22px); border:1px solid var(--line); border-radius:14px; background:var(--panel); transition:border-color .15s, transform .15s; margin-bottom:28px;}
.feature:hover{border-color:rgba(255,122,26,.45); transform:translateY(-2px);}
.feature:hover .cover img, .card:hover .cover img{transform:scale(1.04);}
.feature h2{font-family:'Space Grotesk',sans-serif; font-size:clamp(26px,3.2vw,40px); line-height:1.08; margin:14px 0 12px; color:var(--ink);}
.feature p{color:var(--muted); font-size:16.5px; line-height:1.6; margin:0 0 18px;}
.more{font-weight:700; color:var(--orange-bright);}

.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.grid.two{grid-template-columns:repeat(2,1fr);}
.card{display:flex; flex-direction:column; gap:14px; transition:transform .15s;}
.card:hover{transform:translateY(-3px);}
.card h2{font-family:'Space Grotesk',sans-serif; font-size:21px; line-height:1.2; margin:8px 0 8px; color:var(--ink);}
.card p{color:var(--muted); font-size:14.5px; line-height:1.6; margin:0; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;}

/* ---------- post ---------- */
.post{max-width:1000px; margin:0 auto;}
.p-head{max-width:760px; margin:0 auto; padding:clamp(28px,5vw,56px) 0 clamp(18px,3vw,28px);}
.back{font-family:'JetBrains Mono',monospace; font-size:13px; color:var(--muted); display:inline-block; margin-bottom:20px;}
.back:hover{color:var(--orange-bright);}
.chips{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px;}
.p-head h1{font-family:'Space Grotesk',sans-serif; font-weight:800; font-size:clamp(32px,5.4vw,56px); line-height:1.04; letter-spacing:-.02em; margin:0 0 16px; color:var(--ink);}
.lede{font-size:clamp(17px,2vw,20px); line-height:1.6; color:var(--muted); margin:0 0 22px;}
.byline{display:flex; align-items:center; gap:12px;}
.byline img{width:40px; height:40px; border-radius:50%; background:var(--panel-2); border:1px solid var(--line); padding:4px;}
.byline span{display:flex; flex-direction:column; line-height:1.35;}
.byline b{font-size:14px; color:var(--ink);}
.byline i{font-style:normal; font-size:13px; color:var(--muted);}
.cover.hero{margin:6px 0 clamp(28px,4vw,44px); border-radius:14px;}
.cover.hero img{transition:none;}

.prose{max-width:720px; margin:0 auto;}
.prose p, .prose li{font-size:clamp(16.5px,1.9vw,18px); line-height:1.85; color:var(--soft);}
.prose p{margin:0 0 1.3em;}
.prose h2{font-family:'Space Grotesk',sans-serif; font-size:clamp(25px,3.2vw,32px); line-height:1.15; margin:1.9em 0 .6em; color:var(--ink); scroll-margin-top:90px;}
.prose h3{font-family:'Space Grotesk',sans-serif; font-size:clamp(20px,2.4vw,24px); margin:1.6em 0 .5em; color:var(--ink); scroll-margin-top:90px;}
.prose a{color:var(--orange-bright); text-decoration:underline; text-underline-offset:3px;}
.prose strong{color:var(--ink);}
.prose ul, .prose ol{padding-left:1.3em; margin:0 0 1.3em;}
.prose li{margin:.35em 0;}
.prose hr{border:0; border-top:1px solid var(--line); margin:2.4em 0;}
.prose code{font-family:'JetBrains Mono',monospace; font-size:.88em; padding:2px 6px; border-radius:6px; background:var(--panel-2); border:1px solid var(--line); color:var(--ink); overflow-wrap:anywhere;}
.prose pre{overflow-x:auto; padding:16px 18px; border-radius:12px; background:var(--panel); border:1px solid var(--line); margin:0 0 1.4em;}
.prose pre code{background:none; border:0; padding:0; font-size:14px; line-height:1.7; overflow-wrap:normal;}
.prose blockquote{margin:1.6em 0; padding:6px 0 6px 20px; border-left:3px solid #FF7A1A;}
.prose blockquote p{font-size:clamp(18px,2.2vw,21px); font-style:italic; color:var(--ink); margin:0 0 .6em;}
.prose figure{margin:2em 0;}
.prose figure img, .prose figure video{display:block; width:100%; height:auto; border-radius:14px; border:1px solid var(--line); background:var(--panel-2);}
.prose figcaption{margin-top:10px; text-align:center; font-size:13.5px; color:var(--muted); line-height:1.5;}
.prose figure.embed{position:relative; aspect-ratio:16/9;}
.prose figure.embed iframe{position:absolute; inset:0; width:100%; height:100%; border:0; border-radius:14px;}
.callout{margin:1.8em 0; padding:16px 18px; border-radius:12px; border:1px solid rgba(255,122,26,.35); background:rgba(255,122,26,.08);}
.callout.warning{border-color:rgba(255,46,106,.4); background:rgba(255,46,106,.08);}
.callout strong{display:block; margin-bottom:4px; font-family:'Space Grotesk',sans-serif; font-size:16px; color:var(--ink);}
.callout p{margin:0; font-size:16px; line-height:1.7;}

.share{max-width:720px; margin:48px auto 0; padding:22px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;}
.share b{font-family:'Space Grotesk',sans-serif; font-size:18px; color:var(--ink);}
.share-btns{display:flex; gap:10px; flex-wrap:wrap;}
.s-x, .s-copy{padding:10px 18px; border-radius:10px; font-weight:700; font-size:14px; cursor:pointer; font-family:inherit; text-decoration:none;}
.s-x{background:var(--btn-grad); color:#1F0B00; border:0; box-shadow:0 3px 0 var(--o-shadow);}
.s-copy{background:var(--panel); color:var(--ink); border:1px solid var(--line);}
.s-copy:hover{border-color:#FF7A1A;}
.cta{max-width:720px; margin:28px auto 0; padding:22px 24px; border-radius:14px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  background:linear-gradient(135deg,rgba(255,122,26,.18),rgba(232,80,91,.14)), var(--panel); border:1px solid rgba(255,122,26,.35);}
.cta h3{font-family:'Space Grotesk',sans-serif; font-size:22px; margin:0 0 4px; color:var(--ink);}
.cta p{margin:0; color:var(--muted); font-size:15px;}
.related{margin-top:70px;}
.related h3{font-family:'Space Grotesk',sans-serif; font-size:26px; margin:0 0 20px; color:var(--ink);}

@media (max-width:980px){ .grid{grid-template-columns:repeat(2,1fr);} .feature{grid-template-columns:1fr;} }
@media (max-width:640px){
  .grid, .grid.two{grid-template-columns:1fr;}
  nav.site-nav{display:none;}
  .share, .cta{flex-direction:column; align-items:stretch; text-align:left;}
  .share-btns > *{flex:1; text-align:center;}
  .cta .btn-launch{text-align:center;}
}