:root{
      --clr-lime:#A3FF00; --clr-blue:#0066FF; --clr-text:#1A1A1A; --clr-ui:#B3B3B3; --clr-bg:#F5F5F5; --clr-white:#FFFFFF; --clr-border:#E5E5E5;
      --clr-success:#22C55E; --clr-warning:#FACC15; --clr-error:#EF4444;
      --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, SFMono-Regular, Menlo, monospace;
      --radius-lg:16px; --radius-md:12px; --shadow-soft: 0 8px 24px rgba(0,0,0,.06);
      --container: min(1200px, 92vw);
    }
    html{scroll-behavior:smooth}
    body{margin:0; font-family:var(--ff-body); color:var(--clr-text); background:#fff; font-size:clamp(16px, 1.4vw, 18px)}
    .container{width:var(--container); margin-inline:auto}

  

    /* Header */
    header.site{position:sticky; top:0; z-index:40; backdrop-filter:saturate(1.2) blur(6px); background:rgba(255,255,255,.9); border-bottom:1px solid var(--clr-border)}
    .nav{display:flex; align-items:center; justify-content:space-between; padding:.8rem 0}
    .brand{display:flex; align-items:center; gap:.6rem; font-weight:800; font-family:var(--ff-heading)}
    .brand-mark{width:12px; height:12px; border-radius:3px; background:linear-gradient(135deg, var(--clr-lime), var(--clr-blue)); box-shadow:0 0 0 4px color-mix(in srgb, var(--clr-lime) 35%, transparent)}
    .nav-links{display:flex; gap:1.2rem}
    .nav-links a{color:var(--clr-text); text-decoration:none; font-weight:600; position:relative}
    .nav_link{
      text-decoration: none;
      color: var(--clr-text);
    }
    .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}
    .nav-links a:hover:after{transform:scaleX(1)}
    .btn{display:inline-flex; align-items:center; gap:.5rem; padding:.78rem 1rem; border-radius:999px; text-decoration:none; font-weight:700; border:1px solid transparent; transition:.2s}
    .btn-primary{background:var(--clr-lime); color:#0b0b0b}
    .btn-secondary{background:var(--clr-blue); color:#fff}
    .btn-ghost{background:transparent; color:var(--clr-blue); border-color:var(--clr-blue)}

    /* Hero */
    .hero{padding: 5rem 0 2rem;}
    h1{font-family:var(--ff-heading); font-size:clamp(2.2rem, 4.5vw, 3.6rem); line-height:1.05; margin:.3rem 0 1rem}
    .subtitle{max-width:65ch; color:#333}
    .eyebrow{display:inline-flex; align-items:center; gap:.5rem; font-weight:800}
    .eyebrow .dot{width:10px; height:10px; border-radius:50%; background:var(--clr-lime); box-shadow:0 0 0 6px color-mix(in srgb, var(--clr-lime) 25%, transparent)}

    /* Filters */
    .filters{display:flex; gap:.45rem; flex-wrap:wrap; margin-top:1rem}
    .chip{border:1px solid var(--clr-ui); border-radius:999px; padding:.45rem .7rem; font-weight:600; 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)}

    /* Gallery */
    .gallery{margin:1.2rem 0 2.2rem; display:grid; grid-template-columns:repeat(12, 1fr); gap:.8rem}
    /* Use utility classes for spans to create a nice mosaic */
    .span-4{grid-column:span 4}
    .span-6{grid-column:span 6}
    .span-8{grid-column:span 8}
    .card{position:relative; background:#fff; border:1px solid var(--clr-border); border-radius:14px; overflow:hidden; box-shadow:var(--shadow-soft)}
    .ph{aspect-ratio: 4/3; display:grid; place-items:center; background:linear-gradient(180deg, #FAFAFA, #F0F0F0)}
    .ph span{font-family:var(--ff-mono); font-size:.92rem; color:#444}
    .badge{position:absolute; top:.6rem; left:.6rem; background:rgba(0,0,0,.7); color:#fff; font-size:.75rem; padding:.25rem .5rem; border-radius:6px}
    .like{position:absolute; top:.6rem; right:.6rem; background:rgba(255,255,255,.9); border:1px solid var(--clr-border); padding:.25rem .45rem; border-radius:999px; font-size:.78rem}

    .meta{display:flex; align-items:center; justify-content:space-between; gap:.6rem; padding:.7rem .8rem; border-top:1px solid var(--clr-border); background:#fff}
    .meta-left{display:flex; flex-direction:column}
    .title{font-weight:800; font-family:var(--ff-heading); font-size:1rem; margin:0}
    .muted{color:#555; font-size:.9rem}
    .meta-right{display:flex; align-items:center; gap:.45rem}
    .tag{display:inline-block; padding:.3rem .55rem; border-radius:999px; font-size:.75rem; font-weight:700; background:color-mix(in srgb, var(--clr-lime) 20%, transparent); color:#0b0b0b}

    /* Lightbox */
    .lightbox{position:fixed; inset:0; background:rgba(0,0,0,.84); display:none; align-items:center; justify-content:center; padding:2rem; z-index: 99;}
    .lightbox.open{display:flex}
    .lightbox-inner{max-width:min(1100px, 92vw);}

    .lightbox-img{
      max-width:100%; 
      max-height:85vh; 
      height: auto;
      width: auto;
      display: block;
      object-fit: cover; 
      border-radius:14px; 
      background:#000
    }

    .lightbox-caption{color:#eee; margin-top:.6rem; display:flex; align-items:center; justify-content:space-between; gap:.8rem}
    .close{position:absolute; top:1rem; right:1rem; background:#fff; border:0; border-radius:999px; padding:.5rem .7rem; font-weight:800; cursor:pointer}

    /* CTA */
    .cta{background:var(--clr-bg); border-top:1px solid var(--clr-border); border-bottom:1px solid var(--clr-border); padding:2.2rem 0}
    .section-title{font-family:var(--ff-heading); font-size:clamp(1.6rem,2.4vw,2rem); margin:0 0 .6rem}

    footer{padding:2.2rem 0; color:#333}

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

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