:root{--bg:#0b0c0f;--text:#e6e8ee;--muted:#9aa3b2;--card:#111317;--border:#1a1d23;--link:#8ab4ff}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Inter,Roboto,Helvetica,Arial,sans-serif;line-height:1.55}
a,a:visited{color:var(--link);text-decoration:none} a:hover{text-decoration:underline}
.container{max-width:920px;margin:0 auto;padding:16px}

.hero{display:flex;justify-content:space-between;gap:12px;align-items:center;background:linear-gradient(180deg,rgba(255,255,255,.03),transparent);border:1px solid var(--border);border-radius:16px;padding:16px;margin:16px 0}
.site-title{display:flex;align-items:center;gap:12px;margin:0;letter-spacing:-.02em;font-weight:800}
.logo{display:inline-block;height:clamp(30px, 3.2vw, 44px);width:auto;vertical-align:middle;filter:invert(1) brightness(1.5);object-fit:contain;max-width:100%;flex:0 0 auto}
.badge{font-size:12px;padding:2px 8px;border:1px solid var(--border);border-radius:999px;color:var(--muted)}

.nav{display:flex;gap:16px;flex-wrap:wrap;margin:8px 0 0}
.nav a{padding:8px 10px;border-radius:10px}
.nav-toggle{display:none;align-items:center;justify-content:center;width:42px;height:42px;border:1px solid var(--border);border-radius:12px;background:var(--card);color:var(--text)}
.nav-toggle:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(39,48,67,.35)}

.search{width:min(360px,100%)}
.search input{width:100%;appearance:none;background:var(--card);color:var(--text);border:1px solid var(--border);border-radius:12px;padding:10px 12px;outline:none}
.search input::placeholder{color:#7f8a99}
.search input:focus-visible{border-color:#273043;box-shadow:0 0 0 3px rgba(39,48,67,.35)}

.list{display:block;margin:12px 0}
.card{display:block;background:var(--card);border:1px solid var(--border);border-radius:16px;padding:16px;margin:12px 0;transition:transform .08s ease,border-color .2s ease}
.card:hover{transform:translateY(-1px);border-color:#273043}
.post-title{font-size:clamp(18px,3.5vw,22px);font-weight:700;letter-spacing:-.01em;margin:0 0 6px}
.post-meta{font-size:13px;color:var(--muted);margin-bottom:8px}
.post-summary{color:#cfd3db;margin:0}

.footer{border-top:1px solid var(--border);margin-top:28px;padding-top:20px;color:var(--muted);font-size:14px}

.article{max-width:820px;margin:0 auto}
.article h1{font-size:clamp(28px,5vw,40px);letter-spacing:-.02em;margin:0 0 8px}
.article .meta{color:var(--muted);font-size:13px;margin:8px 0 18px}
.article img,.article video{max-width:100%;height:auto;border-radius:12px;border:1px solid var(--border)}
.article pre{overflow:auto;background:#0a0c10;border:1px solid var(--border);border-radius:12px;padding:12px}
.article code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}
.article blockquote{margin:12px 0;padding-left:14px;border-left:3px solid #273043;color:#cfd3db}
.article hr{border:0;border-top:1px solid var(--border);margin:24px 0}

.visually-hidden{position:absolute!important;clip:rect(1px,1px,1px,1px);padding:0;border:0;height:1px;width:1px;overflow:hidden}

@media (max-width:640px){
  .hero{align-items:flex-start}
  .hero>div{width:100%}
  .nav-toggle{display:flex}
  .logo{height:24px;max-height:24px}
  .nav{display:none;width:100%;margin-top:10px;padding:10px;border:1px solid var(--border);border-radius:12px;background:var(--card);flex-direction:column;gap:8px}
  .nav.open{display:flex}
  .nav a{}
  .search{width:100%}
}


/* Header logo constraints */
.site-title .logo{
  display:inline-block;
  height: clamp(30px, 3.2vw, 44px);
  max-height: 44px;
  width: auto;
  max-width: 40vw;
  vertical-align: middle;
  filter: invert(1) brightness(1.5);
  object-fit: contain;
  flex: 0 0 auto;
}
/* Prevent global img rules from stretching header logo */
.hero img.logo{ max-width: 40vw; height: auto }


@media (max-width:640px){
  .site-title .logo{
    height: 22px !important;
    max-height: 22px !important;
    max-width: 50vw;
  }
  /* Keep header layout from breaking due to long flows */
  .hero > div{ min-width: 0 }
}


 }

/* Nav always visible; compact on mobile */
.nav{ display:flex; gap:16px; flex-wrap:wrap; align-items:center; margin:8px 0 0 }
.nav a{ padding:8px 10px; border-radius:10px; white-space:nowrap }

@media (max-width:640px){
  .nav{ gap:10px; margin-top:8px }
  .nav a{ padding:6px 8px; font-size:14px }
  .search{ width:100% }
}



  .hero > div{ display: block; width: 100%; }
  .nav{ display: flex !important; flex-wrap: wrap; gap: 10px; margin-top: 0; }
  .nav a{ padding: 6px 8px; font-size: 14px; white-space: nowrap; }
  .search{ width: 100%; }
}


a, a:visited{ color: var(--link); text-decoration: none }



  .hero > div{ display: block; width: 100%; }
  .nav{
    display:flex !important;
    flex-wrap: nowrap;            /* keep one row */
    overflow-x: auto;             /* allow scroll if needed */
    -webkit-overflow-scrolling: touch;
    gap: 8px;
    margin-top: 0;
    scrollbar-width: none;        /* Firefox hide scrollbar */
  }
  .nav::-webkit-scrollbar{ display:none } /* WebKit hide scrollbar */
  .nav a{
    white-space: nowrap;          /* prevent wrapping of links */
    padding: 6px 8px;
    font-size: 14px;
    flex: 0 0 auto;               /* prevent flex from shrinking links weirdly */
  }
  .search{ width: 100%; }
}


/* === Mobile: force single-row nav that fits === */
@media (max-width:640px){
  /* Keep header stacked, but nav row is horizontal */
  .hero{ flex-direction: column; align-items: stretch; gap: 8px; }
  .hero > div{ width:100%; }

  /* Free up horizontal space */
  .site-title .badge{ display:none; }
  .site-title .logo{ height:18px; max-height:18px; }

  /* Nav: single row, no wrap */
  .nav{
    display:flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items:center;
    gap:6px;
    overflow:hidden; /* no scroll; we will shrink instead */
  }

  /* Links: inline, compact */
  .nav a{
    display:inline-flex !important;
    width:auto !important;
    padding:4px 6px !important;
    font-size:12px !important;
    line-height:1.2 !important;
    white-space:nowrap !important;
    flex:0 0 auto !important;
  }

  /* Slightly tighten the search width for very small phones */
  .search{ width:100%; }
}