:root{
      --bg: url('Untitled-3.png');
      --fg:#fff;
      --muted:#bdbdbd;
      --accent:#FFD400; /* yellow accent */
      --max-width:1200px;
    }

    .card {
      position: relative;
      overflow: hidden;
      display: inline-block;
    }

    .card img {
      width: 100;
      display: block;
    }

    .card-text {
      position: absolute;
      bottom: 20px;
      left: 20px;
      color: #ffffff;
      text-shadow: 0 0 3px rgba(0,0,0,0.8);
      font-size: 1.2rem;
      font-weight: bold;
      padding: 10px 15px;
      background: rgba(0, 0, 0, 0.2);
      backdrop-filter: blur(12px);
      border-radius: 8px;
      max-width: 70%;
      transition: opacity 0.3s ease-in-out;
    }

    .card:hover .card-text {
      opacity: 0;
    }

    *{box-sizing:border-box}
    html{ scroll-behavior: auto; } /* we'll provide custom smooth scrolling */
    body{
      margin:0;
      background:var(--bg);
      color:var(--fg);
      font-family:"Poppins", sans-serif;
      line-height:1.45;
      scrollbar-gutter: stable; /* avoid layout shift when locking scroll */
    }

    .wrap{
      max-width:var(--max-width);
      margin:0 auto;
      padding:44px 28px;
    }

    /* Header */
    header{
      display:flex;
      justify-content:space-between;
      align-items:flex-start;
      margin-bottom:28px;
    }
    .brand{
      font-family:"Bebas Neue", sans-serif;
      font-size:40px;
      letter-spacing:2px;
      color:var(--fg);
    }
    .sub{
      font-size:12px;
      color:var(--muted);
      text-transform:uppercase;
      letter-spacing:1.6px;
      margin-top:6px;
    }

    /* Nav 
    .nav{
      display:none;
      gap:12px;
    }
    .nav a{
      color:var(--muted);
      text-decoration:none;
      font-size:13px;
      padding:8px 12px;
      border-radius:6px;
      transition: all 160ms ease;
    }
    .nav a:hover:not(.cta){
      background: rgba(255,255,255,0.05);
      color: var(--fg);
    }

    /* Contact nav special (yellow text, invert on hover) 
    .nav a.cta {
      background:none;
      color:var(--accent);
      border:none;
      font-weight:600;
    }
    .nav a.cta:hover {
      background:var(--accent);
      color:var(--bg);
      border:1px solid var(--accent);
    }
    */

    /* Center Links */
    .center-links {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 35px;
        margin: 10px 0 28px;
    }

    .center-links .btn {
        display: inline-block;
        width: 90px;
        height: 45px;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        background-color: transparent;
        border: none;
        transition: transform 0.2s ease;
    }

    .center-links .btn:hover {
        transform: scale(1.05);
    }
    .center-links .btn.home {
        background-image: url('Buttons/Normal/Home.png');
    }
    .center-links .btn.home:active
    .center-links .btn.home:hover,
    .center-links .btn.home:active {
        background-image: url('Buttons/Glow/Homeglow.png'); !important;
    }

    .center-links .btn.gallery {
        background-image: url('Buttons/Normal/Gallery.png');
    }

    .center-links .btn.gallery:hover,
    .center-links .btn.gallery:active {
        background-image: url('Buttons/Glow/Galleryglow.png');
    }

    .center-links .btn.web-design {
        background-image: url('Buttons/Normal/Web-Design.png');
    }

    .center-links .btn.web-design:hover,
    .center-links .btn.web-design:active {
        background-image: url('Buttons/Glow/Web-Designglow.png');
    }

    .center-links .btn.about {
        background-image: url('Buttons/Normal/About.png');
    }

    .center-links .btn.about:hover,
    .center-links .btn.about:active {
        background-image: url('Buttons/Glow/Aboutglow.png');
    }

    .center-links .btn.contact {
        background-image: url('Buttons/Normal/Contact.png');
    }

    .center-links .btn.contact:hover,
    .center-links .btn.contact:active {
        background-image: url('Buttons/Glow/Contactglow.png');
    }

    /* Hamburger + Sidebar */
    .hamburger{
      display:block;
      width:28px; height:28px; /* narrower, a bit shorter */
      position:relative;
      border:none; background:transparent; color:var(--accent);
      cursor:pointer;
      transition: transform .3s ease, color .3s ease; /* match bottom icon hover feel */
    }
    .hamburger .bar,
    .hamburger::before,
    .hamburger::after{
      content:"";
      position:absolute; left:0; right:0;
      height:3px; background:var(--accent); /* yellow */
      border-radius:2px; transition:transform .3s ease, opacity .3s ease, top .3s ease;
    }
    .hamburger .bar{ top:50%; transform:translateY(-50%); }
    .hamburger::before{ top:6px; }
    .hamburger::after{ bottom:6px; }
    .hamburger:hover{ transform: scale(1.2); }
    .hamburger[aria-expanded="true"] .bar{ opacity:0; }
    .hamburger[aria-expanded="true"]::before{ top:50%; transform:translateY(-50%) rotate(45deg); }
    .hamburger[aria-expanded="true"]::after{ bottom:auto; top:50%; transform:translateY(-50%) rotate(-45deg); }

    .side-menu{
      position:fixed; top:0; right:0; height:100vh; width:clamp(190px, 52vw, 240px);
      background:#0b0b0b; border-left:1px solid rgba(255,255,255,0.06);
      z-index:10000; padding:72px 22px 22px; 
      transform: translate3d(100%,0,0);
      opacity: 0.98;
      transition: transform .38s ease, opacity .38s ease; /* medium speed, smooth */
      will-change: transform, opacity;
      backface-visibility: hidden;
      box-shadow:-10px 0 30px rgba(0,0,0,0.35);
      display:flex; flex-direction:column; align-items:center; justify-content:center; /* center content vertically */
      font-family:"Bebas Neue", sans-serif; /* match tagline font */
    }
    .side-menu.open{ transform: translate3d(0,0,0); opacity: 1; }
    .side-menu a{ display:block; color:var(--fg); text-decoration:none; padding:12px 0; font-size:22px; letter-spacing:1px; text-align:center; transition:transform .3s ease, color .3s ease; font-weight:400; }
    .side-menu a:hover{ color:var(--accent); transform: scale(1.12); }
    .side-menu a.active{ background:var(--accent); color:var(--bg); border-radius:6px; }

    .menu-scrim{
      position:fixed; inset:0; background:rgba(0,0,0,0.35);
      backdrop-filter:saturate(120%) blur(2px);
      opacity:0; visibility:hidden; transition:opacity .38s ease, visibility .38s linear; z-index:9999;
      will-change: opacity;
    }
    .menu-scrim.active{ opacity:1; visibility:visible; }

    @media (max-width: 860px){
      .nav{ display:none; }
      .hamburger{ display:block; }
    }

    /* Grid */
    .grid{
      display:grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-template-rows: 520px 320px;
      grid-gap:22px;
      margin-bottom:44px;
    }
    .g-1{ grid-column:1 / span 3; }
    .g-2{ grid-column:1 / span 1; }
    .g-3{ grid-column:2 / span 2; }

    .card{
      position:relative;
      overflow:hidden;
      background:#070707;
      border:1px solid rgba(255,255,255,0.03);
      display:flex;
      align-items:flex-end;
      padding:18px;
      cursor:pointer;
    }
    .card img{
      width:100%;
      height:100%;
      object-fit:cover;
      position:absolute;
      inset:0;
      filter:brightness(0.45);
      transition:all 0.25s ease;
      user-select:none;
      -webkit-user-drag: none;
    }
    .card .meta{
      position:relative;
      z-index:3;
      max-width:86%;
      text-shadow: 2px 2px 8px rgba(0,0,0,0.9);
    }
    .meta h3{ margin:0 0 6px; font-size:20px; }
    .meta p{ margin:0; font-size:13px; color:var(--muted); }

    /* ensure the overlay doesn't block clicks */
    .card::after{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(180deg, rgba(0,0,0,0.25), rgba(0,0,0,0.45));
      z-index:2;
      pointer-events: none;
    }
    .card:hover img{ filter:brightness(0.9); transform:scale(1.02); }
    .card:hover .meta h3,
    .card:hover .meta p { color:var(--accent); }

    /* About + Writing */
    .two-col{
      display:grid;
      grid-template-columns: 1fr 420px;
      gap:28px;
      margin-bottom:56px;
    }
    .about,.writing{
      background:#0b0b0b;
      padding:22px;
      border:1px solid rgba(255,255,255,0.03);
    }
    .about h2{ margin:0 0 8px; font-size:20px; }
    .about p{ color:var(--muted); margin:0 0 12px; font-size:14px; }
    .skills{ display:flex; flex-wrap:wrap; gap:8px; }
    .skill{
      font-size:12px;
      border:1px solid rgba(255,255,255,0.06);
      padding:6px 10px;
      border-radius:6px;
      background: rgba(255,255,255,0.03);
    }

    /* make writing box hug content */
    .writing{ display:inline-block; }
    .writing h3{ margin:0 0 10px; font-size:16px; }
    .writing p{ font-size:14px; color:var(--muted); margin:0; }

    /* Contact */
    footer{
      text-align:center;
      padding:40px 0;
      border-top:1px solid rgba(255,255,255,0.05);
    }
    .contact h2{
      font-family:"Bebas Neue", sans-serif;
      font-size:24px;   /* slightly smaller */
      letter-spacing:1px;
      margin:0 0 20px;
      color:var(--accent);
    }
    .social-icons{
      display:flex;
      justify-content:center;
      gap:32px;
    }
    .social-icons a{
      color:var(--fg);
      font-size:30px;
      text-decoration:none;
      transition:all 0.3s ease;
    }
    .social-icons a:hover{
      color:var(--accent);
      transform:scale(1.2);
    }

    /* Lightbox */
    .lightbox{
      position:fixed;
      top:0; left:0;
      width:100%; height:100%;
      background:rgba(0,0,0,0.92);
      display:flex;
      justify-content:center;
      align-items:center;
      z-index:9999;
      opacity:0;
      visibility:hidden;
      transition:opacity 0.25s ease, visibility 0.25s ease;
    }
    /* Lightbox close button styled like sidebar X */
    .lightbox .close{
      position:absolute;
      top:18px; left:18px;
      font-size:36px;
      color:var(--fg);
      background:transparent;
      border:none;
      cursor:pointer;
      z-index:10000;
      line-height:1;
      transition: transform .3s ease, color .3s ease;
    }
    .lightbox .close:hover{
      transform:scale(1.2);
      color:var(--accent);
    }
    .lightbox.active{
      opacity:1;
      visibility:visible;
    }
    .lightbox img{
      max-width:92%;
      max-height:92%;
      box-shadow:0 0 30px rgba(0,0,0,0.85);
      transform:scale(0.9);
      opacity:0;
      transition:all 0.35s ease;
    }

    .lightbox.active img{
      transform:scale(1);
      opacity:1;
    }

/* Sidebar close button (X) with unified hover animation */
.side-menu .close-menu {
  position: absolute;
  top: 18px;
  left: 18px;
  font-size: 36px;
  color: var(--fg);
  background: transparent; /* ensure no background */
  border: none;
  cursor: pointer;
  z-index: 10001;
  transition: transform .3s ease, color .3s ease;
}

.side-menu .close-menu:hover {
  transform: scale(1.2);
  color: var(--accent);
}

    /* Page transition */
    body{ opacity:0; transition: opacity .28s ease; }
    body.page-loaded{ opacity:1; }
    /* Contact icons attention pulse */
    @keyframes attentionPulse{
      0%{ transform:scale(1); color:var(--fg); }
      30%{ transform:scale(1.2); color:var(--accent); }
      60%{ transform:scale(1.05); color:var(--accent); }
      100%{ transform:scale(1); color:var(--fg); }
    }
    .social-icons a.attention-pulse{ animation: attentionPulse 600ms ease-in-out both; }
    /* Responsive adjustments */
    @media (max-width: 1024px){
      .wrap{ padding:36px 22px; }
      .grid{ grid-template-rows: 460px 280px; }
      .meta h3{ font-size:18px; }
      .meta p{ font-size:12px; }
      .two-col{ grid-template-columns: 1fr 360px; }
    }

    @media (max-width: 768px){
      header{ align-items:center; }
      .brand{ font-size:34px; }
      .sub{ font-size:11px; }
      .grid{ grid-template-columns: 1fr; grid-template-rows: 360px 260px 260px; }
      .g-1{ grid-column:1; }
      .g-2{ grid-column:1; }
      .g-3{ grid-column:1; }
      .two-col{ grid-template-columns: 1fr; }
    }

    @media (max-width: 420px){
      .wrap{ padding:28px 18px; }
      .brand{ font-size:30px; }
      .grid{ grid-gap:16px; }
      .card{ padding:14px; }
      .meta h3{ font-size:16px; }
      .meta p{ font-size:12px; }
      .about,.writing{ padding:18px; }
    }

    /* Hide sidebar/hamburger on laptop and larger */
    @media (min-width: 1024px){
      .hamburger{ display:none; }
      .side-menu{ display:none; }
      .menu-scrim{ display:none; }
    }