/* Tufforge article styles — shared across all content pages */
:root{
  --bg:#0e0e10;--bg-2:#16161a;--bg-3:#1d1d22;--line:#26262d;
  --ink:#f5f5f1;--ink-2:#b8b8b3;--ink-3:#7a7a75;
  --yellow:#FFC72C;--yellow-deep:#E8A91C;--red:#E03A2F;--green:#46C26B;
  --max:880px;--pad:clamp(20px,4vw,40px);
}
*{box-sizing:border-box}html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font:400 17px/1.7 "Inter",system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block;height:auto;border-radius:10px}
a{color:var(--yellow);text-decoration:none;border-bottom:1px solid rgba(255,199,44,0.3)}
a:hover{border-bottom-color:var(--yellow)}
::selection{background:var(--yellow);color:#000}
.head,.display{font-family:"Barlow Condensed","Helvetica Neue",sans-serif;font-weight:800;letter-spacing:-0.005em;line-height:0.98;text-transform:uppercase}
.mono{font-family:"JetBrains Mono",ui-monospace,monospace;letter-spacing:0.02em}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.wrap-wide{max-width:1240px;margin:0 auto;padding:0 var(--pad)}

/* nav */
.promo{background:var(--yellow);color:#0a0a0a;text-align:center;padding:9px 16px;font-size:13px;font-weight:600;letter-spacing:0.04em;text-transform:uppercase}
.nav{position:sticky;top:0;z-index:50;background:rgba(14,14,16,0.85);backdrop-filter:saturate(140%) blur(14px);border-bottom:1px solid var(--line)}
.nav-inner{display:flex;align-items:center;gap:28px;height:68px}
.brand{display:flex;align-items:center;gap:10px;border:0}
.brand-mark{height:30px;background:#3a3a3a;padding:4px 10px;border-radius:4px}
.nav-links{display:flex;gap:28px;margin-left:24px;font-size:13px;font-weight:600;letter-spacing:0.06em;text-transform:uppercase}
.nav-links a{color:var(--ink-2);border:0}
.nav-links a:hover{color:var(--yellow)}
.nav-cta{margin-left:auto}
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 22px;border-radius:6px;font-weight:700;font-size:14px;letter-spacing:0.06em;text-transform:uppercase;border:1px solid transparent;cursor:pointer;transition:transform .15s;white-space:nowrap}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--yellow);color:#0a0a0a;border:0}
.btn-primary:hover{background:#fff}
.btn-ghost{border-color:var(--line);color:var(--ink);background:transparent}
.btn-ghost:hover{border-color:var(--yellow);color:var(--yellow)}

/* article header */
.article-head{padding:clamp(48px,7vw,88px) 0 32px;border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.article-head::before{content:"";position:absolute;inset:0;background:radial-gradient(900px 500px at 80% 0%,rgba(255,199,44,0.07),transparent 60%);pointer-events:none}
.crumbs{font-size:13px;color:var(--ink-3);margin-bottom:24px;letter-spacing:0.04em}
.crumbs a{color:var(--ink-3);border:0}
.crumbs a:hover{color:var(--yellow)}
.crumbs span{margin:0 10px;color:var(--line)}
h1.article-title{font-family:"Barlow Condensed",sans-serif;font-weight:900;text-transform:uppercase;font-size:clamp(40px,5.6vw,72px);line-height:0.98;margin:0 0 22px;max-width:18ch}
.article-meta{display:flex;flex-wrap:wrap;gap:18px 28px;font-size:13px;color:var(--ink-3);align-items:center}
.article-meta b{color:var(--ink);font-weight:600}
.article-meta .pill{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border:1px solid var(--line);border-radius:999px;background:var(--bg-2)}
.article-meta .updated{color:var(--green)}

/* tldr */
.tldr{background:linear-gradient(180deg,rgba(255,199,44,0.10),rgba(255,199,44,0.04));border:1px solid rgba(255,199,44,0.4);border-left:4px solid var(--yellow);padding:24px 28px;border-radius:8px;margin:36px 0;font-size:17px}
.tldr .label{font-family:"Barlow Condensed",sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:0.16em;font-size:13px;color:var(--yellow);margin-bottom:8px}
.tldr p{margin:0;color:var(--ink)}

/* body */
article.body{padding:8px 0 64px;font-size:17px;line-height:1.75}
article.body h2{font-family:"Barlow Condensed",sans-serif;font-weight:800;text-transform:uppercase;font-size:clamp(28px,3.4vw,40px);margin:56px 0 18px;line-height:1.05;letter-spacing:0.005em}
article.body h3{font-family:"Barlow Condensed",sans-serif;font-weight:800;text-transform:uppercase;font-size:22px;margin:36px 0 12px;letter-spacing:0.02em}
article.body p{margin:0 0 18px;color:var(--ink-2)}
article.body p strong, article.body li strong{color:var(--ink);font-weight:700}
article.body ul, article.body ol{padding-left:22px;margin:0 0 22px;color:var(--ink-2)}
article.body li{margin-bottom:8px}
article.body blockquote{border-left:3px solid var(--yellow);padding:6px 20px;margin:24px 0;color:var(--ink);font-style:italic}

/* tables */
.t-wrap{overflow-x:auto;margin:24px 0}
table.spec{width:100%;border-collapse:collapse;font-size:15px;background:var(--bg-2);border:1px solid var(--line);border-radius:10px;overflow:hidden}
table.spec th,table.spec td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--line)}
table.spec th{background:var(--bg-3);font-weight:600;color:var(--ink);font-size:13px;letter-spacing:0.06em;text-transform:uppercase}
table.spec td{color:var(--ink-2)}
table.spec td:first-child{color:var(--ink);font-weight:500}
table.spec tr:last-child td{border-bottom:0}
table.spec td.win{color:var(--green);font-weight:600}
table.spec td .mono{font-family:"JetBrains Mono",monospace;font-size:13px}

/* steps */
ol.steps{counter-reset:s;list-style:none;padding:0;margin:24px 0;display:grid;gap:14px}
ol.steps li{counter-increment:s;background:var(--bg-2);border:1px solid var(--line);border-radius:10px;padding:20px 24px 20px 70px;position:relative;color:var(--ink-2)}
ol.steps li::before{content:counter(s);position:absolute;left:18px;top:18px;width:36px;height:36px;background:var(--yellow);color:#0a0a0a;border-radius:6px;display:flex;align-items:center;justify-content:center;font-family:"Barlow Condensed",sans-serif;font-weight:900;font-size:18px}
ol.steps li b{color:var(--ink);display:block;margin-bottom:4px;font-family:"Barlow Condensed",sans-serif;font-weight:800;text-transform:uppercase;font-size:18px;letter-spacing:0.02em}

/* faq */
.faq-list{display:grid;gap:12px;margin:24px 0}
details.faq{background:var(--bg-2);border:1px solid var(--line);border-radius:10px;overflow:hidden}
details.faq[open]{border-color:rgba(255,199,44,0.4)}
details.faq summary{list-style:none;cursor:pointer;padding:20px 24px;display:flex;align-items:flex-start;justify-content:space-between;gap:24px;font-weight:600;font-size:16px}
details.faq summary::-webkit-details-marker{display:none}
details.faq .plus{flex:none;width:26px;height:26px;border-radius:50%;border:1px solid var(--line);display:inline-flex;align-items:center;justify-content:center;color:var(--yellow);font-weight:700;font-size:16px;transition:transform .2s}
details.faq[open] .plus{transform:rotate(45deg);border-color:var(--yellow)}
details.faq .ans{padding:0 24px 22px;color:var(--ink-2);font-size:15.5px;line-height:1.7}

/* product cta box */
.cta-box{background:var(--bg-2);border:1px solid var(--line);border-radius:14px;padding:28px;margin:40px 0;display:grid;grid-template-columns:120px 1fr auto;gap:24px;align-items:center}
@media(max-width:680px){.cta-box{grid-template-columns:1fr;text-align:center}}
.cta-box img{width:120px;height:120px;object-fit:cover;border-radius:8px}
.cta-box h4{font-family:"Barlow Condensed",sans-serif;font-weight:800;text-transform:uppercase;font-size:24px;margin:0 0 6px;line-height:1}
.cta-box p{margin:0;color:var(--ink-2);font-size:14px}

/* author */
.author{margin:48px 0 0;padding:24px 0;border-top:1px solid var(--line);display:flex;gap:16px;align-items:center;font-size:14px;color:var(--ink-3)}
.author .avatar{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--yellow),var(--yellow-deep));display:flex;align-items:center;justify-content:center;color:#0a0a0a;font-weight:800;font-family:"Barlow Condensed",sans-serif;font-size:18px;flex:none}
.author b{color:var(--ink);font-weight:600}

/* sources */
.sources{margin:32px 0;padding:24px;background:var(--bg-2);border:1px solid var(--line);border-radius:10px;font-size:14px;color:var(--ink-3)}
.sources h4{margin:0 0 10px;font-size:13px;letter-spacing:0.12em;text-transform:uppercase;color:var(--ink);font-family:"Barlow Condensed",sans-serif;font-weight:700}
.sources ol{padding-left:20px;margin:0}
.sources li{margin-bottom:6px}

/* related */
.related{padding:48px 0 64px;border-top:1px solid var(--line);background:var(--bg-2)}
.related h3{font-family:"Barlow Condensed",sans-serif;font-weight:800;text-transform:uppercase;font-size:24px;margin:0 0 24px;letter-spacing:0.02em}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:780px){.related-grid{grid-template-columns:1fr}}
.related-card{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:22px;transition:border-color .2s,transform .2s;display:block;border-bottom:1px solid var(--line)}
.related-card:hover{border-color:var(--yellow);transform:translateY(-2px)}
.related-card .kicker{font-size:11px;color:var(--yellow);letter-spacing:0.16em;text-transform:uppercase;font-weight:700}
.related-card h4{font-family:"Barlow Condensed",sans-serif;font-weight:800;text-transform:uppercase;font-size:20px;margin:8px 0 10px;color:var(--ink);line-height:1.1}
.related-card p{font-size:14px;color:var(--ink-3);margin:0;line-height:1.5}

/* footer */
footer{padding:40px 0;color:var(--ink-3);font-size:14px;background:var(--bg);border-top:1px solid var(--line);text-align:center}
footer a{color:var(--ink-3);border:0;margin:0 12px}
footer a:hover{color:var(--yellow)}

/* dl glossary */
dl.def{margin:24px 0}
dl.def dt{font-family:"Barlow Condensed",sans-serif;font-weight:800;text-transform:uppercase;color:var(--yellow);font-size:16px;letter-spacing:0.02em;margin-top:14px}
dl.def dd{margin:4px 0 0;color:var(--ink-2)}

.skip{position:absolute;left:-9999px}
.skip:focus{position:fixed;left:12px;top:12px;background:var(--yellow);color:#000;padding:10px 14px;border-radius:6px;z-index:100}