/* LinuxIdx — dark "terminal" tech palette (slate + phosphor green + amber), monospace accents,
   directory/grid layout. Distinct from every other network site. */
:root{
  --bg:#0d1117; --panel:#161b22; --panel-2:#1c2330; --ink:#e6edf3; --soft:#9aa7b4; --faint:#6b7785;
  --line:#283039; --term:#3fb950; --term-d:#2ea043; --amber:#e3b341; --blue:#58a6ff;
  --maxw:1160px;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --body:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font:16px/1.65 var(--body);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}
a{color:var(--blue);text-decoration:none}a:hover{color:#79b8ff}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
h1,h2,h3{font-weight:800;letter-spacing:-.01em}

header.site{background:#0a0e13;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.nav{display:flex;align-items:center;justify-content:space-between;padding:13px 22px;max-width:var(--maxw);margin:0 auto}
.brand{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-weight:700;font-size:1.2rem;color:var(--ink)}
.brand .logo{font-size:1.2rem}
.brand b{color:var(--term)}
.brand::before{content:"~$ ";color:var(--term);font-family:var(--mono)}
.nav nav a{color:var(--soft);font-family:var(--mono);font-size:.82rem;margin-left:20px}
.nav nav a:hover{color:var(--term)}

/* hero — terminal card */
.hero{padding:50px 0 36px;border-bottom:1px solid var(--line)}
.hero .term{background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden;max-width:780px;margin:0 auto}
.hero .bar{display:flex;gap:7px;padding:11px 14px;background:var(--panel-2);border-bottom:1px solid var(--line)}
.hero .bar i{width:11px;height:11px;border-radius:50%}
.hero .bar i:nth-child(1){background:#ff5f56}.hero .bar i:nth-child(2){background:#ffbd2e}.hero .bar i:nth-child(3){background:#27c93f}
.hero .body{padding:26px 28px 30px;font-family:var(--mono)}
.hero .body .p{color:var(--term)}
.hero h1{font-family:var(--body);font-size:clamp(1.9rem,4.6vw,2.8rem);line-height:1.12;margin:6px 0 12px;color:#fff}
.hero p{font-family:var(--body);color:var(--soft);font-size:1.1rem;max-width:56ch;margin:0}
.hero .cursor{display:inline-block;width:9px;height:1.1em;background:var(--term);vertical-align:-2px;animation:blink 1.1s step-end infinite}
@keyframes blink{50%{opacity:0}}

.sec{display:flex;align-items:center;gap:12px;margin:46px 0 18px}
.sec h2{font-size:1.4rem;margin:0;color:#fff}
.sec h2::before{content:"# ";color:var(--term);font-family:var(--mono)}
.sec .l{flex:1;height:1px;background:var(--line)}

/* distro finder */
.finder{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:22px 24px}
.finder .q{font-weight:700;margin:0 0 14px;color:#fff}
.finder .opts{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:8px}
.finder .opt{background:var(--panel-2);border:1px solid var(--line);color:var(--ink);font-family:var(--mono);font-size:.85rem;padding:9px 16px;border-radius:999px;cursor:pointer;transition:.12s}
.finder .opt:hover{border-color:var(--term);color:var(--term)}
.finder .opt.on{background:var(--term);color:#04130a;border-color:var(--term);font-weight:700}
.finder .result{margin-top:18px;padding-top:18px;border-top:1px solid var(--line);min-height:54px}
.finder .result b{color:var(--amber);font-family:var(--mono)}
.finder .result .why{color:var(--soft);font-size:.92rem;margin-top:4px}

/* directory grid */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.tile{display:block;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:18px 20px;transition:.14s}
.tile:hover{border-color:var(--term);transform:translateY(-2px);text-decoration:none}
.tile .ico{font-size:1.5rem}
.tile h3{font-size:1.1rem;margin:8px 0 5px;color:#fff}
.tile:hover h3{color:var(--term)}
.tile p{color:var(--soft);font-size:.88rem;margin:0}
.tile .cmd{font-family:var(--mono);font-size:.78rem;color:var(--amber);margin-top:10px;display:block}

/* github trending widget */
.trend{background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.trend .h{padding:13px 18px;background:var(--panel-2);border-bottom:1px solid var(--line);font-family:var(--mono);font-size:.85rem;color:var(--soft)}
.trend ul{list-style:none;margin:0;padding:0}
.trend li{padding:12px 18px;border-bottom:1px solid var(--line)}
.trend li:last-child{border-bottom:0}
.trend .top{display:flex;justify-content:space-between;gap:12px}
.trend li a{font-family:var(--mono);font-size:.9rem;color:var(--ink)}.trend li a:hover{color:var(--term)}
.trend li .star{font-family:var(--mono);font-size:.82rem;color:var(--amber);white-space:nowrap}
.trend li .desc{display:block;color:var(--faint);font-size:.8rem;font-family:var(--body);margin-top:3px}

/* article */
article.post{max-width:740px;margin:0 auto;padding:42px 0 10px}
article.post .meta{font-family:var(--mono);font-size:.8rem;color:var(--term);margin-bottom:12px}
article.post h1{font-size:clamp(1.8rem,4.2vw,2.5rem);line-height:1.14;margin:6px 0 18px;color:#fff}
article.post h2{font-size:1.45rem;margin:36px 0 12px;color:#fff}
article.post p,article.post li{font-size:1.05rem;color:var(--ink)}
article.post .lead{font-size:1.2rem;color:#c9d4de}
article.post code{font-family:var(--mono);font-size:.88em;background:var(--panel-2);color:var(--term);padding:2px 7px;border-radius:5px}
article.post pre{background:#010409;border:1px solid var(--line);border-radius:10px;padding:16px 18px;overflow:auto;font-family:var(--mono);font-size:.9rem;color:#e6edf3;margin:18px 0}
article.post pre code{background:none;color:inherit;padding:0}
article.post figure{margin:24px 0}article.post figure img{border-radius:10px}
article.post figcaption{font-size:.83rem;color:var(--faint);text-align:center;margin-top:8px}
.callout{background:var(--panel-2);border-left:4px solid var(--term);border-radius:8px;padding:15px 20px;margin:24px 0}
.related{border-top:1px solid var(--line);margin-top:42px;padding-top:18px}
.related h3{font-family:var(--mono);font-size:.82rem;color:var(--faint);margin:0 0 10px}
.related a{display:block;padding:8px 0;font-weight:700;color:#fff}.related a:hover{color:var(--term)}

footer.site{background:#0a0e13;border-top:1px solid var(--line);margin-top:56px;padding:34px 0;color:var(--soft);font-size:.88rem;text-align:center}
footer.site a{color:var(--blue)}footer.site a:hover{color:var(--term)}
.disc{font-size:.8rem;color:var(--faint);max-width:660px;margin:14px auto 0;font-family:var(--mono)}
@media(max-width:560px){.nav nav a{margin-left:13px}}

/* ===== ENHANCEMENT PASS (nod to the 2010 "Linux Index" amber-directory heritage + header fix) ===== */
header.site .nav{padding-left:0;padding-right:0}
header.site .nav.wrap,header.site .wrap.nav{padding:13px 22px}
/* warm the amber toward the original 2010 directory orange, and add an "index" strip */
:root{--amber:#e8943a;--rust:#d8542a}
.idxline{font-family:var(--mono);font-size:.74rem;letter-spacing:.08em;color:#0a0e13;text-align:center;
  padding:6px 16px;background:linear-gradient(90deg,var(--amber),var(--rust));font-weight:700}
.idxline b{color:#0a0e13;text-decoration:underline}
/* directory-era warmth on section headers + cards */
.sec h2::before{content:"› ";color:var(--rust)}
.finder{box-shadow:0 0 0 1px rgba(232,148,58,.18)}
article.post h2{border-left:3px solid var(--rust);padding-left:12px}
article.post .lead::first-letter{color:var(--amber)}
.callout{border-left-color:var(--amber)!important}

/* fix: kill the top-left seam between the sticky header border and the gradient idxline
   strip. Header drops its bottom border (the strip is the divider) and un-sticks so no
   repaint hairline is left in the corner. */
header.site{border-bottom:0;position:static}
.idxline{margin:0;width:100%}