/* ===== Design tokens (add the missing variables) ===== */
    :root{
      --slider-max-w: 1200px; 
      --container: 1200px;      /* full site container */
      --feed-max: 860px;        /* centered column width */
      --gap: 1.1rem;

      --bg: #fafafa;
      --text: #111;
      --muted: #666;

      --card: #fff;
      --border: #eaeaea;
      --radius: 14px;
      --shadow: 0 6px 16px rgba(0,0,0,.08);

      --brand: #0c4a6e;
      --brand-ink: #fff;
    }

    *{box-sizing:border-box}
    body{
      margin:0;
      padding:0;
      font-family: Georgia, serif;
      background: var(--bg);
      color: var(--text);
    }
    
    a{color:inherit;text-decoration:none}
    
    /* ===== Header (simplified for centering on mobile) ===== */
    .site-header{
      width:100%;
      max-width: var(--container);
      margin: 15px auto;
      display:flex;
      justify-content:space-between;
      align-items:center;
      padding:.75rem 1rem;
      background:#fff;
      border-radius:.5rem;
      box-shadow:0 2px 6px rgba(0,0,0,.08);
      position:relative;
      z-index:20;
    }
    .site-header .logo{margin-right:20px}
    .site-header .logo img{width:150px;height:25px;object-fit:contain;display:block}

    body.dark-mode{background:#1a1a1a;color:#eee}
    body.dark-mode .site-header{background:#777}


    .nav-right{display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap}
    .nav-links{display:flex;gap:1rem}
    .nav-links a{color:#222;font-weight:500;font-size:.95rem}
    .nav-links a:hover{color:#555}

    .search-form{display:flex;align-items:center}
    .search-form input[type="text"]{
      padding:.35rem .6rem;border:1px solid #ccc;border-radius:.35rem 0 0 .35rem;font-size:.9rem
    }
    .search-form button{
      border:1px solid #ccc;border-left:none;padding:.4rem .6rem;background:#ddd;color:#fff;
      border-radius:0 .35rem .35rem 0;cursor:pointer
    }
    .search-form button:hover{background:#444}


    /* switch wrapper */
.theme-switch{
  display:inline-flex;
  align-items:center;
  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
}

/* hide the native checkbox but keep it accessible */
.theme-switch input{
  position:absolute;
  opacity:0;
  width:0;
  height:0;
}

/* the short scroll bar (track) */
.switch-track{
  width:44px;     /* short bar */
  height:24px;
  background:#ddd;
  border-radius:999px;
  padding:2px;
  box-sizing:border-box;
  display:inline-block;
  transition:background .2s ease;
}

/* the round button (thumb) */
.switch-thumb{
  width:20px;
  height:20px;
  border-radius:50%;
  background:#005ea6;
  box-shadow:0 2px 8px rgba(0,0,0,.15);
  display:block;
  transform:translateX(0);
  transition:transform .2s ease;
}

/* when checked: bar darkens, knob slides right */
.theme-switch input:checked + .switch-track{
  background:#4a5568; /* or any accent you like */
}
.theme-switch input:checked + .switch-track .switch-thumb{
  transform:translateX(20px);
}

/* dark-mode contrast tweak (optional) */
.dark-mode .switch-track{ background:#555; }
.dark-mode .switch-thumb{ background:#005ea6; }

/* keyboard focus ring */
.theme-switch input:focus-visible + .switch-track{
  outline:2px solid #0a84ff;
  outline-offset:2px;
}

    .category-menu{display:flex;align-items:center;gap:.5rem}
    .category-toggle{
      display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;
      border:1px solid #ddd;border-radius:.4rem;background:#fff;cursor:pointer;
      box-shadow:0 1px 2px rgba(0,0,0,.06) inset
    }
    .category-toggle:hover{background:#f7f7f7}

    @media (max-width: 700px){
      .site-header{
        flex-direction:column;gap:.75rem;padding:.6rem .75rem;align-items:center
      }
      .site-header .logo{margin:0 auto}
      .nav-right{
        width:100%;display:grid;grid-template-columns:1fr auto;gap:.5rem .75rem;align-items:center
      }
      .nav-links{grid-column:1 / -1;overflow:hidden;white-space:nowrap;position:relative}
      .nav-links .nav-links-track{
        display:inline-flex;gap:.75rem;will-change:transform;animation:nav-marquee 10s linear infinite
      }
      @keyframes nav-marquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
      .search-form{grid-column:1 / -1}
      .category-menu{justify-self:end}
    }

    /* ===== Mega menu overlay/panel ===== */
    .category-overlay{position:fixed;inset:0;background:rgba(0,0,0,.25);opacity:0;pointer-events:none;transition:opacity .2s ease;z-index:15}
    .category-panel{
      position:fixed;left:50%;transform:translateX(-50%) translateY(-12px);top:64px;width:min(1200px,96vw);
      max-height:80vh;overflow:auto;background:#fff;border:1px solid #e6e6e6;border-radius:12px;
      box-shadow:0 22px 60px rgba(0,0,0,.18);opacity:0;pointer-events:none;transition:opacity .2s ease, transform .2s ease;z-index:30
    }
    .category-panel::before{content:"";position:sticky;top:0;display:block;height:68px;background:linear-gradient(180deg,#eaf7ff 0%,#ffffff 100%);border-bottom:1px solid #eef3f6}
    .panel-inner{padding:1rem 1.25rem 1.5rem}
    .panel-close{position:absolute;top:10px;right:10px;width:36px;height:36px;border-radius:50%;border:1px solid #ddd;background:#fff;cursor:pointer;font-size:22px;line-height:1}
    .chips{display:grid;grid-template-columns:repeat(5, minmax(0,1fr));gap:14px 18px;padding-top:14px}
    @media (max-width: 1000px){.chips{grid-template-columns:repeat(4,1fr)}}
    @media (max-width: 760px){ .chips{grid-template-columns:repeat(3,1fr)}}
    @media (max-width: 520px){ .chips{grid-template-columns:repeat(2,1fr)}}
    .chip{display:inline-flex;align-items:center;justify-content:center;padding:.55rem .9rem;background:#fff;border:1px solid #e6ecf0;border-radius:999px;color:#222;font-size:.95rem;box-shadow:0 1px 2px rgba(0,0,0,.05)}
    .chip:hover{background:#f3f7fa}
    .panel-cols{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:20px;color:#333}

    .menu-open .category-overlay{opacity:1;pointer-events:auto}
    .menu-open .category-panel{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)}
    .menu-open{overflow:hidden}

    /* ===== Category container & centered feed ===== */
    .page-wrap{max-width:var(--container);margin:0 auto;padding:1rem}
    .catbox{
      background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);
      padding:1rem 1.2rem;margin:0 auto 1rem; width:min(100%, var(--feed-max));
    }
    .catbox h1{margin:.2rem 0 0;font-size:1.6rem}
    .catbox p{margin:.5rem 0 0;color:var(--muted)}

    .feed{
      display:flex;flex-direction:column;gap:var(--gap);
      width:min(100%, var(--feed-max));
      margin: 0 auto;           /* <-- centers the column */
    }

    .post{
      display:flex;flex-direction:row;gap:1rem;align-items:flex-start;
      background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
      box-shadow:var(--shadow);padding:.9rem;transition:transform .15s ease;
      width:100%;               /* full width of the centered feed */
      margin: 0 auto;
    }
    .post:hover{transform:translateY(-2px)}

body.dark-mode .post {background:#222;}
body.dark-mode .catbox {background:#222;}
body.dark-mode .post a, body.dark-mode .catbox h1, body.dark-mode .catbox p, body.dark-mode .meta {color:#eee;}



    .thumb-wrap{flex:0 0 260px}
    .thumb{width:100%;height:160px;object-fit:cover;border-radius:10px;display:block}

    .content{flex:1 1 auto;min-width:0}
    .title{font-size:1.2rem;line-height:1.35;margin:0}
    .title a{color:var(--text)}
    .meta{color:var(--muted);font-size:.92rem;margin:.45rem 0 0}
    .excerpt{color:#333;font-size:.98rem;margin:.55rem 0 0}

    .actions{display:flex;gap:.5rem;margin-top:.7rem;flex-wrap:wrap}
    .btn{display:inline-block;padding:.48rem .8rem;border-radius:8px;text-decoration:none;font-weight:600}
    .btn-primary{background:var(--brand);color:var(--brand-ink)}
    .btn-primary:hover{filter:brightness(.95)}
    .btn-ghost{border:1px solid var(--border);background:#f9f9f9;color:#222}
    .btn-ghost:hover{background:#eee}

    @media (max-width: 720px){
      .post{flex-direction:column}
      .thumb-wrap{flex:unset;width:100%}
      .thumb{width:100%;height:auto;aspect-ratio:16/9}
    }

    .infinite-loader{display:flex;align-items:center;justify-content:center;padding:1rem;color:var(--muted);width:min(100%, var(--feed-max));margin:0 auto}
    .end-marker{color:var(--muted);text-align:center;padding:1rem;width:min(100%, var(--feed-max));margin:0 auto}

/* ===== Footer ===== */
.site-footer {
  background: #222;
  color: #eee;
  padding: 2.5rem 1rem;
  margin-top: 3rem;
}

.footer-inner {
  max-width: var(--slider-max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.footer-col h3 {
  font-size: 1.1rem;
  margin-bottom: 1rem;
  color: #fff;
}

.footer-col p,
.footer-col li,
.footer-col a {
  font-size: .95rem;
  line-height: 1.6;
  color: #ddd;
  text-decoration: none;
}

.footer-col a:hover {
  color: #fff;
  text-decoration: underline;
}

.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

/* responsive: stack columns on mobile */
@media (max-width: 768px) {
  .footer-inner {
    grid-template-columns: 1fr;
    text-align: center;
  }
}

/* ===== Footer Bottom Strip ===== */
.footer-bottom {
  background: #111;
  color: #aaa;
  font-size: 0.85rem;
  text-align: center;
  padding: 1rem;
  margin-top: 1rem;
}

.footer-bottom a {
  color: #aaa;
  text-decoration: none;
  margin: 0 .5rem;
}

.footer-bottom a:hover {
  color: #fff;
}