/* ────────────────────────────────────────────
   Google Font
   (If your server can’t fetch external fonts,
   simply remove the @import line and the
   fall-back system fonts will be used.)
   ──────────────────────────────────────────── */
   @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700;800&display=swap");

   /* ───────────  CSS Variables  ─────────── */
   :root{
       --pink:   #ff006b;  /* main accent / headings            */
       --violet: #5d3bff;  /* nav outline & active nav background */
       --cyan:   #00d1b0;  /* links & interactive details        */
       --fg:     #d7d9e6;  /* default foreground (body text)     */
       --bg-1:   #0e0e13;  /* top of gradient                    */
       --bg-2:   #181821;  /* bottom of gradient                 */
       --radius: 9999px;   /* pill shapes                        */
       --shadow: 0 4px 10px rgba(0,0,0,.25);
       font-family:'Poppins',system-ui,Roboto,Helvetica,Arial,sans-serif;
   }
   
   /* ───────────  Reset & Base  ─────────── */
   *{box-sizing:border-box;margin:0;padding:0}
   html,body{height:100%}
   body{
       color:var(--fg);
       background:linear-gradient(var(--bg-1),var(--bg-2));
       line-height:1.65;
       -webkit-font-smoothing:antialiased;
       scroll-behavior:smooth;
       padding-top:2rem;           /* frees some room for nav pills */
   }
   
   /* ───────────  Navigation  ─────────── */
   header{
       display:flex;
       justify-content:center;
       margin-bottom:3rem;
   }
   nav{
       display:flex;
       gap:1.5rem;
   }
   nav a{
       position:relative;
       display:inline-flex;
       align-items:center;
       justify-content:center;
       min-width:120px;
       padding:.45rem 1.75rem;
       border:2px solid var(--violet);
       border-radius:var(--radius);
       text-decoration:none;
       font-weight:600;
       letter-spacing:.2px;
       color:#8a89a3;              /* muted until hover/active      */
       transition:.25s;
   }
   nav a:hover{
       color:var(--pink);
       border-color:var(--pink);
   }
   nav a.active{
       background:var(--violet);
       color:#fff;
   }
   
   /* ───────────  Main wrapper  ─────────── */
   main{
       max-width:1200px;
       margin:0 auto 4rem;
       padding:0 1rem;
   }
   
   /* ───────────  Headings  ─────────── */
   h1,h2,h3,h4,h5{
       color:var(--pink);
       font-weight:800;
       line-height:1.15;
   }
   h1{font-size:clamp(2.5rem,6vw,4rem);margin-bottom:.25em}
   h2{font-size:clamp(1.75rem,4vw,2.5rem);margin:.8em 0 .3em}
   
   /* ───────────  Links  ─────────── */
   a{color:var(--cyan);text-decoration:none}
   a:hover{text-decoration:underline}
   
   /* ───────────  Home hero layout  ─────────── */
   .hero{
       float:right;
       width:40%;
       max-width:420px;
       height:auto;
       margin-left:2rem;
       margin-bottom:1rem;
       filter:drop-shadow(var(--shadow));
   }
   @media (max-width:900px){
       .hero{
           float:none;
           width:100%;
           max-width:none;
           margin:2rem auto 2.5rem;
           display:block;
       }
   }
   
   /* ───────────  Gallery grid  ─────────── */
   .gallery-grid{
       display:grid;
       gap:4px;                               /* tiny neon gaps */
       grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
   }
   .gallery-grid img{
       width:100%;height:230px;object-fit:cover;
       border-radius:8px;
       transition:transform .3s;
   }
   .gallery-grid img:hover{transform:scale(1.05)}
   
   /* ───────────  Single-image view  ─────────── */
   .single-img{
       width:100%;
       max-height:80vh;
       object-fit:contain;
       border-radius:8px;
       filter:drop-shadow(var(--shadow));
   }
   .back-link{
       display:inline-block;
       margin-bottom:1rem;
       font-weight:600;
       color:var(--cyan);
   }
   
   /* ───────────  “Under construction”  ─────────── */
   .under-construction{
       display:flex;
       align-items:center;
       justify-content:center;
       height:70vh;
       text-align:center;
       padding:2rem;
   }
   
   /* ───────────  Misc typography helpers  ─────────── */
   p{margin-bottom:1rem}
   hr{
       border:none;
       border-bottom:1px dotted #444;
       margin:2rem 0;
   }
   small{font-size:.85rem;color:#9c9caa}
   
   /* ───────────  Footer  ─────────── */
   footer{
       text-align:center;
       color:#6a6a83;
       font-size:.9rem;
       padding:3rem 0 2rem;
   }
   
   /* End of stylesheet */