:root{
      --clr-lime:#A3FF00; --clr-blue:#0066FF; --clr-text:#1A1A1A; --clr-ui:#B3B3B3; --clr-bg:#F5F5F5; --clr-white:#FFFFFF; --clr-border:#E5E5E5;
      --ff-heading:'Inter','Montserrat',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
      --ff-body:'Roboto','Source Sans Pro',system-ui,-apple-system,'Segoe UI',sans-serif;
      --ff-mono:'JetBrains Mono','Fira Code',ui-monospace,Menlo,Consolas,monospace;
      --radius:14px; --shadow:0 8px 24px rgba(0,0,0,.06); --container:min(1400px,94vw);
    }
    html{scroll-behavior:smooth}
    body{margin:0; font-family:var(--ff-body); color:var(--clr-text); background:#fff; font-size:clamp(16px,1.3vw,18px)}
    .container{width:var(--container); margin-inline:auto}
    
    

    /* Minimal header */
    .bar{position:sticky; top:0; z-index:100; backdrop-filter:saturate(1.2) blur(8px); background:rgba(255,255,255,.9); border-bottom:1px solid var(--clr-border)}
    .bar-inner{display:flex; align-items:center; gap:.8rem; justify-content:space-between; padding:.7rem 0}
    .brand{display:flex; align-items:center; gap:.6rem; font-weight:800; font-family:var(--ff-heading)}
    .dot{width:10px; height:10px; border-radius:3px; background:linear-gradient(135deg,var(--clr-lime),var(--clr-blue)); box-shadow:0 0 0 6px color-mix(in srgb, var(--clr-lime) 25%, transparent)}

    .nav_link_main{
        text-decoration: none;
        color: var(--clr-text);
    }
    
    .nav-links{display:flex; gap:1.2rem}
    .nav-links a{color:var(--clr-text); text-decoration:none; font-weight:600; position:relative}
    .nav-links a:after{content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; background:var(--clr-lime); transform:scaleX(0); transform-origin:left; transition:transform .2s ease}
    .nav-links a:hover:after{transform:scaleX(1)}
    
    /* Filters */
    .filters{display:flex; gap:.45rem; flex-wrap:wrap; align-items:center}
    .chip{border:1px solid var(--clr-ui); border-radius:999px; padding:.45rem .7rem; font-weight:700; cursor:pointer; user-select:none}
    .chip.active{border-color:var(--clr-blue); box-shadow:0 0 0 3px color-mix(in srgb, var(--clr-blue) 20%, transparent)}
    .search{display:flex; align-items:center; gap:.5rem; border:1px solid var(--clr-border); border-radius:999px; padding:.5rem .8rem; background:#fff}
    .search input{border:0; outline:0; font-size:1rem; background:transparent; min-width:220px}

    /* Gallery grid */
    main{padding:1rem 0 2rem}
    .grid{display:grid; grid-template-columns:repeat(12,1fr); gap:.8rem}
    .card{position:relative; border:1px solid var(--clr-border); border-radius:var(--radius); overflow:hidden; background:#fff; box-shadow:var(--shadow)}
    .ph{aspect-ratio:4/3;}
    .ph img{width:100%; height:100%; object-fit:cover; display:block}
    .badge{position:absolute; top:.6rem; left:.6rem; background:rgba(0,0,0,.72); color:#fff; font-size:.75rem; padding:.25rem .5rem; border-radius:6px}
    .like{position:absolute; top:.6rem; right:.6rem; background:rgba(255,255,255,.92); border:1px solid var(--clr-border); padding:.25rem .5rem; border-radius:999px; font-size:.78rem}
    .meta{display:flex; align-items:center; justify-content:space-between; gap:.6rem; padding:.65rem .8rem; border-top:1px solid var(--clr-border); background:#fff}
    .title{font-weight:800; font-family:var(--ff-heading); font-size:1rem; margin:0}
    .muted{color:#555; font-size:.9rem}
    .tag{display:inline-block; padding:.25rem .5rem; border-radius:999px; font-size:.75rem; font-weight:700; background:color-mix(in srgb, var(--clr-lime) 20%, transparent); color:#0b0b0b}

    /* Spans for mosaic */
    .span-4{grid-column:span 4}
    .span-6{grid-column:span 6}
    .span-8{grid-column:span 8}
    .span-12{grid-column:span 12}

    @media (max-width:1200px){ .s-8{grid-column:span 12} .s-6{grid-column:span 6} .s-4{grid-column:span 6} }
    @media (max-width:700px){ .grid{grid-template-columns:repeat(6,1fr)} .s-8,.s-6,.s-4{grid-column:span 6} }

    /* Lightbox */
    .lightbox{position:fixed; inset:0; display:none; align-items:center; justify-content:center; padding:2rem; background:rgba(0,0,0,.84); z-index:9999}
    .lightbox.open{display:flex}
    .lb-inner{max-width:min(1200px,94vw);}
    .lb-img{max-width:100%; max-height:85vh; width:auto; height:auto; display:block; margin-inline:auto; border-radius:14px; object-fit:contain}
    .lb-cap{color:#eee; margin-top:.6rem; display:flex; align-items:center; justify-content:space-between; gap:.8rem; font-size:.95rem}
    .lb-btn{position:absolute; top:1rem; right:1rem; background:#fff; border:0; border-radius:999px; padding:.55rem .75rem; font-weight:800; cursor:pointer}

    /* Pager */
    .pager{display:flex; gap:.6rem; justify-content:center; margin:1.2rem 0 0}
    .btn{display:inline-flex; align-items:center; gap:.5rem; padding:.7rem 1rem; border-radius:999px; font-weight:800; text-decoration:none; border:1px solid var(--clr-border); background:#fff; cursor:pointer}
    .btn.primary{background:var(--clr-lime); color:#0b0b0b; border-color:transparent}
    .btn.ghost{color:var(--clr-blue); border-color:var(--clr-blue); background:transparent}

    /* Optional dark mode scaffold
    @media (prefers-color-scheme: dark){
      body{ background:#0A0A0A; color:#EAEAEA; }
      .bar{ background:rgba(16,16,16,.7); border-color:#1C1C1C; }
      .card, .meta{ background:#1C1C1C; border-color:#2a2a2a; }
      .muted{ color:#CFCFCF; }
    }
    */