/* ===================================
 * Styles from index.html [block #1]
 =================================== */

        :root{
            --bg: #0a0a0a;
            --bg-elev: #0e0e0e;
            --panel: #0a0a0a;
            --text: #e6decd;
            --muted: #a79f90;
            --muted-2: #6f6a5f;
            --gold: #c9a875;
            --gold-2: #b89363;
      --gold-tint: rgba(201,168,117,.08);
      --gold-border: rgba(201,168,117,.18);
            --border: rgba(255,255,255,.06);
            --border-strong: rgba(255,255,255,.12);
            --shadow: 0 10px 24px rgba(0,0,0,.45);
            --radius: 14px;
            --ok: #6ee7b7;
            --warn: #fbbf24;
        }

        html{ scroll-behavior: smooth; }
        *{box-sizing:border-box;margin:0;padding:0}
        html,body{background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;overflow-x:hidden}

        /* ===== Scrollbars ===== */
        html{
          scrollbar-width: thin;
          scrollbar-color: var(--gold) rgba(255,255,255,.06);
        }
        body{
          scrollbar-width: thin;
          scrollbar-color: var(--gold) rgba(255,255,255,.06);
        }
        *::-webkit-scrollbar{
          width:12px;
          height:12px;
        }
        *::-webkit-scrollbar-track{
          background:rgba(255,255,255,.03);
          border:1px solid rgba(255,255,255,.06);
          border-radius:12px;
        }
        *::-webkit-scrollbar-thumb{
          background:linear-gradient(180deg,var(--gold),var(--gold-2));
          border-radius:12px;
          border:2px solid rgba(10,10,10,.9);
          box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
        }
        *::-webkit-scrollbar-thumb:hover{
          background:linear-gradient(180deg,var(--gold-2),var(--gold));
        }

        body::before{
            content:"";
            position:fixed; inset:0; pointer-events:none; z-index:-2;
            background:
              radial-gradient(1200px 700px at 50% -10%, rgba(201,168,117,.18), transparent 60%),
              radial-gradient(900px 500px at 80% 10%, rgba(201,168,117,.06), transparent 65%),
              linear-gradient(#0b0b0b,#070707);
        }
        body::after{
            content:"";
            position:fixed; inset:0; pointer-events:none; z-index:-1;
            opacity:.05;
            background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
        }

        /* ===== HEADER (unchanged layout, new centered pill menu) ===== */
        header{
            position:fixed; inset:0 0 auto 0; z-index:50;
            display:flex; align-items:center; justify-content:space-between;
            padding:1.2rem 6%;
            background:rgba(5,5,5,.7);
            backdrop-filter:saturate(140%) blur(10px);
            border-bottom:1px solid var(--border);
        }
        .logo{ 
            font-weight:700; letter-spacing:.28em; font-size:.9rem; color:var(--muted);
        }
        /* Hide original inline list visually, but keep structure for accessibility if needed */
        nav.primary{display:none}

        /* New centered translucent menu pill */
        .menu-pill{
            position:absolute; left:50%; transform:translateX(-50%);
            display:flex; align-items:center; gap:.4rem; padding:.56rem .8rem;
            border-radius:999px; border:1px solid var(--border);
            background:rgba(10,10,10,.55);
            backdrop-filter:saturate(140%) blur(10px);
            box-shadow:0 4px 24px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.03);
        }
        .menu-pill a{
            text-decoration:none; text-transform:uppercase; letter-spacing:.12em;
            font-size:.86rem; color:var(--muted-2); padding:.4rem .8rem; border-radius:999px;
            transition:color .2s, background .2s;
        }
        .menu-pill a:hover{ color:var(--text); background:rgba(255,255,255,.03) }
        .menu-pill .sep{ width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,.22); }

        .header-contact{
            padding:.55rem 1.1rem; border-radius:999px; text-decoration:none;
            font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.12em;
            background:linear-gradient(180deg,var(--gold),var(--gold-2));
            color:#17130c; border:1px solid rgba(0,0,0,.4); box-shadow:var(--shadow);
            transition:transform .2s, filter .2s;
        }
        .header-contact:hover{ transform:translateY(-1px); filter:saturate(110%) }

        /* Dropdown menu styles */
        .dropdown{ position:relative; }
        .dropdown-toggle{ cursor:pointer; }
        .dropdown-menu{
            position:absolute; top:100%; left:50%; transform:translateX(-50%);
            background:var(--panel); border:1px solid var(--border); border-radius:8px;
            min-width:160px; opacity:0; visibility:hidden; transform:translateX(-50%) translateY(-10px);
            transition:all 0.2s ease; z-index:1000; box-shadow:0 4px 16px rgba(0,0,0,.3);
            margin-top: 1rem;
        }
        .dropdown-menu li{ list-style:none; margin:0; }
        .dropdown-menu li a{
            display:block; padding:0.75rem 1rem; color:var(--text); text-decoration:none;
            transition:background-color 0.2s;
        }
        .dropdown-menu li a:hover{ background:var(--hover); color:var(--gold); }

        /* Hamburger menu styles */
        .hamburger{
            display:none; flex-direction:column; justify-content:space-between;
            width:24px; height:18px; background:none; border:none; cursor:pointer;
            padding:0; margin-left:1rem;
        }
        .hamburger span{
            width:100%; height:2px; background:var(--text); transition:all 0.3s ease;
            transform-origin:center;
        }
        .hamburger.active span:nth-child(1){ transform:rotate(45deg) translate(6px, 6px); }
        .hamburger.active span:nth-child(2){ opacity:0; }
        .hamburger.active span:nth-child(3){ transform:rotate(-45deg) translate(6px, -6px); }

    /* Mobile styles */
    @media (max-width: 768px) {
      header { justify-content: space-between; padding: .8rem 6%; }
      /* Keep only CTA and burger on the pill; hide the desktop links and brand */
      .nav-pill { 
        gap:.6rem; 
        /* Enhanced golden frosted background for mobile burger menu */
        background:
          linear-gradient(135deg, rgba(201,168,117,.25), rgba(201,168,117,.08)),
          rgba(20,17,14,.75);
        backdrop-filter: blur(12px) saturate(130%);
        border: 1px solid rgba(201,168,117,.15);
        box-shadow: 
          0 6px 20px rgba(0,0,0,.4),
          inset 0 1px 0 rgba(255,255,255,.05);
      }
      .nav-pill .brand { display:none; }
            /* Hide only the desktop nav list, not the mobile menu */
            .nav-pill > ul { display:none !important; }
      .nav-pill .dot { display:none; }
      .dropdown-menu{ display:none; }
      .hamburger{ display:flex; }
      /* Keep CTA visible on mobile */
      .nav-pill .cta{ display:inline-flex; }

      /* Fullscreen mobile panel */
      .nav-pill.mobile-menu-open .mobile-menu-panel{
        opacity:1 !important; visibility:visible !important; transform:translateY(0) !important;
        display: block !important;
        z-index: 10000 !important;
      }
      /* Remove pill background behind the overlay to avoid dark bar */
      .nav-pill.mobile-menu-open{
        background: transparent !important;
        border-color: transparent !important;
        box-shadow: none !important;
      }
      /* Hide hamburger (the X) while menu is open */
  .nav-pill.mobile-menu-open .hamburger{ display:none !important; visibility:hidden !important; }
  .nav-pill.mobile-menu-open .hamburger span{ display:none !important; }
      /* Hide CTA while the overlay is open so it doesn't overlap list */
      .nav-pill.mobile-menu-open .cta{ display:none !important; }
    }

    /* Broader mobile/tablet cutoff: hide desktop links up to 1024px */
    @media (max-width: 1024px){
      /* Hide only the desktop nav list at this breakpoint */
      .nav-pill > ul,
      .nav-pill .dot,
      .nav-pill .brand,
      .dropdown-menu{ display:none !important; }
      .hamburger{ display:flex !important; }
      .nav-pill .cta{ display:inline-flex !important; }
      /* When menu is open, hide CTA (wins cascade at this breakpoint) */
      .nav-pill.mobile-menu-open .cta{ display:none !important; }
    }

    /* Mobile menu panel base (hidden by default) */
        .mobile-menu-panel{
            position:fixed; top:0; left:0; width:100vw; height:100vh; z-index:9999; /* above everything */
            width: 100dvw; height: 100dvh; /* mobile browsers */
            /* Apply blur on the panel itself; keep background transparent here */
            background: transparent;
            backdrop-filter: blur(20px) saturate(130%);
            -webkit-backdrop-filter: blur(20px) saturate(130%);
            /* Fallback for browsers without backdrop-filter support */
            background-color: rgba(20,17,14,.6);
            padding:4.5rem 2rem 2rem; /* slight top padding for spacing */
            opacity:0; visibility:hidden; transform: translateY(-10px);
            transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
            pointer-events: auto;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
    .mobile-menu-panel::before{
      content:""; position:absolute; inset:0; pointer-events:none; z-index:-1;
      /* Golden frosted tint that covers the entire viewport */
      background:
        radial-gradient(1400px 900px at 50% -10%, rgba(201,168,117,.18), transparent 60%),
        linear-gradient(135deg, rgba(201,168,117,.10), rgba(201,168,117,.0)),
        rgba(20,17,14,.55);
    }
    /* Frosted golden glass surface behind the list */
        /* Remove inner plate look; let the whole screen be frosted */
        .mobile-menu-surface{
            max-width:none; margin:0; padding:0; border-radius:0;
            background:transparent; border:none; box-shadow:none;
            backdrop-filter:none; -webkit-backdrop-filter:none;
        }
  .mobile-menu{ 
    list-style:none; 
    max-width:640px; 
    display:flex; 
    flex-direction:column; 
    gap:.35rem; 
    text-align:center;
    width: 100%;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
  }
    .mobile-menu > li > a{
      display:block; padding:1rem 1.2rem; font-size:1.1rem; color:var(--text); text-decoration:none; letter-spacing:.12em; font-weight:600;
      border-radius:10px; border:none; background:transparent;
      text-align: center;
      width: 100%;
      max-width: 300px;
    }
  .mobile-menu > li > a:hover{ color:var(--gold); background:transparent; border:none; }
  /* Remove header pill underline effect inside mobile menu */
  .mobile-menu-panel .mobile-menu a::after{ content:none !important; }
    /* Force-clear any inherited backgrounds/borders */
  .mobile-menu-panel a{ background:transparent !important; box-shadow:none !important; outline:none; border:none !important; -webkit-tap-highlight-color: transparent; }
  .mobile-menu-panel a:focus, .mobile-menu-panel a:active{ background:transparent !important; box-shadow:none !important; outline:none; border:none !important; }
    .mobile-menu .has-children > a{
      position:relative; padding-right:2rem;
    }
    .mobile-menu .has-children > a::after{
      content:"›"; position:absolute; right:1rem; top:50%; transform:translateY(-50%);
      color:var(--muted-2);
    }
  .mobile-menu .sub{ list-style:none; margin:.3rem 0 0 1rem; padding-left:.6rem; border-left:none; display:flex; flex-direction:column; gap:.2rem; }
    .mobile-menu .sub a{ display:block; padding:.6rem 1rem; font-size:1rem; color:var(--muted); text-decoration:none; border-radius:8px; border:none; background:transparent; }
    .mobile-menu .sub a:hover{ color:var(--text); background:transparent; border:none; }

        /* ===== REST of v1 styles (unchanged) ===== */
        .hero-index{
            min-height:100vh; display:flex; align-items:center; justify-content:center;
            padding:6rem 6% 3rem; text-align:center; position:relative;
            background:transparent;
        }
  /* Ensure the mobile menu list is visible when open */
  .nav-pill.mobile-menu-open .mobile-menu{ display:flex !important; }
        .hero-bg{
            position:absolute; inset:0; opacity:.5;
            background:
              radial-gradient(900px 600px at 50% 10%, rgba(0,0,0,.6), transparent 65%);
        }
        .hero-content{ position:relative; z-index:1; max-width:980px; }
        .hero-logo{
          display:block;
          width:clamp(90px, 14vw, 280px);
          height:auto;
          margin:0 auto -3rem;
          filter:drop-shadow(0 10px 24px rgba(0,0,0,.35)) sepia(0.35) saturate(1.35) hue-rotate(-10deg) brightness(1.15);
        }
        .hero-content h1{
            font-weight:300; letter-spacing:-.02em; line-height:1.04;
            font-size: clamp(2.6rem, 6.5vw, 5.2rem);
            color:var(--text);
        }
        .hero-content .italic{
            font-family:"Playfair Display",serif; font-style:italic; font-weight:400;
            color:var(--gold); text-shadow:0 2px 20px rgba(201,168,117,.18);
        }
        .hero-content p{
            margin:1.25rem auto 2.8rem; max-width:720px;
            color:var(--muted); font-size:1.02rem; letter-spacing:.02em; line-height:1.7;
        }
        .hero-button{
            display:inline-flex; align-items:center; gap:.7rem;
            padding:1rem 2.2rem; border-radius:999px; text-decoration:none;
            background:transparent; color:var(--text);
            border:1px solid var(--border-strong); text-transform:uppercase; letter-spacing:.12em; font-size:.8rem;
            transition:background .25s, border-color .25s, transform .25s;
        }
        .hero-button::before{content:"↓"; font-size:1.1rem}
        .hero-button:hover{ background:rgba(255,255,255,.04); border-color:var(--gold); transform:translateY(-1px); }

        .brands{ padding:3rem 6%; display:flex; flex-wrap:wrap; gap:3rem; justify-content:center; align-items:center; border-bottom:1px solid var(--border); }
        .brand-logo{ font-size:2rem; opacity:.35; transition:opacity .2s, transform .2s; text-decoration: none; color: var(--text); }
        .brand-logo img { width: 2rem; height: 2rem; }
        .brand-logo:hover{ opacity:.6; transform:translateY(-2px) }

        .services{ padding:6rem 6%; background:transparent }
        .services-grid{ max-width:1200px; margin:0 auto; display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:1.6rem }
        .service-card{
            background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
            border:1px solid var(--border); padding:2.4rem 2rem; border-radius:var(--radius);
            transition: border-color .25s, transform .25s; box-shadow:var(--shadow);
        }
        .service-card:hover{ border-color:var(--gold); transform:translateY(-3px) }
        .service-number{ color:#2d2b26; font-size:.72rem; font-weight:700; letter-spacing:.26em; margin-bottom:1.1rem }
        .service-card h3{ font-size:1.22rem; color:var(--text); letter-spacing:-.02em; margin-bottom:1rem }
        .service-card p{ color:var(--muted); line-height:1.8; font-size:.98rem; margin-bottom:1.6rem }
        .service-link{ color:var(--muted-2); text-decoration:none; text-transform:uppercase; letter-spacing:.12em; font-size:.78rem }
        .service-link:hover{ color:var(--text) }

  /* Selected Work: full-bleed background like About, with tighter spacing */
  .portfolio{ padding:5.5rem 0 !important; background:rgba(255,255,255,.01) !important; width:100% !important; }
  /* Remove inner padding so header aligns and grid can use full width */
  .portfolio > *{ padding:0; }
  /* Reduce gap when following Skills or Resume */
  .skills + .portfolio{ margin-top:-1.5rem !important; }
  .resume + .portfolio{ margin-top:-1.5rem !important; }
  /* Header aligns with other section titles (1200px) */
  .portfolio-header{ max-width:1200px; margin:0 auto 3rem; display:flex; align-items:center; justify-content:space-between }
  .portfolio-header .section-title{ text-align:left; margin:0; }
        .section-title{ font-size: clamp(1.8rem, 4.4vw, 2.6rem); font-weight:300; letter-spacing:-.02em; color:var(--text) }
        .section-title .italic{ font-family:"Playfair Display",serif; font-style:italic; color:var(--gold) }
        .view-all{ color:var(--muted-2); text-decoration:none; text-transform:uppercase; letter-spacing:.12em; font-size:.78rem }
        .view-all:hover{ color:var(--text) }

        /* === Why Work section === */
        .why-work{ padding:3rem 6% 1rem; text-align:center; }
        .why-inner{ max-width:900px; margin:0 auto; }
        .why-title{ font-weight:300; letter-spacing:-.02em; }
        .why-sub{ margin-top:.6rem; color:var(--muted); font-size:1.02rem; letter-spacing:.02em; }

        /* Reduce Services top space when preceded by Why Work */
        .why-work + .services{ padding-top: 3rem; }

        /* === Homepage Latest (Articles / R&D / Code) === */
        :is(#articles, #labs-latest, #code-latest){ padding:4rem 6% 0; }
        :is(#articles, #labs-latest, #code-latest) .articles-header{ max-width:1200px; margin:0 auto 1rem; display:flex; align-items:center; justify-content:space-between }
        :is(#articles, #labs-latest, #code-latest) .articles-grid{ max-width:1200px; margin:0 auto; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:1rem }

        /* Feature card */
        :is(#articles, #labs-latest, #code-latest) .post.feature{ position:relative; border-radius:18px; overflow:hidden; border:1px solid var(--border); background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)); min-height:380px; grid-column:1 / -1; }
        :is(#articles, #labs-latest, #code-latest) .feature-media{ position:absolute; inset:0; }
        :is(#articles, #labs-latest, #code-latest) .feature-media img{ width:100%; height:100%; object-fit:cover; filter:saturate(.95); }
        :is(#articles, #labs-latest, #code-latest) .bubble{ position:relative; z-index:2; margin: clamp(18px, 3vw, 28px); max-width:560px; 
          background:
            linear-gradient(135deg, #c9a8751a, #0000), /* subtle gold tint */
            rgba(12,11,10,.72);
          backdrop-filter: blur(10px) saturate(120%);
          border:1px solid var(--border);
          border-radius:22px; padding:1rem 1.2rem;
          box-shadow:0 10px 28px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04);
        }
        :is(#articles, #labs-latest, #code-latest) .bubble .kicker{ 
          color:var(--muted-2); text-transform:uppercase; letter-spacing:.14em; font-size:.72rem; margin-bottom:.5rem;
          display:inline-flex; align-items:center; gap:.4rem; padding:.28rem .6rem; border-radius:999px;
          background:rgba(255,255,255,.06); border:1px solid var(--border);
        }
        :is(#articles, #labs-latest, #code-latest) .bubble h3{ font-size:1.35rem; letter-spacing:-.01em; margin:.1rem 0 .3rem }
        :is(#articles, #labs-latest, #code-latest) .bubble .excerpt{ color:var(--muted); line-height:1.7; margin-bottom:.6rem }
        :is(#articles, #labs-latest, #code-latest) .pills{ display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:.5rem }
        :is(#articles, #labs-latest, #code-latest) .pill{ padding:.32rem .6rem; border-radius:999px; background:rgba(255,255,255,.06); border:1px solid var(--border); color:var(--muted); font-size:.78rem }
        :is(#articles, #labs-latest, #code-latest) .bubble .meta{ color:var(--muted-2); font-size:.82rem }
        :is(#articles, #labs-latest, #code-latest) .cta-link{ color:var(--text); text-decoration:none; margin-left:.6rem; font-size:.9rem }
        :is(#articles, #labs-latest, #code-latest) .cta-link:hover{ color:var(--gold) }

        /* Secondary cards */
        :is(#articles, #labs-latest, #code-latest) .post.card{ display:grid; grid-template-columns:1fr .9fr; align-items:stretch; gap:.8rem; border-radius:16px; overflow:hidden; border:1px solid var(--border); background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)); min-height:220px; }
        :is(#articles, #labs-latest, #code-latest) .card-media{ background:var(--panel); display:flex; align-items:center; justify-content:center }
        :is(#articles, #labs-latest, #code-latest) .card-media img{ width:100%; height:100%; object-fit:cover }
        :is(#articles, #labs-latest, #code-latest) .card-body{ padding:1rem }
        :is(#articles, #labs-latest, #code-latest) .card-body .kicker{ color:var(--muted-2); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; margin-bottom:.2rem }
        :is(#articles, #labs-latest, #code-latest) .card-body h3{ font-size:1.05rem; margin:.1rem 0 .4rem }
        :is(#articles, #labs-latest, #code-latest) .card-body .excerpt{ color:var(--muted); line-height:1.7; font-size:.94rem; margin-bottom:.6rem }
        :is(#articles, #labs-latest, #code-latest) .card-body .pills{ display:flex; flex-wrap:wrap; gap:.35rem; }
        :is(#articles, #labs-latest, #code-latest) .card-body .pill{ padding:.28rem .55rem; border-radius:999px; background:rgba(255,255,255,.06); border:1px solid var(--border); color:var(--muted); font-size:.76rem }
        :is(#articles, #labs-latest, #code-latest) .card-body .meta{ color:var(--muted-2); font-size:.82rem; margin-top:.4rem }

        /* Feature split layout (reusable) */
        .layout-feature-split .post.feature{ position:relative; border-radius:18px; overflow:hidden; border:1px solid var(--border); background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)); min-height:380px; grid-column:1 / -1; }
        .layout-feature-split .feature-media{ position:absolute; inset:0; }
        .layout-feature-split .feature-media img{ width:100%; height:100%; object-fit:cover; filter:saturate(.95); }
        .layout-feature-split .bubble{ position:relative; z-index:2; margin: clamp(18px, 3vw, 28px); max-width:560px; 
          background:
            linear-gradient(135deg, #c9a8751a, #0000),
            rgba(12,11,10,.72);
          backdrop-filter: blur(10px) saturate(120%);
          border:1px solid var(--border);
          border-radius:22px; padding:1rem 1.2rem;
          box-shadow:0 10px 28px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04);
        }
        .layout-feature-split .bubble .kicker{ 
          color:var(--muted-2); text-transform:uppercase; letter-spacing:.14em; font-size:.72rem; margin-bottom:.5rem;
          display:inline-flex; align-items:center; gap:.4rem; padding:.28rem .6rem; border-radius:999px;
          background:rgba(255,255,255,.06); border:1px solid var(--border);
        }
        .layout-feature-split .bubble h3{ font-size:1.35rem; letter-spacing:-.01em; margin:.1rem 0 .3rem }
        .layout-feature-split .bubble .excerpt{ color:var(--muted); line-height:1.7; margin-bottom:.6rem }
        .layout-feature-split .pills{ display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:.5rem }
        .layout-feature-split .pill{ padding:.32rem .6rem; border-radius:999px; background:rgba(255,255,255,.06); border:1px solid var(--border); color:var(--muted); font-size:.78rem }
        .layout-feature-split .bubble .meta{ color:var(--muted-2); font-size:.82rem }
        .layout-feature-split .cta-link{ color:var(--text); text-decoration:none; margin-left:.6rem; font-size:.9rem }
        .layout-feature-split .cta-link:hover{ color:var(--gold) }

        /* Split card layout (reusable) */
        .layout-feature-card .post.card{ display:grid; grid-template-columns:1fr .9fr; align-items:stretch; gap:.8rem; border-radius:16px; overflow:hidden; border:1px solid var(--border); background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)); min-height:220px; }
        .layout-feature-card .card-media{ background:var(--panel); display:flex; align-items:center; justify-content:center }
        .layout-feature-card .card-media img{ width:100%; height:100%; object-fit:cover }
        .layout-feature-card .card-body{ padding:1rem }
        .layout-feature-card .card-body .kicker{ color:var(--muted-2); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; margin-bottom:.2rem }
        .layout-feature-card .card-body h3{ font-size:1.05rem; margin:.1rem 0 .4rem }
        .layout-feature-card .card-body .excerpt{ color:var(--muted); line-height:1.7; font-size:.94rem; margin-bottom:.6rem }
        .layout-feature-card .card-body .pills{ display:flex; flex-wrap:wrap; gap:.35rem; }
        .layout-feature-card .card-body .pill{ padding:.28rem .55rem; border-radius:999px; background:rgba(255,255,255,.06); border:1px solid var(--border); color:var(--muted); font-size:.76rem }
        .layout-feature-card .card-body .meta{ color:var(--muted-2); font-size:.82rem; margin-top:.4rem }

        @media (max-width: 980px){
          :is(#articles, #labs-latest, #code-latest) .articles-grid{ grid-template-columns:1fr; }
          :is(#articles, #labs-latest, #code-latest) .post.feature{ grid-column:auto; min-height:320px }
        }
  .grid{ max-width:1200px; margin:0 auto; display:grid; grid-template-columns:repeat(2,1fr); gap:1.6rem }
    /* Selected Work: 3 columns on wide screens with same block size */
  .portfolio .grid{ max-width:1800px; margin:0 auto; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
    @media (max-width: 1700px){
      .portfolio .grid{ max-width:1200px; grid-template-columns:repeat(2,1fr); }
    }
    @media (max-width: 760px){
      .portfolio .grid{ grid-template-columns:1fr; }
    }
        .card{
            background:var(--panel); border:1px solid var(--border); border-radius:var(--radius);
            overflow:hidden; aspect-ratio:1; position:relative; cursor:pointer; transition:transform .35s ease, border-color .35s ease;
        }
    .card.square-card{ aspect-ratio:1; }
        .card:hover{ transform:translateY(-6px); border-color:var(--gold) }
        .card::after{
            content:""; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .35s;
            background:linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.85) 100%);
        }
        .card:hover::after{ opacity:1 }
    .card-image{ display:flex; align-items:center; justify-content:center; width:100%; height:100%; font-size:5rem;
            background:radial-gradient(220px 180px at 60% 35%, rgba(201,168,117,.08), transparent 60%), linear-gradient(135deg,#161616,#0f0f0f)
        }
    .card-image img, .card-image video{ width:100%; height:100%; object-fit:cover; display:block; }
        .card-overlay{ position:absolute; inset:auto 0 0 0; padding:1.6rem; transform:translateY(16px); opacity:0; transition:all .35s; z-index:1 }
        .card:hover .card-overlay{ transform:translateY(0); opacity:1 }
        .card-category{ font-size:.72rem; color:var(--muted-2); text-transform:uppercase; letter-spacing:.12em; margin-bottom:.4rem }
        .card-overlay h3{ font-size:1.25rem; letter-spacing:-.02em }

        .modal{ display:none; position:fixed; inset:0; z-index:1300; background:rgba(5,5,5,.98); overflow-y:auto; animation:fadeIn .3s ease-out }
        .modal.active{ display:block }
        @keyframes fadeIn{ from{opacity:0} to{opacity:1} }
        .modal-content{ max-width:1500px; margin:3rem auto; padding:2rem 6%; position:relative; border-radius: var(--radius); overflow: visible; }
    .close-modal,
    .close-lightbox{
      width:46px; height:46px; display:flex; align-items:center; justify-content:center;
      font-size:1.6rem; color:var(--muted-2); cursor:pointer; background:rgba(255,255,255,.03);
      border:1px solid var(--border); transition:all .25s; border-radius:10px; padding:0;
      line-height:1; font-family:inherit; -webkit-appearance:none; appearance:none;
    }
    .close-modal{ position:fixed; top:2rem; right:2rem; z-index:1001 }
    .lightbox-media .close-lightbox{ position:absolute; top:calc(-1.6rem - 25px); right:calc(-1.6rem - 25px); z-index:3 }
      .close-modal:hover,.close-lightbox:hover{ color:var(--text); border-color:var(--gold); transform:rotate(90deg) }
    @media (max-width: 640px){
      .lightbox-media .close-lightbox{ top:calc(-1.2rem - 25px); right:calc(-1.2rem - 25px) }
    }
        .modal-header{ margin-bottom:3rem; position:relative }
        .modal-title{ font-size: clamp(2.2rem,4.6vw,3.2rem); font-weight:300; letter-spacing:-.02em }
          .modal-subtitle{ color:var(--muted-2); text-transform:uppercase; letter-spacing:.14em; font-size:.82rem }
          .modal-main-image{ width:100%; margin-bottom:3rem; display:flex; align-items:center; justify-content:center; font-size:6rem; background:var(--panel); border:1px solid var(--border); border-radius:var(--radius) }
        .modal-main-image video { width: 100%; height: auto; max-width: 100%; border-radius: 12px; object-fit: contain; display: block; }
        .modal-description{ background:rgba(255,255,255,.02); padding:2.4rem; border:1px solid var(--border); border-radius:var(--radius); margin-bottom:3rem }
        .modal-description h3{ font-size:1.32rem; margin-bottom:1rem }
        .modal-description p{ color:var(--muted); line-height:1.8 }
        .modal-description .modal-rich-body{ color:var(--text); line-height:1.85; font-size:1.03rem; margin-bottom:1.6rem }
        .modal-description .modal-rich-body p{ color:var(--muted); margin:.8rem 0 }
        .modal-description .modal-rich-body h2,
        .modal-description .modal-rich-body h3,
        .modal-description .modal-rich-body h4{ letter-spacing:-.01em; margin:1.4rem 0 .6rem; font-weight:600 }
        .modal-description .modal-rich-body h2{ font-size:1.5rem }
        .modal-description .modal-rich-body h3{ font-size:1.25rem }
        .modal-description .modal-rich-body ul,
        .modal-description .modal-rich-body ol{ margin:.6rem 0 .8rem 1.4rem }
        .modal-description .modal-rich-body li{ margin:.25rem 0 }
        .modal-description .modal-rich-body a{ color:var(--gold); text-decoration:none; transition:color .2s }
        .modal-description .modal-rich-body a:hover{ color:var(--gold-2); text-decoration:underline }
        .modal-description .modal-rich-body img,
        .modal-description .modal-rich-body video,
        .modal-description .modal-rich-body iframe{ display:block; width:100%; max-width:100%; height:auto; margin:1rem 0; border-radius:12px; border:1px solid var(--border); background:#000 }
        .modal-description .modal-rich-body iframe{ aspect-ratio:16 / 9 }
        .modal-description .modal-rich-body figure{ margin:1rem 0; border:1px solid var(--border); border-radius:12px; overflow:hidden; background:#0c0c0c }
        .modal-description .modal-rich-body figcaption{ padding:.6rem .9rem; color:var(--muted-2); font-size:.9rem; background:rgba(255,255,255,.02) }
        .modal-description .modal-rich-body table{ width:100%; border-collapse:separate; border-spacing:0; margin:1rem 0 }
        .modal-description .modal-rich-body th,
        .modal-description .modal-rich-body td{ padding:.6rem .8rem; border-top:1px solid var(--border); border-left:1px solid var(--border) }
        .modal-description .modal-rich-body th{ background:rgba(255,255,255,.03); text-align:left }
        .modal-description .modal-rich-body tr:last-child td{ border-bottom:1px solid var(--border) }
        .modal-description .modal-rich-body tr td:last-child,
        .modal-description .modal-rich-body tr th:last-child{ border-right:1px solid var(--border) }
        .modal-description .modal-rich-body blockquote{ margin:1rem 0; padding:1rem 1.2rem; border-left:3px solid var(--gold); background:rgba(201,168,117,.06); color:var(--text); border-radius:8px }
        .modal-description .modal-rich-body pre{ background:#0b0b0b; border:1px solid var(--border); border-radius:10px; padding:1rem; overflow:auto }
        .modal-description .modal-rich-body code{ font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; font-size:.95rem }
        .specs-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1.2rem; margin-top:1.6rem }
        .spec-item{ background:rgba(0,0,0,.45); padding:1.2rem; border:1px solid var(--border); border-radius:12px }
        .spec-label{ color:var(--muted-2); font-size:.72rem; text-transform:uppercase; letter-spacing:.14em; margin-bottom:.4rem }
        .spec-value{ font-weight:500 }

        .additional-images-section{ margin-bottom:3rem }
        .additional-images-section h3{ font-size:1.3rem; margin:2.2rem 0 1.2rem }
  .additional-images-grid{ display:flex; flex-direction:column; gap:1.5rem; align-items:center; width:100%; }
    .additional-image-item{ width:100%; margin-bottom:1.5rem; display:block; background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); cursor:pointer; transition:border-color .25s; overflow:hidden; }
        .additional-image-item:hover{ border-color:var(--gold) }
  .additional-image-item img{ width:100%; height:auto; display:block; border-radius:12px; object-fit: contain; }
  .additional-image-item.is-video{ padding:0; position:relative; }
  .additional-image-item video{ width:100%; height:100%; display:block; border-radius:12px; object-fit:cover; }
  .additional-media-video{ position:relative; width:100%; height:100%; background:var(--panel); border-radius:12px; overflow:hidden; }
  .media-badge{ position:absolute; top:12px; left:12px; background:rgba(0,0,0,.65); color:var(--text); border:1px solid rgba(255,255,255,.15); text-transform:uppercase; font-size:.72rem; letter-spacing:.14em; padding:.25rem .7rem; border-radius:999px; }

        /* Admin styles */
        .image-upload-item{ margin-bottom:1rem; padding:1rem; border:1px solid var(--border); border-radius:12px; background:rgba(255,255,255,.02) }
        .image-upload-item img{ max-width:200px; max-height:200px; border-radius:8px; margin-bottom:.5rem }
        .image-upload-item.new-image{ background:rgba(255,255,255,.05) }

        .breakdown-section h3, .similar-works h3{ font-size:1.3rem; margin:2.2rem 0 1.2rem }
        .breakdown-section, .similar-works{ border-radius: var(--radius); }
        .carousel-container{ position:relative; display:flex; align-items:center; border-radius: var(--radius); }
        .carousel-arrow{ background:var(--panel); border:1px solid var(--border); border-radius:50%; width:40px; height:40px; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--text); font-size:1.2rem; transition:background .25s; position:absolute; z-index:1 }
        .carousel-arrow:hover{ background:var(--gold); color:#17130c }
        .carousel-arrow.left{ left:-50px }
        .carousel-arrow.right{ right:-50px }
        .breakdown-grid, .similar-grid{  display:flex; gap:1.2rem; overflow-x:auto; scroll-behavior:smooth; scrollbar-width:none; -ms-overflow-style:none; padding:30px 20px; border-radius: var(--radius); }
        .breakdown-grid::-webkit-scrollbar, .similar-grid::-webkit-scrollbar{ display:none }
        .breakdown-item, .similar-card{ flex:0 0 340px; background:var(--panel); border:1px solid var(--border); border-radius:12px; transition:border-color .25s, transform .25s; cursor:pointer; min-height:320px }
        @media (max-width: 768px) {
            .breakdown-item, .similar-card{ flex:0 0 200px }
            .carousel-arrow{ width:35px; height:35px; font-size:1rem }
            .carousel-arrow.left{ left:-45px }
            .carousel-arrow.right{ right:-45px }
        }
        .breakdown-item:hover, .similar-card:hover{ border-color:var(--gold); transform:translateY(-3px) }
  .breakdown-image, .similar-image{ border-radius:12px; height:240px; display:flex; align-items:center; justify-content:center; font-size:2.6rem; background:linear-gradient(135deg,#151515,#0f0f0f) }
  .breakdown-image video{ width:100%; height:100%; object-fit:cover; display:block; border-radius:12px; }
  .similar-image video{ width:100%; height:100%; object-fit:cover; display:block; border-radius:12px; }
        @media (max-width: 768px) {
            .breakdown-image, .similar-image{ border-radius:12px; height:180px; font-size:2rem }
        }
        .breakdown-label, .similar-title{ text-align:center; padding:1rem; color:var(--muted) }
  .breakdown-image img, .similar-image img, .lightbox-image img, .modal-main-image img{ border-radius:12px; object-fit: contain }

        /* Custom Video Player */
        .custom-video-player { position: relative; width: 100%; height: 100%; background: var(--panel); border-radius: 12px; overflow: hidden; }
  .custom-video-player video { width: 100%; height: 100%; object-fit: cover; }
        .video-controls { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,0.7); padding: 0.5rem; display: flex; align-items: center; gap: 0.5rem; opacity: 0; transition: opacity 0.3s; }
        .custom-video-player:hover .video-controls { opacity: 1; }
        .play-btn, .stop-btn { background: var(--gold); color: #17130c; border: none; border-radius: 4px; padding: 0.3rem 0.6rem; cursor: pointer; font-size: 1rem; }
        .play-btn:hover, .stop-btn:hover { background: var(--gold-2); }
        .volume-slider { flex: 1; max-width: 100px; }

    .lightbox{ display:none; position:fixed; inset:0; z-index:2000; background:rgba(5,5,5,.6); align-items:center; justify-content:center; overflow-y:auto; animation:fadeIn .3s ease-out; backdrop-filter: blur(12px) saturate(110%); -webkit-backdrop-filter: blur(12px) saturate(110%); }
        .lightbox.active{ display:flex }
  .lightbox-content{ width:auto; max-width:min(94vw, 1800px); max-height:90vh; display:flex; flex-direction:column; align-items:center; padding:clamp(1rem, 2.5vh, 2rem) clamp(1rem, 3vw, 2rem); position:relative }
  .lightbox-body{ width:100%; display:flex; flex-direction:column; align-items:center; gap:1.5rem }
  .lightbox-media{ position:relative; display:inline-flex; margin:0 auto; max-width:100% }
  .lightbox-image{  --lightbox-border-gap: clamp(.5rem,5%,1.6rem); max-width:100%; background:var(--panel); display:flex; align-items:center; justify-content:center; font-size:8rem; padding:var(--lightbox-border-gap); margin-bottom:0; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden }
  .lightbox-image img, .lightbox-image video { max-width: 100%; max-height: calc(min(80vh, 78svh, calc(100vh - 7rem)) - (var(--lightbox-border-gap, 1rem) * 2)); object-fit: contain; display: block; }
  @supports (height: 100dvh) {
    .lightbox-content{ max-height:100dvh; }
    .lightbox-image img, .lightbox-image video { max-height: calc(min(78dvh, calc(100dvh - 7rem)) - (var(--lightbox-border-gap, 1rem) * 2)); }
  }
        .lightbox-description{ background:rgba(255,255,255,.02); padding:2rem; border:1px solid var(--border); border-radius:var(--radius); max-width:760px }
        .lightbox-title{ font-size:1.5rem; margin-bottom:.6rem }
        .lightbox-text{ color:var(--muted); line-height:1.8 }

        /* Article modal body content polish */
        .modal-body img{ max-width:100%; height:auto; border-radius:12px; display:block; margin: .8rem 0; }
        .modal-body p{ color:var(--text); line-height:1.8; margin:.6rem 0; }
        .modal-body a{ color:var(--gold); text-decoration:none; }
        .modal-body a:hover{ text-decoration:underline; }

.modal-body-layout{ position:relative; margin-top:2.5rem; }
.modal-body-layout.has-toc{ position:relative; --pm-toc-width: clamp(200px,24vw,300px); --pm-toc-gap: clamp(2.2rem,5vw,3.4rem); }
.modal-body-layout.has-toc .modal-body{ position:relative; padding-right:calc(var(--pm-toc-width) + var(--pm-toc-gap)); }
.modal-toc{ position:absolute; top:0; right:var(--pm-toc-gap); bottom:0; width:var(--pm-toc-width); max-width:100%; display:flex; align-items:flex-start; justify-content:flex-end; pointer-events:none; z-index:30; }
.modal-toc.is-empty{ display:none; }
.modal-toc-dock{ position:sticky; top:calc(4.8rem + 4.8rem); display:flex; align-items:flex-start; pointer-events:auto; margin-left:auto; }
.modal-toc-dock::before{ content:""; position:absolute; top:-20px; bottom:-20px; right:100%; width:14px; pointer-events:auto; }
.modal-toc-rail{ top:20px; width:40px; height:clamp(220px,58vh,460px); border-radius:999px; background:transparent; position:relative; overflow:hidden; transition:transform .2s ease; }
.modal-toc-rail-lines{ position:absolute; inset:8px 0; pointer-events:none; }
.modal-toc-rail-marker{ position:absolute; right:-1px; left:auto; width:150%; height:2px; border-radius:999px; background:rgba(255,255,255,.38); opacity:.65; transform:translateY(-50%); transition:opacity .2s ease, background .2s ease; }
.modal-toc-rail-marker.level-2{ width:100%; opacity:1; }
.modal-toc-rail-marker.level-3{ width:50%; opacity:.6; }
.modal-toc-rail-marker.level-4{ width:40%; opacity:.4; }
.modal-toc-rail-marker.active,
.modal-toc-rail-marker.hover{ opacity:1; background:linear-gradient(90deg,var(--gold),var(--gold-2)); }
.modal-toc:hover .modal-toc-rail, .modal-toc:focus-within .modal-toc-rail{ transform:translateX(-2px); }
.modal-toc-indicatorX{ position:absolute; left:calc(50% - 10px); width:20px; height:20px; border-radius:999px; background:linear-gradient(180deg,var(--gold),var(--gold-2)); box-shadow:0 4px 12px rgba(0,0,0,.32); top:50%; transform:translateY(-25%); transition:top .25s ease; z-index:2; }
.modal-toc-panel{ position:absolute; right:calc(100% + 12px); top:20px; width:220px; padding:1.6rem 1.8rem; border-radius:18px; background:rgba(16,13,10,.94); border:1px solid rgba(255,255,255,.08); box-shadow:0 22px 46px rgba(0,0,0,.34); opacity:0; pointer-events:none; transform:translateX(14px); transition:opacity .18s ease, transform .18s ease; z-index:30; }
.modal-toc-panel h4{ font-size:.9rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2); margin:0 0 .85rem; }
.modal-toc-list{ display:flex; flex-direction:column; gap:.2rem; }
.modal-toc-list a{ display:block; text-decoration:none; color:var(--muted); font-size:.96rem; line-height:1.5; padding:.3rem .6rem; border-radius:8px; transition:color .2s, background .2s, transform .2s; }
.modal-toc-list a:hover{ color:var(--text); background:rgba(255,255,255,.05); }
.modal-toc-list a.active{ color:var(--gold); transform:translateX(6px); background:rgba(255,255,255,.08); }
.modal-toc-list a.level-2{ padding-left:.1rem; font-size:.9rem; font-weight: bold; }
.modal-toc-list a.level-3{ padding-left:1.4rem; font-size:.9rem; }
.modal-toc-list a.level-4{ padding-left:2rem; font-size:.86rem; color:var(--muted-2); }
.modal-toc-mobile-toggle{ display:none; }

.modal-toc:not(.is-empty):focus-within .modal-toc-panel{
  opacity:1;
  transform:translateX(0);
  pointer-events:auto;
}

@media (hover:hover){
  .modal-toc:not(.is-empty):hover .modal-toc-panel{
    opacity:1;
    transform:translateX(0);
    pointer-events:auto;
  }
}

.modal-toc.open .modal-toc-panel{ opacity:1; transform:translateX(0); pointer-events:auto; }

@media (max-width: 1180px){
  .modal-body-layout.has-toc{ --pm-toc-width: clamp(170px,28vw,260px); --pm-toc-gap: clamp(1.9rem,4vw,2.8rem); }
}

@media (max-width: 900px){
  .modal-body-layout{ margin-top:2rem; }
  .modal-body-layout.has-toc{ display:block; }
  .modal-body-layout.has-toc .modal-body{ padding-right:0; }
  .modal-toc{ position:relative; top:auto; right:auto; margin:1.5rem 0 0; width:100%; pointer-events:auto; }
  .modal-toc-dock{ display:none; }
  .modal-toc-mobile-toggle{ display:flex; align-items:center; justify-content:space-between; width:100%; background:rgba(255,255,255,.05); border:1px solid var(--border); border-radius:var(--radius); padding:.9rem 1.1rem; font-weight:600; font-size:.95rem; letter-spacing:.04em; color:var(--text); cursor:pointer; gap:.75rem; }
  .modal-toc-mobile-toggle::after{ content:'>'; display:inline-block; transform:rotate(90deg); transition:transform .2s; font-size:.85rem; }
  .modal-toc.open .modal-toc-mobile-toggle::after{ transform:rotate(-90deg); }
  .modal-toc-panel{ position:relative; right:auto; top:auto; width:100%; max-height:320px; margin-top:.75rem; opacity:0; transform:translateY(-8px); display:none; background:rgba(255,255,255,.04); box-shadow:none; border-radius:var(--radius); }
  .modal-toc.open .modal-toc-panel{ display:block; opacity:1; transform:translateY(0); pointer-events:auto; }
  .modal-toc-panel nav{ max-height:240px; overflow:auto; }
}

@media (max-width: 560px){
  .modal-toc-mobile-toggle{ font-size:.9rem; padding:.8rem 1rem; }
  .modal-toc-panel{ padding:1.1rem 1.2rem; }
}

        .about{ padding:7rem 6%; background:rgba(255,255,255,.01); margin-top:3rem; }
.about .section-title{ margin-bottom:1.2rem }
.about-content{ max-width:880px; margin:0 auto; text-align:center }
.about-content p{ color:var(--muted); font-size:1.05rem; line-height:1.85 }
        .about .section-title{ margin-bottom:1.2rem }
        .about-content{ max-width:880px; margin:0 auto; text-align:center }
        .about-content p{ color:var(--muted); font-size:1.05rem; line-height:1.85 }

        .contact{ padding:7rem 6%; text-align:center }
        .contact-links{ display:flex; justify-content:center; gap:1.2rem; margin-top:2rem; flex-wrap:wrap }
        .contact-link{
            display:inline-flex; align-items:center; gap:.7rem; padding:1rem 2.1rem; border-radius:999px; text-decoration:none;
            background:transparent; color:var(--muted); border:1px solid var(--border); text-transform:uppercase; letter-spacing:.12em; font-size:.78rem; transition:all .25s
        }
        .contact-link:hover{ color:var(--text); border-color:var(--gold); background:rgba(255,255,255,.03) }
        .contact-button{ display:inline-flex; align-items:center; gap:.7rem; padding:1rem 2.1rem; border-radius:999px; background:linear-gradient(180deg,var(--gold),var(--gold-2)); color:#17130c; border:1px solid rgba(0,0,0,.4); box-shadow:0 8px 18px rgba(201,168,117,.25); text-transform:uppercase; letter-spacing:.12em; font-size:.78rem; cursor:pointer; transition:transform .2s, filter .2s }
        .contact-button:hover{ transform:translateY(-1px); filter:saturate(110%) }

        footer{ padding:2.6rem 6%; text-align:center; color:#3c372f; border-top:1px solid var(--border); font-size:.86rem }

        @media (max-width: 880px){
            /* Show compact inline links if centered pill is too tight */
            .menu-pill{ transform:translateX(-50%) scale(.92); padding:.3rem .4rem }
        }
        @media (max-width: 640px){
            .menu-pill{ display:none }
            nav.primary{ display:block }
            header{ justify-content:space-between }
        }
    /* === Injected header (from headerpill) === */

        header{
            position:fixed; top:0; left:0; right:0; z-index:60;
            background:transparent; /* let hero show through */
            padding:1rem 0; /* short header */
            display:flex; justify-content:center; pointer-events:none; /* only pill is interactive */
        }
        .nav-pill{
            pointer-events:auto;
            display:flex; align-items:center; gap:1.2rem;
            padding:.6rem 1rem; border-radius:22px; /* match bubble radius */
            border:1px solid rgba(255,255,255,.04); /* softer, less pronounced border */
            background:
              linear-gradient(135deg, #c9a87522, #0000), /* stronger gold tint */
              rgba(20,17,14,.62);                 /* lighter, warmer base */
            box-shadow:
              0 8px 22px rgba(0,0,0,.32),         /* softer shadow */
              inset 0 1px 0 rgba(255,255,255,.03);
            backdrop-filter: blur(10px) saturate(110%); /* slightly toned down */
        }
        .brand{
            font-weight:700; letter-spacing:.28em; font-size:.9rem; color:var(--muted);
            text-transform:lowercase; padding:.3rem .6rem; border-radius:8px;
            background:transparent;
        }
        .nav-pill ul{ list-style:none; display:flex; gap:1.2rem; align-items:center }
    .nav-pill a{
            text-decoration:none; text-transform:uppercase; letter-spacing:.12em;
            font-size:.76rem; color:var(--muted-2); padding:.38rem .8rem; border-radius:999px;
            transition:color .2s, background .2s;
        }
    .nav-pill a:hover{ color:var(--text); background:transparent }
        .dot{ width:4px; height:4px; border-radius:50%; background:rgba(255,255,255,.22) }
        .cta{
            padding:.5rem 1rem; border-radius:9px; text-decoration:none;
            font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.12em;
            background:linear-gradient(180deg,var(--gold),var(--gold-2));
            color:#17130c; border:1px solid rgba(0,0,0,.45); box-shadow:0 8px 18px rgba(201,168,117,.25);
            transition:transform .2s, filter .2s;
        }
  /* Consistent hover: lighten slightly instead of darken */
  .cta:hover{ transform:translateY(-1px); filter:brightness(1.08) saturate(110%) }
    /* Darker text for header "Let’s Talk" CTA only */
    .nav-pill .cta{ color:#0b0906 !important; }

        /* mobile fallback: simple bar */
        @media (max-width: 760px){
            .nav-pill{ gap:.6rem; padding:.6rem 1rem }
            .brand{ display:none }
            .dot{ display:none }
        }

        
/* === End injected header === */

/* === Final override: ensure single transparent header background (headerpill only) === */
header{ background:transparent !important; border-bottom:none !important; }


/* === All Works gallery (grouped by tags) === */
.gallery-modal{ display:none; position:fixed; inset:0; z-index:1200; background:rgba(5,5,5,.98); overflow-y:auto }
.gallery-modal.active{ display:block }
.gallery-content{ max-width:2400px !important; margin:2.2rem auto; padding:1rem 6%; }
.gallery-grid{ display:flex; flex-direction:column; gap:3rem; }
.gallery-tag-header{ margin-bottom: 1rem; }
.gallery-header-content{ display:flex; justify-content:space-between; align-items:center; }
.gallery-tag-title{ font-size: 1.5rem; font-weight: 600; color: var(--gold); margin: 0; padding-bottom: 0.5rem; border-bottom: 2px solid var(--gold); }
.gallery-topic-tags{ display:flex; gap:0.5rem; flex-wrap:wrap; }
.gallery-topic-tag{ padding:0.25rem 0.75rem; background:var(--panel); border:1px solid var(--border); border-radius:6px; font-size:0.85rem; color:var(--muted); cursor:pointer; transition:background-color .25s, border-color .25s, color .25s }
.gallery-topic-tag:hover{ background:var(--hover); border-color:var(--gold); color:var(--text) }
.gallery-topic-tag.active{ background:var(--gold); border-color:var(--gold); color:#000 }
.gallery-tag-grid{ display:grid; grid-template-columns:repeat(6, minmax(280px, 1fr)); gap:1rem; margin-bottom: 2rem; }
.gallery-card{ background:var(--panel); border:1px solid var(--border); border-radius:12px; overflow:hidden; aspect-ratio:1; cursor:pointer; transition:transform .25s, border-color .25s }
.gallery-card:hover{ transform:translateY(-4px); border-color:var(--gold) }
.gallery-thumb{ display:flex; align-items:center; justify-content:center; width:100%; height:100%; font-size:4.6rem;
    background:radial-gradient(160px 120px at 60% 35%, rgba(201,168,117,.08), transparent 60%), linear-gradient(135deg,#161616,#0f0f0f) }
.gallery-title{ padding:.6rem .8rem; font-size:.9rem; color:var(--muted); text-align:center; border-top:1px solid var(--border) }

@media (max-width: 1280px){ .gallery-tag-grid{ display:grid; grid-template-columns:repeat(5, minmax(260px, 1fr)); gap:1rem; } }
@media (max-width: 1024px){ .gallery-tag-grid{ display:grid; grid-template-columns:repeat(4, minmax(240px, 1fr)); gap:1rem; } }
@media (max-width: 768px){ .gallery-tag-grid{ display:grid; grid-template-columns:repeat(3, minmax(220px, 1fr)); gap:1rem; } }
@media (max-width: 520px){ .gallery-tag-grid{ display:grid; grid-template-columns:repeat(2, minmax(200px, 1fr)); gap:1rem; } }


/* === About: full-bleed background with preserved inner padding === */
.about{ padding:7rem 0; background:rgba(255,255,255,.01); margin-top:3rem; width:100%; }
.about > *{ padding:0 6%; } /* keep inner content aligned with rest of page */

/* === About hero (inline block variant used on about.html and index.html) === */
.about-hero{ position:relative; padding:4rem 6% 2rem; }
.about-hero-inner{ width:fit-content; margin:0 auto; display:grid; grid-template-columns:auto auto auto; align-items:center; justify-items:center; gap: clamp(12px, 3vw, 24px); }
.about-name{ font-family:'Playfair Display',serif; font-weight:400; font-style:italic; color:var(--gold); letter-spacing:-.02em; line-height:.9; font-size: clamp(40px, 10vw, 120px); white-space:nowrap; opacity:.9; text-align:center; }
.about-portrait{ width: clamp(200px, 20vw, 380px); aspect-ratio: 3 / 4; border-radius:0%; overflow:hidden; margin:0 auto; }
.about-portrait img{ width:100%; height:100%; object-fit:cover; object-position:50% 40%; display:block; }
.about-copy{ max-width:1200px; margin: clamp(28px, 5vw, 48px) auto 0; display:grid; grid-template-columns:1fr 1fr; gap: clamp(16px, 4vw, 48px); align-items:start; color:#cfc7b4; }
.about-copy .tagline p{ margin:0; }
.about-copy .tagline p{ font-family:'Playfair Display',serif; font-style:italic; font-weight:400; font-size: clamp(26px, 3.8vw, 64px); color:var(--gold); opacity:1; line-height:1.15; }
.about-copy .intro{ font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial,'Noto Sans','Liberation Sans',sans-serif; font-size: clamp(14px, 1.5vw, 16px); line-height:1.8; color: rgba(233,228,218,.85); }
.about-copy .intro strong{ color:var(--gold); font-weight:600; }
.about-socials{ display:flex; gap:10px; align-items:center; grid-column:2; margin-top:6px; }
.about-socials a{ display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.06); color: rgba(233,228,218,.9); text-decoration:none; transition:all .2s ease; }
.about-socials .social-logo{ width:16px; height:16px; display:block; filter:grayscale(1) brightness(1.35); opacity:.9; }
.about-socials a:hover{ transform:translateY(-2px); background:rgba(255,255,255,.08); color:var(--gold); }
@media (max-width:1920px){
  .about-hero-inner{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:clamp(18px, 5vw, 40px);
    text-align:center;
    width:100%;
  }
  .about-name.left{ display:none; }
  .about-name.right{ text-align:center; }
  .about-portrait{ width:min(460px, 45vw); }
  .about-copy{ grid-template-columns:1fr; text-align:center; }
  .about-socials{ grid-column:auto; justify-content:center; }
}
@media (max-width:900px){
  .about-portrait{ width:min(340px, 70vw); }
}
@media (max-width:600px){
  .about-name.right{
    white-space:normal;
    font-size: clamp(32px, 14vw, 60px);
    line-height:1;
  }
  .about-portrait{ width:min(250px, 78vw); }
  .about-copy{ gap:clamp(14px, 7vw, 28px); }
}

@media (min-width:1600px){
  .about-copy{ max-width:1400px; grid-template-columns:minmax(240px, .55fr) minmax(0, 1.45fr); gap:clamp(18px, 3vw, 40px); }
  .about-copy .intro{ font-size: clamp(15px, 1.2vw, 17px); }
}

/* === About page (custom layout; scoped) === */
.about-page{ background:var(--bg); }
.about-page .about-shell{
  position:relative;
  padding:clamp(2.5rem, 6vw, 4.5rem) 6% 5rem;
}
.about-page .about-hero-wrap{
  max-width:1200px;
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap:clamp(1.5rem, 4vw, 3rem);
  align-items:center;
}
.about-page .about-hero-card{
  position:relative;
  padding:clamp(2rem, 4vw, 3rem);
  border-radius:22px;
  border:1px solid var(--border);
  background:linear-gradient(135deg, rgba(201,168,117,.08), rgba(255,255,255,.02));
  box-shadow:var(--shadow);
  overflow:hidden;
}
.about-page .about-hero-card::after{
  content:"";
  position:absolute;
  inset:1px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.04);
  pointer-events:none;
}
.about-page .about-eyebrow{
  text-transform:uppercase;
  letter-spacing:.2em;
  font-size:.72rem;
  color:var(--muted-2);
}
.about-page .about-title{
  margin:.6rem 0 1rem;
  font-size:clamp(2.3rem, 4vw, 3.3rem);
  font-weight:300;
  letter-spacing:-.02em;
  line-height:1.1;
}
.about-page .about-title .accent{
  font-family:'Playfair Display',serif;
  font-style:italic;
  color:var(--gold);
}
.about-page .about-subtitle{
  color:var(--muted);
  font-size:1.02rem;
  line-height:1.8;
}
.about-page .about-cta-row{
  margin-top:1.6rem;
  display:flex;
  flex-wrap:wrap;
  gap:.8rem;
  align-items:center;
}
.about-page .about-cta{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  padding:.85rem 1.6rem;
  border-radius:999px;
  border:1px solid var(--border-strong);
  text-decoration:none;
  color:var(--text);
  font-size:.8rem;
  text-transform:uppercase;
  letter-spacing:.16em;
  transition:all .2s ease;
  background:rgba(255,255,255,.02);
}
.about-page .about-cta.primary{
  background:linear-gradient(180deg,var(--gold),var(--gold-2));
  color:#17130c;
  border-color:rgba(0,0,0,.4);
}
.about-page .about-cta:hover{ transform:translateY(-2px); border-color:var(--gold); }
.about-page .about-portrait-panel{
  position:relative;
  border-radius:22px;
  border:1px solid var(--border);
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.2));
  padding:clamp(1.8rem, 3vw, 2.4rem);
  box-shadow:var(--shadow);
  display:grid;
  gap:1.5rem;
}
.about-page .about-portrait{
  width:100%;
  aspect-ratio:1 / 1.05;
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  background:#0c0c0c;
}
.about-page .about-portrait img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(.85) contrast(1.05) brightness(.92);
}
.about-page .about-badges{ display:grid; gap:.75rem; }
.about-page .about-badge{
  padding:.8rem 1rem;
  border-radius:14px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.02);
  color:var(--muted);
  font-size:.92rem;
}
.about-page .about-badge strong{ color:var(--text); font-weight:600; }
.about-page .about-section{ margin-top:clamp(2.5rem, 6vw, 4rem); }
.about-page .about-section-inner{ max-width:1200px; margin:0 auto; }
.about-page .about-section h2{
  font-size:clamp(1.8rem, 3.6vw, 2.4rem);
  font-weight:300;
  letter-spacing:-.02em;
  margin-bottom:1.5rem;
}
.about-page .about-section h2 .accent{
  font-family:'Playfair Display',serif;
  font-style:italic;
  color:var(--gold);
}
.about-page .about-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:1.2rem;
}
.about-page .about-card{
  border-radius:18px;
  border:1px solid var(--border);
  padding:1.4rem;
  background:rgba(255,255,255,.02);
  box-shadow:var(--shadow);
}
.about-page .about-card h3{
  font-size:1.1rem;
  margin-bottom:.6rem;
  letter-spacing:-.01em;
}
.about-page .about-card p{ color:var(--muted); line-height:1.7; }
.about-page .about-timeline{ display:grid; gap:1rem; }
.about-page .about-timeline-item{
  display:grid;
  grid-template-columns:120px 1fr;
  gap:1.2rem;
  padding:1.2rem 1.4rem;
  border-radius:16px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.02);
}
.about-page .about-timeline-label{
  display:inline-flex;
  align-items:center;
  color:var(--muted-2);
  font-size:.85rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  gap:.6rem;
}
.about-page .about-timeline-dot{
  width:.45rem;
  height:.45rem;
  border-radius:50%;
  background:linear-gradient(180deg, var(--gold), var(--gold-2));
  display:inline-block;
  flex:0 0 auto;
}
.about-page .about-timeline-item h4{ margin:0 0 .3rem; font-size:1.05rem; }
.about-page .about-timeline-item p{ margin:0; color:var(--muted); line-height:1.7; }
.about-page .about-metrics{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:1rem;
  text-align:center;
}
.about-page .metric{
  padding:1.2rem;
  border-radius:16px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.02);
}
.about-page .metric strong{
  display:block;
  font-size:1.8rem;
  color:var(--gold);
  letter-spacing:-.02em;
}
.about-page .metric span{ color:var(--muted-2); font-size:.9rem; }
.about-page .about-socials{
  display:flex;
  gap:.6rem;
  flex-wrap:wrap;
  margin-top:1.2rem;
}
.about-page .about-socials a{
  width:38px;
  height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  border:1px solid var(--border);
  color:var(--text);
  text-decoration:none;
  background:rgba(255,255,255,.03);
  transition:all .2s ease;
}
.about-page .about-socials .brand-logo{ opacity:1; }
.about-page .about-socials .brand-logo img{
  width:18px;
  height:18px;
  display:block;
  filter:grayscale(1) brightness(1.35);
  opacity:.9;
}
.about-page .about-socials .social-logo{
  width:18px;
  height:18px;
  display:block;
  filter:grayscale(1) brightness(1.35);
  opacity:.9;
}
.about-page .about-socials a:hover{ transform:translateY(-2px); border-color:var(--gold); color:var(--gold); }

/* === Art Section (Premium showcase) === */
.about-page .art-showcase{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  gap:1.2rem;
}
.about-page .art-card{
  position:relative;
  border-radius:20px;
  background:rgba(255,255,255,.02);
  border:1px solid var(--border);
  overflow:hidden;
  transition:all .4s ease;
}
.about-page .art-card::before{
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse 80% 60% at 50% 100%, rgba(201,168,117,.06), transparent);
  opacity:0;
  transition:opacity .4s ease;
}
.about-page .art-card:hover{
  transform:translateY(-6px);
  border-color:rgba(201,168,117,.3);
  box-shadow:0 20px 40px rgba(0,0,0,.3);
}
.about-page .art-card:hover::before{ opacity:1; }
.about-page .art-card-inner{
  position:relative;
  z-index:1;
  padding:1.8rem;
  height:100%;
  display:flex;
  flex-direction:column;
}
.about-page .art-icon{
  width:50px;
  height:50px;
  border-radius:14px;
  background:linear-gradient(135deg, rgba(201,168,117,.18), rgba(201,168,117,.06));
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:1.2rem;
}
.about-page .art-icon i{
  font-size:1.4rem;
  color:var(--gold);
}
.about-page .art-card h3{
  font-size:1.15rem;
  font-weight:500;
  margin-bottom:.8rem;
  color:var(--text);
}
.about-page .art-card p{
  color:var(--muted);
  line-height:1.7;
  font-size:.95rem;
}
.about-page .art-card-featured .art-card-inner{
  padding:2rem;
}
.about-page .art-card-featured{
  grid-row:span 2;
}
.about-page .art-highlight{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  margin:1.2rem 0;
}
.about-page .art-highlight span{
  padding:.4rem .8rem;
  border-radius:8px;
  background:linear-gradient(135deg, rgba(201,168,117,.12), rgba(201,168,117,.04));
  border:1px solid rgba(201,168,117,.2);
  font-size:.8rem;
  color:var(--gold);
  font-weight:500;
}
.about-page .art-tagline{
  margin-top:auto;
  padding-top:1rem;
  border-top:1px solid var(--border);
  font-style:italic;
  color:var(--muted-2);
  font-size:.9rem;
}

/* === Tech Section (Numbered cards) === */
.about-page .tech-grid{
  display:flex;
  flex-direction:column;
  gap:1rem;
}
.about-page .tech-card{
  display:flex;
  align-items:center;
  gap:1.5rem;
  padding:1.5rem 2rem;
  border-radius:18px;
  background:linear-gradient(90deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
  border:1px solid var(--border);
  transition:all .3s ease;
  position:relative;
  overflow:hidden;
}
.about-page .tech-card::after{
  content:'';
  position:absolute;
  right:0;
  top:0;
  bottom:0;
  width:120px;
  background:linear-gradient(90deg, transparent, rgba(201,168,117,.03));
  opacity:0;
  transition:opacity .3s ease;
}
.about-page .tech-card:hover{
  border-color:rgba(201,168,117,.25);
  transform:translateX(6px);
}
.about-page .tech-card:hover::after{ opacity:1; }
.about-page .tech-number{
  font-family:'Playfair Display',serif;
  font-size:2.2rem;
  font-weight:400;
  color:rgba(201,168,117,.25);
  line-height:1;
  min-width:50px;
  transition:color .3s ease;
}
.about-page .tech-card:hover .tech-number{
  color:var(--gold);
}
.about-page .tech-content{
  flex:1;
}
.about-page .tech-content h3{
  font-size:1.1rem;
  font-weight:500;
  margin-bottom:.4rem;
  color:var(--text);
}
.about-page .tech-content p{
  color:var(--muted);
  font-size:.95rem;
  line-height:1.6;
}
.about-page .tech-icon{
  width:44px;
  height:44px;
  border-radius:12px;
  background:rgba(255,255,255,.03);
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  z-index:1;
}
.about-page .tech-icon i{
  font-size:1.2rem;
  color:var(--muted);
  transition:color .3s ease;
}
.about-page .tech-card:hover .tech-icon i{
  color:var(--gold);
}

/* === Toolkit Section (Modern redesign) === */
.about-page .toolkit-grid{
  display:flex;
  flex-direction:column;
  gap:1rem;
}
.about-page .toolkit-card{
  display:flex;
  align-items:flex-start;
  gap:1.2rem;
  padding:1.5rem 1.8rem;
  border-radius:20px;
  background:linear-gradient(135deg, rgba(201,168,117,.04) 0%, rgba(255,255,255,.02) 100%);
  border:1px solid var(--border);
  transition:all .3s ease;
  position:relative;
  overflow:hidden;
}
.about-page .toolkit-card::before{
  content:'';
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:3px;
  background:linear-gradient(180deg, var(--gold), var(--gold-2));
  opacity:0;
  transition:opacity .3s ease;
}
.about-page .toolkit-card:hover{
  border-color:rgba(201,168,117,.3);
  transform:translateX(4px);
}
.about-page .toolkit-card:hover::before{ opacity:1; }
.about-page .toolkit-icon{
  width:48px;
  height:48px;
  border-radius:14px;
  background:linear-gradient(135deg, rgba(201,168,117,.15), rgba(201,168,117,.05));
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.about-page .toolkit-icon i{
  font-size:1.3rem;
  color:var(--gold);
}
.about-page .toolkit-content{ flex:1; }
.about-page .toolkit-content h3{
  font-size:1.1rem;
  font-weight:500;
  margin-bottom:.7rem;
  color:var(--text);
}
.about-page .toolkit-tags{
  display:flex;
  flex-wrap:wrap;
  gap:.4rem;
}
.about-page .toolkit-tags span{
  padding:.35rem .7rem;
  border-radius:20px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  font-size:.8rem;
  color:var(--muted);
  transition:all .2s ease;
}
.about-page .toolkit-card:hover .toolkit-tags span{
  border-color:rgba(201,168,117,.2);
  color:var(--text);
}

/* === Journey Section (Timeline redesign) === */
.about-page .journey-track{
  display:flex;
  flex-direction:column;
  gap:0;
  position:relative;
}
.about-page .journey-stop{
  display:flex;
  gap:1.5rem;
  padding:1.5rem 0;
}
.about-page .journey-marker{
  display:flex;
  flex-direction:column;
  align-items:center;
  width:24px;
  flex-shrink:0;
}
.about-page .journey-dot{
  width:14px;
  height:14px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--gold), var(--gold-2));
  box-shadow:0 0 12px rgba(201,168,117,.4);
  flex-shrink:0;
  z-index:1;
}
.about-page .journey-line{
  flex:1;
  width:2px;
  background:linear-gradient(180deg, var(--gold), rgba(201,168,117,.2));
  margin-top:.5rem;
}
.about-page .journey-content{
  flex:1;
  padding-bottom:.5rem;
}
.about-page .journey-label{
  display:inline-block;
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:.4rem;
  padding:.25rem .6rem;
  background:rgba(201,168,117,.1);
  border-radius:4px;
}
.about-page .journey-content h3{
  font-size:1.15rem;
  font-weight:500;
  margin-bottom:.5rem;
  color:var(--text);
}
.about-page .journey-content p{
  color:var(--muted);
  line-height:1.7;
  font-size:.95rem;
}

/* === Human Side Section (Card grid redesign) === */
.about-page .human-intro{
  color:var(--muted);
  font-size:1.05rem;
  max-width:900px;
  margin-bottom:2rem;
  line-height:1.7;
}
.about-page .human-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:1.2rem;
}
.about-page .human-card{
  padding:1.5rem;
  border-radius:18px;
  background:rgba(255,255,255,.02);
  border:1px solid var(--border);
  text-align:center;
  transition:all .3s ease;
  position:relative;
  overflow:hidden;
}
.about-page .human-card::after{
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 50% 0%, rgba(201,168,117,.08) 0%, transparent 70%);
  opacity:0;
  transition:opacity .3s ease;
}
.about-page .human-card:hover{
  transform:translateY(-4px);
  border-color:rgba(201,168,117,.25);
}
.about-page .human-card:hover::after{ opacity:1; }
.about-page .human-icon{
  width:56px;
  height:56px;
  margin:0 auto 1rem;
  border-radius:50%;
  background:linear-gradient(135deg, rgba(201,168,117,.12), rgba(201,168,117,.04));
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  z-index:1;
}
.about-page .human-icon i{
  font-size:1.4rem;
  color:var(--gold);
}
.about-page .human-card h3{
  font-size:1rem;
  font-weight:500;
  margin-bottom:.6rem;
  color:var(--text);
  position:relative;
  z-index:1;
}
.about-page .human-card p{
  font-size:.9rem;
  color:var(--muted);
  line-height:1.6;
  position:relative;
  z-index:1;
}
.about-page .human-why{
  display:flex;
  align-items:center;
  gap:1rem;
  margin-top:2rem;
  padding:1.2rem 1.5rem;
  border-radius:14px;
  background:linear-gradient(135deg, rgba(201,168,117,.08), rgba(255,255,255,.02));
  border:1px solid rgba(201,168,117,.15);
}
.about-page .human-why i{
  font-size:1.5rem;
  color:var(--gold);
}
.about-page .human-why p{
  margin:0;
  color:var(--muted);
  font-size:.95rem;
}
.about-page .human-why strong{
  color:var(--text);
}

@media (max-width: 980px){
  .about-page .about-hero-wrap{ grid-template-columns:1fr; }
  .about-page .about-metrics{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .about-page .about-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .about-page .human-grid{ grid-template-columns:repeat(2, 1fr); }
  .about-page .art-showcase{ grid-template-columns:1fr 1fr; }
  .about-page .art-card-featured{ grid-row:span 1; }
}
@media (max-width: 640px){
  .about-page .about-grid{ grid-template-columns:1fr; }
  .about-page .about-timeline-item{ grid-template-columns:1fr; }
  .about-page .about-timeline-label{ width:fit-content; }
  .about-page .about-metrics{ grid-template-columns:1fr; }
  .about-page .human-grid{ grid-template-columns:1fr; }
  .about-page .toolkit-card{ flex-direction:column; }
  .about-page .journey-stop{ gap:1rem; }
  .about-page .art-showcase{ grid-template-columns:1fr; }
  .about-page .tech-card{ flex-direction:column; align-items:flex-start; gap:1rem; }
  .about-page .tech-number{ font-size:1.5rem; }
  .about-page .tech-icon{ position:absolute; right:1.5rem; top:1.5rem; }
}


/* === Gallery spacing tweaks === */
.gallery-content .section-title{ margin-bottom:2.4rem; }
#galleryGrid{ margin-top:.4rem; }


/* === Skills & Resume sections === */
.skills, .resume{ padding:7rem 6%; }


/* === Enhanced Skills section === */
.skills{ padding:2rem 6%; }
.skills-grid{
  max-width:1100px; margin:0 auto;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.2rem;
}
.skill-card{
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
  border:1px solid var(--border); border-radius:14px; padding:1.4rem 1.2rem;
  transition:border-color .2s, transform .2s;
  display:flex; flex-direction:column; height:100%;
}
.skill-card:hover{ border-color:var(--gold); transform:translateY(-3px); }
.skill-title{ font-weight:600; letter-spacing:-.01em; margin-bottom:.6rem; }
.skill-pills{
  display:flex; flex-wrap:wrap; gap:.5rem;
  flex:1 0 auto; align-content:flex-start;
}
.skill-pill{
  padding:.4rem .7rem; border:1px solid var(--border); border-radius:999px;
  font-size:.82rem; color:var(--muted); background:rgba(255,255,255,.02);
}
.skill-meter{
  margin-top:.8rem; height:6px; border-radius:999px; background:rgba(255,255,255,.06); overflow:hidden;
}
.skill-meter > i{ display:block; height:100%; width:var(--w,60%); background:linear-gradient(90deg, var(--gold), var(--gold-2)); }

@media (max-width: 960px){ .skills-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width: 600px){ .skills-grid{ grid-template-columns:1fr; } }

/* === Resume section === */
.resume{ padding:5rem 6%; }
.resume-grid{
  max-width:1100px; margin:0 auto;
  display:grid; grid-template-columns:2fr 1fr; gap:1.8rem;
  align-items:start;
}
.resume-main{ position:relative; }
.resume-timeline{
  position:relative; padding-left:3.5rem;
  display:flex; flex-direction:column; gap:1.4rem;
}
/* Glowing vertical line */
.resume-timeline::before{
  content:""; position:absolute; left:1.1rem; top:0; bottom:0;
  width:2px;
  background:linear-gradient(180deg, var(--gold) 0%, rgba(224,197,137,.4) 50%, rgba(224,197,137,.1) 100%);
  border-radius:999px;
}
/* Timeline item with stagger animation */
.timeline-item{ 
  position:relative;
  animation:timelineFadeIn .5s ease backwards;
  animation-delay:calc(var(--i, 0) * .1s);
}
@keyframes timelineFadeIn{
  from{ opacity:0; transform:translateX(-20px); }
  to{ opacity:1; transform:translateX(0); }
}
/* Timeline marker (left column) */
.timeline-marker{
  position:absolute; left:-3.5rem; top:1.3rem;
  display:flex; flex-direction:column; align-items:center; gap:.4rem;
  width:2.8rem;
}
.timeline-dot-glow{
  width:14px; height:14px; border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 12px 3px rgba(224,197,137,.35), 0 0 0 4px rgba(224,197,137,.12);
  animation:dotPulse 2.5s ease-in-out infinite;
}
@keyframes dotPulse{
  0%, 100%{ box-shadow:0 0 12px 3px rgba(224,197,137,.35), 0 0 0 4px rgba(224,197,137,.12); }
  50%{ box-shadow:0 0 18px 5px rgba(224,197,137,.5), 0 0 0 6px rgba(224,197,137,.18); }
}
.timeline-index{
  font-size:.7rem; font-weight:700; letter-spacing:.1em;
  color:var(--gold); opacity:.7;
}
/* Card styling */
.timeline-card{
  background:linear-gradient(135deg, rgba(255,255,255,.025) 0%, rgba(255,255,255,.01) 100%);
  border:1px solid var(--border);
  border-radius:14px; padding:1.4rem 1.6rem;
  transition:all .3s ease;
  position:relative;
  overflow:hidden;
}
.timeline-card::before{
  content:""; position:absolute; top:0; left:0;
  width:3px; height:100%;
  background:linear-gradient(180deg, var(--gold) 0%, transparent 100%);
  opacity:0; transition:opacity .3s ease;
}
.timeline-card:hover{
  border-color:rgba(224,197,137,.45);
  transform:translateX(6px);
  box-shadow:0 8px 32px rgba(0,0,0,.25), 0 0 0 1px rgba(224,197,137,.1);
}
.timeline-card:hover::before{ opacity:1; }
/* Header section */
.timeline-header{
  margin-bottom:.9rem;
}
.timeline-badge{
  display:inline-block;
  font-size:.65rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  padding:.3rem .7rem; border-radius:20px;
  margin-bottom:.6rem;
}
.timeline-badge.current{
  background:linear-gradient(135deg, rgba(76,175,80,.2) 0%, rgba(76,175,80,.08) 100%);
  color:#81c784; border:1px solid rgba(76,175,80,.3);
}
.timeline-badge.freelance{
  background:linear-gradient(135deg, rgba(224,197,137,.15) 0%, rgba(224,197,137,.05) 100%);
  color:var(--gold); border:1px solid rgba(224,197,137,.25);
}
.timeline-role{
  margin:0 0 .3rem; font-size:1.1rem; font-weight:600; letter-spacing:-.01em;
  color:var(--text);
}
.timeline-company{
  display:block;
  font-size:1rem; font-weight:500;
  color:var(--gold);
  font-family:'Playfair Display', serif;
  font-style:italic;
}
/* Meta info */
.timeline-meta{
  display:flex; flex-wrap:wrap; gap:.6rem 1.2rem; align-items:center;
  color:var(--muted-2); font-size:.82rem; margin-bottom:1rem;
  padding-bottom:1rem; border-bottom:1px solid rgba(255,255,255,.05);
}
.timeline-meta i{
  font-size:.75rem; margin-right:.35rem; opacity:.7;
}
.timeline-period, .timeline-location{
  display:flex; align-items:center;
}
/* Points list */
.timeline-points{
  margin:0; padding-left:0; list-style:none;
  display:grid; gap:.5rem; color:var(--muted); font-size:.9rem; line-height:1.65;
}
.timeline-points li{
  position:relative; padding-left:1.2rem;
}
.timeline-points li::before{
  content:""; position:absolute; left:0; top:.55rem;
  width:5px; height:5px; border-radius:50%;
  background:rgba(224,197,137,.5);
}
.resume-side{ display:flex; flex-direction:column; gap:1.2rem; }
.resume-stats-card{
  display:grid; gap:.75rem; padding:1.3rem;
  border-radius:12px; border:1px solid var(--border);
  background:rgba(255,255,255,.02);
}
.resume-stats-card .stat{
  display:flex; align-items:center; justify-content:space-between;
  gap:.6rem; padding:.7rem .85rem;
  border:1px solid rgba(255,255,255,.08); border-radius:10px;
}
.stat .num{ font-size:1.3rem; font-weight:700; color:var(--text); }
.stat .label{ color:var(--muted-2); font-size:.86rem; text-transform:uppercase; letter-spacing:.12em; }
.resume-cta{
  display:flex; align-items:center; justify-content:center;
  gap:.7rem; padding:1rem; border-radius:12px;
  text-decoration:none; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; background:linear-gradient(180deg,var(--gold),var(--gold-2));
  color:#17130c; border:1px solid rgba(0,0,0,.45);
  transition:transform .2s ease, filter .2s ease;
}
.resume-cta:hover{ filter:saturate(110%); transform:translateY(-1px); }

@media (max-width:1024px){
  .resume-grid{ grid-template-columns:1fr; }
  .resume-side{ flex-direction:row; flex-wrap:wrap; }
  .resume-stats-card, .resume-cta{ flex:1 1 260px; }
}

@media (max-width:680px){
  .resume{ padding:4rem 6%; }
  .resume-timeline{ padding-left:2.8rem; }
  .resume-timeline::before{ left:.85rem; }
  .timeline-marker{ left:-2.8rem; width:2rem; }
  .timeline-dot-glow{ width:10px; height:10px; }
  .timeline-index{ font-size:.6rem; }
  .timeline-card{ padding:1.15rem 1.2rem; }
  .timeline-card:hover{ transform:translateX(3px); }
  .timeline-role{ font-size:1rem; }
  .timeline-company{ font-size:.9rem; }
  .timeline-meta{ gap:.4rem .8rem; font-size:.78rem; }
  .timeline-points{ font-size:.85rem; }
  .resume-side{ flex-direction:column; }
}


/* === Align Skills/Resume width to Selected Work (1200px) === */
.skills-grid{ max-width:1200px !important; }
.resume-grid{ max-width:1200px !important; }

/* === About full-bleed background, clean spacing === */
.about{ padding:7rem 0 !important; background:rgba(255,255,255,.01) !important; margin-top:3rem !important; width:100% !important; }
.about > *{ padding:0 6%; }
.about .section-title{ margin-bottom:1.2rem; }
.about-content{ max-width:880px; margin:0 auto; text-align:center; }
.about-content p{ color:var(--muted); font-size:1.05rem; line-height:1.85; }
.about-content strong{ color:var(--gold); font-weight:600; }

/* === Place CTA section clearly below About === */
.contact{ background:transparent; margin-top:2.5rem; }


/* === Align section titles to 1200px container (like Selected Work) === */
.skills .section-title,
.resume .section-title,
.about .section-title{
  max-width:1200px; margin:0 auto 1.4rem; padding:0;
}

/* === Ensure About's inner content is centered and full-bleed bg stays === */
.about{ border-top:none !important; border-bottom:none !important; }
.about-content{ max-width:880px !important; margin:0 auto !important; text-align:center; }
.about > *{ padding:0 6%; } /* keep side alignment consistent */

/* === Give more room before the Contact (Let's Work Together) block === */
.contact{ margin-top:4rem !important; }

/* === Keep headings weight/size consistent with top of site (no change to palette) === */
.skills .section-title, .resume .section-title{ letter-spacing:-.02em; }

/* === Optional micro-tidy: consistent bottom space after grids === */
.skills{ padding-bottom:4rem; }
.resume{ padding-bottom:6rem; }


/* === Stronger separation between About and Let's Work Together === */
.about{ padding-bottom: 6rem !important; }
.contact{ margin-top: 6rem !important; }


/* === Separate About background from Contact === */
.about{ background:rgba(255,255,255,.01) !important; padding:7rem 0 !important; margin:0 !important; border:none !important; }
.about::after{ content:none !important; } /* kill any decorative bottom line if present */
.about > *{ padding:0; }  /* full-width content */
.about-content{ max-width: none !important; }

/* Contact: NO background; stands on base page bg */
.contact{ background:transparent !important; padding:7rem 6% !important; margin-top:6rem !important; border:none !important; }

/* Give breathing room before the footer line so it doesn't sit under the CTA buttons */
.contact + footer{ margin-top:2.5rem !important; }

/* Optional safety: ensure footer line is subtle */
footer{ border-top:1px solid var(--border) !important; }


/* === Force Contact to base background (no About tint) === */
.contact{ background: var(--bg) !important; padding:7rem 6% !important; margin-top:6rem !important; }

/* === Footer spacing so © sits comfortably below the top border line === */
footer{ padding-top: 1.4rem !important; margin-top: 1.2rem !important; background: var(--bg) !important; }


/* === Full-width background video for hero === */
.hero-index{ position:relative; overflow:hidden; }
/* Decorative gradient fade at bottom */
.hero-index::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:300px;
  background:linear-gradient(to bottom, rgba(10,10,10,0) 0%, var(--bg) 100%);
  z-index:1;
  pointer-events:none;
}
.hero-video-bg-index{ position:absolute; inset:0; z-index:0; }
.hero-video-bg-index video{ width:100%; height:100%; object-fit:cover; display:block; filter:saturate(95%); }
.hero-content{ position:relative; z-index:2; }
.hero-bg{ position:absolute; inset:0; z-index:1; opacity:.55; }


/* === Fix: blur only inside the centered pill, not the full header === */
header{
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.nav-pill{
  backdrop-filter: saturate(120%) blur(10px) !important;
  -webkit-backdrop-filter: saturate(120%) blur(10px) !important;
  background:
    linear-gradient(135deg, #c9a87522, #0000), /* stronger gold tint */
    rgba(20,17,14,.60) !important;           /* lighter, warmer base */
  border: 1px solid var(--border) !important; /* neutral border */
  box-shadow: 0 8px 22px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.03) !important; /* slightly softer */
  padding: 1rem 1.5rem !important;
}
.nav-pill a {
  font-size: .9rem !important;
  padding: .5rem 1rem !important;
  position: relative !important;
}
.nav-pill a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--gold-tint); /* subtler, tinted underline */
  transition: width .3s ease, left .3s ease;
}
.nav-pill a:hover::after {
  width: 100%;
  left: 0;
}


/* === Image thumbnails for cards & gallery === */
.card-image img, .gallery-thumb img, .similar-image img, .breakdown-image img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.modal-main-image{ padding:0; overflow:hidden; }

/* Subtle golden tone on Selected Work thumbnails only */
.portfolio #portfolioGrid .card-image{ position:relative; overflow:hidden; border-radius:inherit; }
.portfolio #portfolioGrid .card-image img{
  filter: sepia(0%) hue-rotate(0deg) saturate(100%) brightness(1) contrast(1);
  transition: filter .25s ease;
}
/* Warm gold blend overlay to ensure visible, brand-consistent tint */
.portfolio #portfolioGrid .card-image::after{ content:""; position:absolute; inset:0; border-radius:inherit;
  background: linear-gradient(180deg, rgba(201,168,117,.14), rgba(201,168,117,.10));
  mix-blend-mode: soft-light; pointer-events:none; opacity:1; transition: opacity .25s ease; }

/* On hover: return to normal colors (remove filter and overlay) */
.portfolio #portfolioGrid .card:hover .card-image img{ filter:none; }
.portfolio #portfolioGrid .card:hover .card-image::after{ opacity:0; }
.gallery-thumb img, .gallery-thumb video{ width:100%; height:100%; object-fit:cover; display:block; }

/* Homepage featured reel wrapper */
.featured-reel-home{
  display:none;
  width:100%;
  margin:4rem auto 0;
  max-width:1800px;
}
.featured-reel-home.active{
  display:block;
}
.featured-reel-header{
  max-width:1200px;
  margin:0 auto 3rem;
}
.featured-reel-card-wrapper{
  width:100%;
  margin:0 auto;
  max-width:1800px;
}
@media (max-width: 1700px){
  .featured-reel-card-wrapper{
    max-width:1200px;
  }
}
@media (max-width: 900px){
  .featured-reel-header{
    margin-bottom:2rem;
  }
  .portfolio-header.featured-reel-header{
    flex-direction:column;
    align-items:flex-start;
    gap:1rem;
  }
  .featured-reel-card-wrapper{
    padding:0 1.2rem;
  }
}
.featured-reel-card-wrapper .reel-card{
  width:100%;
  cursor:pointer;
}



/* ======================================
 * Styles from articles.html [block #1]
 ====================================== */




    /* Hero with subtle video bg for consistency */
    .hero{ position:relative; overflow:hidden; min-height:48vh; display:flex; align-items:center; justify-content:center; padding:6.8rem 6% 3rem; text-align:center }
   /* Decorative gradient fade at bottom */
    .hero::after{
      content:"";
      position:absolute;
      left:0; right:0; bottom:0;
      height:300px;
      background:linear-gradient(to bottom, rgba(10,10,10,0) 0%, var(--bg) 100%);
      z-index:1;
      pointer-events:none;
    }
    .hero-video-bg{ position:absolute; inset:0; z-index:0; }
    .hero-video-bg video{ width:100%; height:100%; object-fit:cover; filter:saturate(95%) }
    .hero-bg{ position:absolute; inset:0; z-index:1; opacity:.55; background:
      radial-gradient(900px 600px at 50% 10%, rgba(0,0,0,.6), transparent 65%); }
    .hero-content{ position:relative; z-index:2; max-width:980px }
    .hero h1{ font-weight:300; letter-spacing:-.02em; line-height:1.05; font-size: clamp(2.2rem, 6.2vw, 3.6rem) }
    .hero p{ margin:1rem auto 0; max-width:720px; color:var(--muted); font-size:1.02rem; letter-spacing:.02em; line-height:1.7 }

    /* Hero video loader (non-blocking) */
    .hero-video-loader{
      position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
      z-index:1; pointer-events:none; background:var(--bg);
      opacity:0; transition:opacity .35s ease;
    }
    .hero-video-loader.is-visible{ opacity:1; }
    .hero-video-loader__inner{ display:flex; flex-direction:column; gap:.75rem; align-items:center; transform:translateY(-100px); }
    .hero-video-loader__label{ font-size:.85rem; color:var(--muted); letter-spacing:.12em; text-transform:uppercase; }
    .hero-video-loader__bar{
      width:min(48vw, 420px); height:6px; border-radius:999px; overflow:hidden;
      background:rgba(255,255,255,.08); box-shadow:0 0 0 1px rgba(255,255,255,.04) inset;
    }
    .hero-video-loader__fill{
      display:block; height:100%; width:0%; border-radius:inherit;
      background:linear-gradient(90deg, rgba(255,255,255,.2), var(--gold), rgba(255,255,255,.5));
      transition:width .2s ease;
    }
    .hero-video-loader__fill.is-indeterminate{
      width:35%; animation:heroLoaderSweep 1.2s ease-in-out infinite;
    }
    .hero-video-loading video{ opacity:0; transition:opacity .35s ease; }
    .hero-video-ready video{ opacity:1; }

    @keyframes heroLoaderSweep{
      0%{ transform:translateX(-120%); }
      100%{ transform:translateX(320%); }
    }

/* === Labs page === */
.labs-page .labs-intro{ padding:3rem 6% 1rem; }
.labs-page .labs-intro-inner{
  max-width:1200px;
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);
  gap:2rem;
  align-items:start;
}
.labs-page .labs-blurb{
  border:1px solid var(--border);
  border-radius:18px;
  padding:2rem;
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
  box-shadow:var(--shadow);
}
.labs-page .labs-kicker{
  text-transform:uppercase;
  letter-spacing:.2em;
  font-size:.7rem;
  color:var(--muted-2);
}
.labs-page .labs-blurb h2{
  margin:.6rem 0 1rem;
  font-size:clamp(1.8rem, 3.4vw, 2.6rem);
  font-weight:300;
  letter-spacing:-.02em;
}
.labs-page .labs-blurb p{
  color:var(--muted);
  line-height:1.8;
}
.labs-page .labs-cta-row{
  display:flex;
  flex-wrap:wrap;
  gap:.8rem;
  margin-top:1.4rem;
}
.labs-page .labs-cta{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  padding:.8rem 1.4rem;
  border-radius:999px;
  border:1px solid var(--border-strong);
  text-decoration:none;
  color:var(--text);
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.14em;
  background:rgba(255,255,255,.02);
  transition:all .2s ease;
}
.labs-page .labs-cta.primary{
  background:linear-gradient(180deg,var(--gold),var(--gold-2));
  color:#17130c;
  border-color:rgba(0,0,0,.4);
}
.labs-page .labs-cta:hover{ transform:translateY(-2px); border-color:var(--gold); }
.labs-page .labs-stats{
  display:grid;
  gap:1rem;
}
.labs-page .labs-stat{
  border:1px solid var(--border);
  border-radius:16px;
  padding:1.4rem 1.6rem;
  background:rgba(255,255,255,.02);
  text-align:left;
}
.labs-page .labs-stat strong{
  display:block;
  font-size:1.6rem;
  color:var(--gold);
  letter-spacing:-.02em;
}
.labs-page .labs-stat span{ color:var(--muted-2); font-size:.9rem; }

.labs-page .labs-section{ padding:2.5rem 6% 4rem; }
.labs-page .labs-section-header{
  max-width:1200px;
  margin:0 auto 1.6rem;
  display:flex;
  flex-direction:column;
  gap:.8rem;
}
.labs-page .labs-tags{ display:flex; flex-wrap:wrap; gap:.5rem; }
.labs-page .labs-tag{
  padding:.35rem .7rem;
  border-radius:999px;
  border:1px solid var(--border);
  color:var(--muted);
  font-size:.78rem;
  background:rgba(255,255,255,.02);
}
.labs-page .labs-feature{
  max-width:1200px;
  margin:0 auto 2rem;
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:1.6rem;
  align-items:stretch;
  border:1px solid var(--border);
  border-radius:20px;
  overflow:hidden;
  background:rgba(255,255,255,.02);
  box-shadow:var(--shadow);
  transition:border-color .2s ease, transform .2s ease;
}
.labs-page .labs-feature:hover{
  border-color:var(--gold);
  transform:translateY(-3px);
}
.layout-labs .labs-feature{
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:1.6rem;
  align-items:stretch;
  border:1px solid var(--border);
  border-radius:20px;
  overflow:hidden;
  background:rgba(255,255,255,.02);
  box-shadow:var(--shadow);
}
.layout-labs .labs-feature:hover{
  border-color:var(--gold);
  transform:translateY(-3px);
}
.labs-page .labs-feature-media{ min-height:260px; background:#0c0c0c; }
.labs-page .labs-feature-media img{
  width:100%; height:100%; object-fit:cover; display:block; filter:saturate(.9);
}
.layout-labs .labs-feature-media{ min-height:260px; background:#0c0c0c; }
.layout-labs .labs-feature-media img{
  width:100%; height:100%; object-fit:cover; display:block; filter:saturate(.9);
}
.labs-page .labs-feature-body{ padding:1.8rem; }
.layout-labs .labs-feature-body{ padding:1.8rem; }
.labs-page .labs-meta{
  display:flex; flex-wrap:wrap; gap:.6rem;
  color:var(--muted-2);
  font-size:.78rem; text-transform:uppercase; letter-spacing:.12em;
}
.layout-labs .labs-meta{
  display:flex; flex-wrap:wrap; gap:.6rem;
  color:var(--muted-2);
  font-size:.78rem; text-transform:uppercase; letter-spacing:.12em;
}
.labs-page .labs-pill{
  padding:.28rem .6rem;
  border-radius:999px;
  border:1px solid var(--border);
  color:var(--text);
  background:rgba(255,255,255,.04);
}
.layout-labs .labs-pill{
  padding:.28rem .6rem;
  border-radius:999px;
  border:1px solid var(--border);
  color:var(--text);
  background:rgba(255,255,255,.04);
}
.labs-page .labs-feature-body h3{ margin:.8rem 0 .6rem; font-size:1.25rem; }
.labs-page .labs-feature-body p{ color:var(--muted); line-height:1.8; }
.labs-page .labs-link{ color:var(--text); text-decoration:none; font-size:.9rem; }
.labs-page .labs-link:hover{ color:var(--gold); }
.layout-labs .labs-feature-body h3{ margin:.8rem 0 .6rem; font-size:1.25rem; }
.layout-labs .labs-feature-body p{ color:var(--muted); line-height:1.8; }
.layout-labs .labs-link{ color:var(--text); text-decoration:none; font-size:.9rem; }
.layout-labs .labs-link:hover{ color:var(--gold); }

.labs-page .labs-grid{
  max-width:1200px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:1.2rem;
}
.labs-page .labs-card{
  border:1px solid var(--border);
  border-radius:16px;
  padding:1.4rem;
  background:rgba(255,255,255,.02);
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
  gap:.7rem;
  transition:border-color .2s ease, transform .2s ease;
}
.labs-page .labs-card:hover{
  border-color:var(--gold);
  transform:translateY(-3px);
}
.layout-labs .labs-card{
  border:1px solid var(--border);
  border-radius:16px;
  padding:1.4rem;
  background:rgba(255,255,255,.02);
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
  gap:.7rem;
}
.layout-labs .labs-card:hover{
  border-color:var(--gold);
  transform:translateY(-3px);
}
.labs-page .labs-card-media{
  width:100%;
  height:160px;
  border-radius:12px;
  overflow:hidden;
  border:1px solid var(--border);
  background:rgba(255,255,255,.03);
}
.layout-labs .labs-card-media{
  width:100%;
  height:160px;
  border-radius:12px;
  overflow:hidden;
  border:1px solid var(--border);
  background:rgba(255,255,255,.03);
}
.labs-page .labs-card-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.layout-labs .labs-card-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.labs-page .labs-card-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.8rem;
  color:var(--muted-2);
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.12em;
}
.layout-labs .labs-card-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.8rem;
  color:var(--muted-2);
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.12em;
}
.labs-page .labs-status{ color:var(--gold); }
.labs-page .labs-card h3{ font-size:1.05rem; letter-spacing:-.01em; }
.labs-page .labs-card p{ color:var(--muted); line-height:1.7; }
.labs-page .labs-card .labs-meta{ margin-top:auto; font-size:.78rem; text-transform:none; letter-spacing:.04em; }
.layout-labs .labs-status{ color:var(--gold); }
.layout-labs .labs-card h3{ font-size:1.05rem; letter-spacing:-.01em; }
.layout-labs .labs-card p{ color:var(--muted); line-height:1.7; }
.layout-labs .labs-card .labs-meta{ margin-top:auto; font-size:.78rem; text-transform:none; letter-spacing:.04em; }

.labs-page .labs-footer .labs-section-header{ margin-bottom:1rem; }
.labs-page .labs-note{ color:var(--muted); max-width:720px; }
.labs-page .labs-callout{
  max-width:1200px;
  margin:0 auto;
  padding:1.8rem 2rem;
  border:1px solid var(--border);
  border-radius:18px;
  background:linear-gradient(135deg, rgba(201,168,117,.08), rgba(255,255,255,.02));
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1.5rem;
}
.labs-page .labs-callout h3{ margin:0 0 .4rem; }
.labs-page .labs-callout p{ margin:0; color:var(--muted); }

@media (max-width: 1024px){
  .labs-page .labs-intro-inner{ grid-template-columns:1fr; }
  .labs-page .labs-feature{ grid-template-columns:1fr; }
  .labs-page .labs-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .labs-page .labs-callout{ flex-direction:column; align-items:flex-start; }
}
@media (max-width: 640px){
  .labs-page .labs-grid{ grid-template-columns:1fr; }
  .labs-page .labs-section{ padding:2rem 6% 3rem; }
}

    /* Toolbar: search + filters */
    .toolbar{ padding:2rem 6% 0; }
    .toolbar-inner{ max-width:1200px; margin:0 auto; display:flex; gap:.8rem; flex-wrap:wrap; align-items:center; justify-content:space-between }
    .search{ flex:1 1 360px; display:flex; align-items:center; gap:.6rem; background:rgba(255,255,255,.02); border:1px solid var(--border); border-radius:12px; padding:.7rem .9rem }
    .search input{ flex:1; background:transparent; border:none; color:var(--text); outline:none; font-size:1rem }
  .chips{ display:flex; flex-wrap:wrap; gap:.5rem }
  .chip{ display:inline-flex; align-items:center; gap:.35rem; padding:.5rem .8rem; border:1px solid var(--border); border-radius:999px; color:var(--muted); font-size:.86rem; cursor:pointer; user-select:none; }
  .chip.active, .chip:hover{ border-color:var(--gold); color:var(--text); background:rgba(201,168,117,.06) }
  .chip-count{ font-size:.72rem; color:var(--muted-2); margin-left:.2rem; }
  .chip-dropdown{ position:relative; display:inline-flex; }
  .chip-dropdown-summary{ list-style:none; display:inline-flex; align-items:center; gap:.35rem; padding:.5rem .8rem; border:1px solid var(--border); border-radius:999px; color:var(--muted); font-size:.86rem; cursor:pointer; user-select:none; background:rgba(255,255,255,.01); }
  .chip-dropdown-summary:hover{ border-color:var(--gold); color:var(--text); background:rgba(201,168,117,.06); }
  .chip-dropdown-summary::-webkit-details-marker{ display:none; }
  .chip-dropdown[open] .chip-dropdown-summary,
  .chip-dropdown-summary.active{ border-color:var(--gold); color:var(--text); background:rgba(201,168,117,.06); }
  .chip-dropdown-menu{ position:absolute; top:calc(100% + .45rem); left:0; background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:.6rem; display:none; flex-direction:column; gap:.4rem; min-width:190px; box-shadow:0 12px 28px rgba(0,0,0,.28); z-index:2500; }
  .chip-dropdown[open] .chip-dropdown-menu{ display:flex; }
  .chip-dropdown-menu .chip{ width:100%; justify-content:space-between; }
  .empty-state{ padding:2.4rem 1.6rem; border:1px dashed var(--border); border-radius:12px; text-align:center; color:var(--muted-2); background:rgba(255,255,255,.02); font-size:.95rem; }

    /* Articles grid */
    .articles{ padding:2rem 6% 6rem }
    .articles-header{ max-width:1200px; margin:0 auto 1rem; display:flex; align-items:center; justify-content:space-between }
    .articles-grid{ max-width:1200px; margin:0 auto; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.2rem }
    .post{ background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)); border:1px solid var(--border); border-radius:14px; overflow:hidden; transition:border-color .15s ease, transform .15s ease; display:flex; flex-direction:column; min-height:320px; will-change: border-color, transform; backface-visibility: hidden; }
    .post{ box-shadow:var(--shadow); }
    .post:hover{ border-color:var(--gold); transform:translateY(-3px) }
    /* Enhanced golden border for code posts */
    #articles .post:hover{ border-color:var(--gold); transform:translateY(-3px) }
    .cover img{ width:100%; height:100%; object-fit:cover; display:block; transition:opacity .3s ease; }
    .cover img[loading="lazy"]{ opacity:0; }
    .cover img[loading="lazy"]:not([data-loaded]){ opacity:0; }
    .cover img[data-loaded]{ opacity:1; }
    .cover{ aspect-ratio: 16 / 9; background:#111; display:block; }
    .cover img{ width:100%; height:100%; object-fit:cover; display:block }
    .meta{ display:flex; flex-wrap:wrap; gap:.6rem; padding:1rem 1.1rem 0; color:var(--muted-2); font-size:.82rem; text-transform:uppercase; letter-spacing:.12em }
    .post h3{ padding:.4rem 1.1rem .2rem; font-size:1.1rem; letter-spacing:-.01em }
    .excerpt{ padding:0 1.1rem 1.1rem; color:var(--muted); line-height:1.65; font-size:.98rem; flex:1; }
    .tags{ padding:1.1rem 1.1rem 1.1rem; display:flex; gap:.4rem; flex-wrap:wrap; margin-top:auto; }
    .tag{ border:1px solid var(--border); border-radius:999px; font-size:.76rem; padding:.28rem .6rem; color:var(--muted) }
    @media (max-width:980px){ .articles-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
    @media (max-width:640px){ .articles-grid{ grid-template-columns:1fr; } }

    /* Post modal (quick view) */
    .modal{ display:none; position:fixed; inset:0; z-index:1300; background:rgba(5,5,5,.98); overflow-y:auto }
    .modal.active{ display:block }
    .modal-content{ max-width:1000px; margin:3rem auto; padding:2rem 6%; position:relative }
    .close-modal{ position:absolute; top:-10x; right:-100px; width:46px; height:46px; display:flex; align-items:center; justify-content:center; font-size:1.6rem; color:var(--muted-2); cursor:pointer; background:rgba(255,255,255,.03); border:1px solid var(--border); transition:all .25s; z-index:1001; border-radius:10px }
    .close-modal:hover{ color:var(--text); border-color:var(--gold); transform:rotate(90deg) }
    #galleryModal .close-modal{ right:0 }
    .modal-title{ font-size: clamp(1.8rem,4.6vw,2.4rem); font-weight:300; letter-spacing:-.02em; margin-bottom:.6rem }
    .modal-meta{ color:var(--muted-2); text-transform:uppercase; letter-spacing:.14em; font-size:.82rem; display:flex; align-items:center }
    .share-btn{ position:absolute; top:0; right:0; margin-left:0; padding:.5rem 1rem; border:1px solid var(--border); border-radius:8px; background:rgba(255,255,255,.02); color:var(--muted); cursor:pointer; transition:all .2s; display:flex; align-items:center; gap:.5rem }
    .share-btn:hover{ border-color:var(--gold); color:var(--text); background:rgba(201,168,117,.06) }
    .modal-cover{ width:100%; aspect-ratio:16/9; margin:0 0 1.2rem; border:1px solid var(--border); border-radius:12px; overflow:hidden; position:relative }
    .modal-cover img{ width:100%; height:100%; object-fit:cover; display:block }
    .modal-body{ background:rgba(255,255,255,.02); padding:1.6rem; border:1px solid var(--border); border-radius:12px; color:var(--muted); line-height:1.8 }


/* === Wide article modal & long-form typography === */
.modal-content{ max-width:1280px !important; }
.modal-body{
  color:var(--text); background:rgba(25, 25, 25, 0.02);
  padding:2rem; border:1px solid var(--border); border-radius:12px;
  line-height:1.85; font-size:1.05rem;
}
.modal-body h2,.modal-body h3,.modal-body h4{ letter-spacing:-.01em; margin:1.4rem 0 .6rem; font-weight:600; }
.modal-body h2{ font-size:1.6rem; }
.modal-body h3{ font-size:1.3rem; }
.modal-body p{ color:var(--muted); margin:.8rem 0; }
.modal-body ul, .modal-body ol{ margin:.6rem 0 .8rem 1.4rem; }
.modal-body li{ margin:.25rem 0; }
.modal-body a{ color:var(--gold); text-decoration:none; transition:color .2s; }
.modal-body a:hover{ color:var(--gold-2); text-decoration:underline; }

/* Contact Form */
#contactModal .modal-content { max-width: 800px !important; padding: 2rem !important; margin: 3rem auto !important; position: relative !important; }
.modal-title { font-size: clamp(1.8rem,4.6vw,2.4rem); font-weight:300; letter-spacing:-.02em; margin-bottom:.6rem; text-align: center; }
.modal-body { background: rgba(255,255,255,.02); padding:2rem; border:1px solid var(--border); border-radius:12px; }
.contact-form-container { display: flex; flex-direction: column; gap: 1.5rem; align-items: center; }
.profile-pic { width: 250px; height: 250px; border-radius: 50%; object-fit: cover; border: 2px solid var(--border); }
.contact-modal-content form { display: flex; flex-direction: column; gap: 1.5rem; width: 100%; }
.contact-modal-content input, .contact-modal-content textarea { padding: 1rem; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); color: var(--text); font-family: inherit; transition: border-color 0.2s; }
.contact-modal-content input:focus, .contact-modal-content textarea:focus { outline: none; border-color: var(--gold); }
.contact-modal-content textarea { resize: vertical; min-height: 140px; transition: all 0.2s ease; }
.contact-modal-content textarea::-webkit-resizer { background: linear-gradient(135deg, var(--gold) 0%, var(--gold-2) 100%); border-radius: 2px; box-shadow: 0 0 4px rgba(201,168,117,.3); }
.contact-modal-content textarea::-moz-resizer { background: var(--gold); border-radius: 2px; }
.contact-modal-content button[type="submit"] { padding: 0.75rem 1.5rem; background: linear-gradient(180deg, var(--gold), var(--gold-2)); color: #17130c; border: 1px solid rgba(0,0,0,.4); border-radius: 8px; cursor: pointer; font-weight: 600; transition: transform 0.2s; align-self: flex-start; }
.contact-modal-content button[type="submit"]:hover { transform: translateY(-1px); }
.modal-body blockquote{
  margin:1rem 0; padding:1rem 1.2rem; border-left:3px solid var(--gold);
  background:rgba(201,168,117,.06); color:var(--text); border-radius:8px;
}
.modal-body pre{ background:#0b0b0b; border:1px solid var(--border); border-radius:10px; padding:1rem; overflow:auto; }
.modal-body code{ font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; font-size:.95rem; }

/* Tags styling */
.tags-section { margin-top: 1.5rem; }
.tags-section h4 { font-size: 1rem; font-weight: 600; margin-bottom: 0.5rem; color: var(--text); }
.tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tag { padding: 0.25rem 0.75rem; border-radius: 20px; font-size: 0.85rem; font-weight: 500; }
.tag.category-tag { background: var(--panel); border: 1px solid var(--border); color: var(--muted); text-decoration: none; transition: all 0.2s ease; }
.tag.category-tag:hover { background: var(--gold); border-color: var(--gold); color: #000; }
.category-tag { background: rgba(201, 168, 117, 0.1); color: var(--gold); border: 1px solid rgba(201, 168, 117, 0.3); }
.topic-tag { background: rgba(100, 150, 255, 0.1); color: #6496ff; border: 1px solid rgba(100, 150, 255, 0.3); }
.modal-body figure{ margin:1rem 0; border:1px solid var(--border); border-radius:12px; overflow:hidden; background:#0c0c0c; }
.modal-body figure img{ display:block; width:100%; height:auto; }
.modal-body figcaption{ padding:.6rem .9rem; color:var(--muted-2); font-size:.9rem; background:rgba(255,255,255,.02); }
.modal-body table{ width:100%; border-collapse:separate; border-spacing:0; margin:1rem 0; }
.modal-body th, .modal-body td{ padding:.6rem .8rem; border-top:1px solid var(--border); border-left:1px solid var(--border); }
.modal-body th{ background:rgba(255,255,255,.03); text-align:left; }



.modal-body tr:last-child td{ border-bottom:1px solid var(--border); }
.modal-body tr td:last-child, .modal-body tr th:last-child{ border-right:1px solid var(--border); }
.modal-body .callout{
  display:flex; gap:.8rem; padding:1rem 1.2rem; border:1px solid var(--border); border-radius:12px;
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
}
.modal-body .callout strong{ color:var(--gold); }


/* Align article/code modal width with articles grid */
.modal-content{ max-width:1800px !important; }

/* ===== Code page modal (postModal) enhancements ===== */
#postModal .modal-body{
  /* Subtle frosted panel with a golden tint for code readability */
  background:
    
    rgba(19, 19, 18, 0.78);
  border:1px solid var(--gold-border);
  box-shadow:0 10px 28px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04);
}
#postModal .modal-body video,
#postModal .modal-body iframe{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  margin:1.2rem 0;
  border-radius:12px;
  border:1px solid var(--border);
  background:#000;
}
#postModal .modal-body iframe{ aspect-ratio:16 / 9; }
#postModal #pmCover{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  display:block;
  border-radius:12px;
  border:1px solid var(--border);
  background:#0b0b0b;
  margin:.8rem 0 1rem;
}
#postModal .modal-body pre{
  background:#0b0b0b; /* ensure strong contrast for code blocks */
  border-color:var(--border);
}

/* Stronger, clearer background for code blocks in Code modal */
#postModal .modal-body pre,
#postModal .modal-body pre[class*="language-"]{
  background:#0c0c0c !important;
  border:1px solid var(--gold-border) !important;
  border-radius:12px !important;
  padding:1rem 1.2rem !important;
  margin:1rem 0 !important;
  overflow:auto;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
#postModal .modal-body pre[class*="language-"]{ position:relative; }
#postModal .modal-body pre.line-numbers{ position:relative !important; padding-left:0.4rem !important; }
#postModal .modal-body pre.line-numbers > code{ display:block; position:relative; z-index:auto; }
#postModal .modal-body pre.line-numbers > code{ padding-left:2.2rem; }
#postModal .modal-body pre.line-numbers{ display:block !important; counter-reset: linenumber; }
#postModal .modal-body pre.line-numbers > code{ white-space: pre; word-wrap: normal; }
#postModal .modal-body pre[class*="language-"] code,
#postModal .modal-body pre code{
  background:transparent !important; /* avoid per-line bg */
}
/* Prism line numbers gutter styling */
#postModal .modal-body pre.line-numbers .line-numbers-rows{
  position:absolute; top:0; left:0; width:1.4rem; height:100%;
  border-right:1px solid var(--border);
  background:rgba(255,255,255,.03);
  z-index:3; pointer-events:none;
}
#postModal .modal-body pre.line-numbers .line-numbers-rows > span{ pointer-events:none; display:block; counter-increment:linenumber; }
#postModal .modal-body pre.line-numbers .line-numbers-rows > span:before{
  content:counter(linenumber);
  display:block; text-align:center; padding:0 .2rem; color:var(--muted-2);
}
#postModal .modal-body pre > code{
  background:transparent !important; /* avoid double background inside pre */
  color:var(--text);
}
/* Inline code chips inside the modal body */
#postModal .modal-body :not(pre) > code{
  background:rgba(255,255,255,.06);
  border:1px solid var(--border);
  border-radius:6px;
  padding:.15rem .4rem;
  color:var(--text);
}



/* ====================================
 * Styles from single.html [block #1]
 ==================================== */


    /* Hero (video bg, consistent with site) */
    .hero{ position:relative; overflow:hidden; min-height:44vh; display:flex; align-items:center; justify-content:center; padding:6.8rem 6% 3rem; text-align:center }
    .hero-video-bg{ position:absolute; inset:0; z-index:0; }
    .hero-video-bg video{ width:100%; height:100%; object-fit:cover; filter:saturate(95%) }
    .hero-bg{ position:absolute; inset:0; z-index:1; opacity:.55; background:
      radial-gradient(900px 600px at 50% 10%, rgba(0,0,0,.6), transparent 65%); }
    .hero-content{ position:relative; z-index:2; max-width:980px }
    .hero h1{ font-weight:300; letter-spacing:-.02em; line-height:1.05; font-size: clamp(2.2rem, 6.2vw, 3.2rem) }
    .hero p{ margin:1rem auto 0; max-width:720px; color:var(--muted); font-size:1.02rem; letter-spacing:.02em; line-height:1.7 }

    /* Article layout */
    .article-wrap{ padding:2rem 6% 6rem; }
    .article{ max-width:2200px; margin:0 auto; display:grid; grid-template-columns: 280px 1fr; gap:1.6rem; }
    .toc{ position:sticky; top:6.5rem; align-self:start; height:max-content; }
    .toc h4{ font-size:.92rem; text-transform:uppercase; letter-spacing:.14em; color:var(--muted-2); margin-bottom:.6rem }
  .toc a{ display:block; text-decoration:none; color:var(--muted); padding:.35rem 0; font-size:.95rem }
    .toc a:hover{ color:var(--text) }

    .prose{ background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)); border:1px solid var(--border);
            border-radius:14px; padding:2rem; }
    .prose h2,.prose h3,.prose h4{ letter-spacing:-.01em; margin:1.6rem 0 .6rem; font-weight:600; }
    .prose h2{ font-size:1.7rem; }
    .prose h3{ font-size:1.34rem; }
    .prose p{ color:var(--muted); margin:.9rem 0; line-height:1.9; font-size:1.06rem }
    .prose ul,.prose ol{ margin:.6rem 0 .8rem 1.4rem }
    .prose li{ margin:.25rem 0 }
    .prose blockquote{ margin:1rem 0; padding:1rem 1.2rem; border-left:3px solid var(--gold);
      background:rgba(201,168,117,.06); color:var(--text); border-radius:8px; }
    .prose pre{ background:#0b0b0b; border:1px solid var(--border); border-radius:10px; padding:1rem; overflow:auto }
    .prose code{ font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; font-size:.95rem }
    .prose figure{ margin:1rem 0; border:1px solid var(--border); border-radius:12px; overflow:hidden; background:#0c0c0c }
    .prose figure img{ width:100%; height:auto; display:block }
    .prose figcaption{ padding:.6rem .9rem; color:var(--muted-2); font-size:.9rem; background:rgba(255,255,255,.02) }
  .prose video,
  .prose iframe{ display:block; width:100%; max-width:100%; height:auto; margin:1.2rem 0; border-radius:12px; border:1px solid var(--border); background:#000; }
  .prose iframe{ aspect-ratio:16 / 9; }

    .meta-bar{ display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; color:var(--muted-2); font-size:.88rem; margin-bottom:1rem; text-transform:uppercase; letter-spacing:.12em }
    .tags{ display:flex; flex-wrap:wrap; gap:.4rem }
    .tag{ border:1px solid var(--border); border-radius:999px; font-size:.76rem; padding:.28rem .6rem; color:var(--muted) }

    /* Prev/Next */
    .pager{ max-width:2200px; margin:2rem auto 0; display:grid; grid-template-columns:1fr 1fr; gap:1rem; padding:0 6% }
    .pager a{ display:block; text-decoration:none; background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
      border:1px solid var(--border); border-radius:14px; padding:1rem 1.2rem; color:var(--muted); }
    .pager a:hover{ border-color:var(--gold); color:var(--text) }


/* ==================================
 * Styles from shop.html [block #1]
 ================================== */


    /* Hero (video bg for continuity) */
    .hero{ position:relative; overflow:hidden; min-height:44vh; display:flex; align-items:center; justify-content:center; padding:6.8rem 6% 3rem; text-align:center }
    .hero-video-bg{ position:absolute; inset:0; z-index:0; }
    .hero-video-bg video{ width:100%; height:100%; object-fit:cover; filter:saturate(95%) }
    .hero-bg{ position:absolute; inset:0; z-index:1; opacity:.55; background:
      radial-gradient(900px 600px at 50% 10%, rgba(0,0,0,.6), transparent 65%); }
    .hero-content{ position:relative; z-index:2; max-width:980px }
    .hero h1{ font-weight:300; letter-spacing:-.02em; line-height:1.05; font-size: clamp(2.2rem, 6.2vw, 3.2rem) }
    .hero p{ margin:1rem auto 0; max-width:720px; color:var(--muted); font-size:1.02rem; letter-spacing:.02em; line-height:1.7 }

    /* Toolbar (filters) */
    .toolbar{ padding:2rem 6% 0; }
    .toolbar-inner{ max-width:1200px; margin:0 auto; display:flex; gap:.8rem; flex-wrap:wrap; align-items:center; justify-content:space-between }
  .chips{ display:flex; flex-wrap:wrap; gap:.5rem }
  .chip{ display:inline-flex; align-items:center; gap:.35rem; padding:.5rem .8rem; border:1px solid var(--border); border-radius:999px; color:var(--muted); font-size:.86rem; cursor:pointer; user-select:none; }
  .chip.active, .chip:hover{ border-color:var(--gold); color:var(--text); background:rgba(201,168,117,.06) }

    /* Product grid */
    .shop{ padding:4rem 6%; }
    .shop-header{ max-width:1200px; margin:0 auto 1rem; display:flex; align-items:center; justify-content:space-between }
    .shop-grid{ max-width:1200px; margin:0 auto; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:1.2rem }
    .product{ background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)); border:1px solid var(--border); border-radius:14px; overflow:hidden; transition:border-color .25s, transform .25s; position:relative }
    .product{ box-shadow:var(--shadow); }
    .product:hover{ border-color:var(--gold); transform:translateY(-3px) }
    .thumb{ aspect-ratio: 16 / 10; background:#111; display:block; }
    .thumb img{ width:100%; height:100%; object-fit:cover; display:block }
  .p-meta{ display:flex; gap:.6rem; align-items:center; color:var(--muted-2); font-size:.82rem; padding:1rem 1.1rem 0; text-transform:uppercase; letter-spacing:.12em }
  .p-meta .meta-divider{ color:var(--muted-2); opacity:.7; }
    .p-title{ padding:.4rem 1.1rem .2rem; font-size:1.1rem; letter-spacing:-.01em }
    .p-desc{ padding:0 1.1rem 1.1rem; color:var(--muted); line-height:1.65; font-size:.98rem }
  .shop-grid .product .tags{ padding:0 1.1rem .9rem; margin-top:.4rem; gap:.35rem; }
    .price{ padding:.2rem 1.1rem 1.2rem; font-weight:700; color:var(--text) }
  .price.price-inline{ padding:0; margin:.35rem 0 .4rem; font-weight:700; color:var(--text) }
    @media (max-width:980px){ .shop-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
    @media (max-width:640px){ .shop-grid{ grid-template-columns:1fr; } }

    .articles{ padding:4rem 6%; }
    .articles-header{ max-width:1200px; margin:0 auto 1rem; display:flex; align-items:center; justify-content:space-between }
    .articles-grid{ max-width:1200px; margin:0 auto; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:1.2rem }
    .post{ background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)); border:1px solid var(--border); border-radius:14px; overflow:hidden; transition:border-color .15s ease, transform .15s ease; will-change: border-color, transform; backface-visibility: hidden; }
    .post:hover{ border-color:var(--gold); transform:translateY(-3px) }
    .cover{ aspect-ratio: 16 / 9; background:#111; display:block; }
    .cover img{ width:100%; height:100%; object-fit:cover; display:block }
    .meta{ display:flex; flex-wrap:wrap; gap:.6rem; padding:1rem 1.1rem 0; color:var(--muted-2); font-size:.82rem; text-transform:uppercase; letter-spacing:.12em }
    .post h3{ padding:.4rem 1.1rem .2rem; font-size:1.1rem; letter-spacing:-.01em }
    .excerpt{ padding:0 1.1rem 1.1rem; color:var(--muted); line-height:1.65; font-size:.98rem }
    @media (max-width:980px){ .articles-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
    @media (max-width:640px){ .articles-grid{ grid-template-columns:1fr; } }

    /* Product Modal */
    .modal{ display:none; position:fixed; inset:0; z-index:1300; background:rgba(5,5,5,.98); overflow-y:auto }
    .modal.active{ display:block }
    .modal-content{ max-width:1100px; margin:3rem auto; padding:2rem 6%; position:relative }
    .close-modal{ position:absolute; top:-5px; right:-100px; width:46px; height:46px; display:flex; align-items:center; justify-content:center; font-size:1.6rem; color:var(--muted-2); cursor:pointer; background:rgba(255,255,255,.03); border:1px solid var(--border); transition:all .25s; z-index:1001; border-radius:10px }
    .close-modal:hover{ color:var(--text); border-color:var(--gold); transform:rotate(90deg) }
  .product-hero{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.28fr); gap:1.4rem; align-items:stretch; }
  .product-hero .cover{ position:relative; border:1px solid var(--border); border-radius:12px; overflow:hidden; background:#101010; transition:height .42s ease; max-width:1040px; width:100%; margin:0; }
    .product-hero .cover::before{
      content:"";
      position:absolute;
      inset:0;
      border-radius:inherit;
      box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
      pointer-events:none;
    }
    .product-carousel-frame{
      position:relative;
      width:min(120%, 1040px);
      border-radius:inherit;
      overflow:hidden;
      background:#101010;
      aspect-ratio:var(--cover-aspect, 1.6);
      transition:aspect-ratio .42s ease, transform .42s ease;
      transform-origin:50% 0;
    }
    .product-carousel-frame .carousel-img{
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      object-fit:contain;
      object-position:center;
      opacity:0;
      transform:scale(.985);
      transition:opacity .32s ease, transform .32s ease;
      background:rgba(12,12,12,.86);
      visibility:hidden;
    }
    .product-carousel-frame .carousel-img.is-active{
      opacity:1;
      transform:scale(1);
      z-index:3;
      visibility:visible;
    }
    .product-carousel-frame .carousel-img.is-entering{
      z-index:4;
      visibility:visible;
    }
    .product-carousel-frame .carousel-img.is-exiting{
      opacity:0;
      transform:scale(1.015);
      z-index:2;
      visibility:visible;
    }
  .product-carousel-nav{ position:absolute; inset:0; display:flex; align-items:center; justify-content:space-between; pointer-events:none; padding:0 .4rem; z-index:6; }
    .product-carousel-nav button{
      pointer-events:auto; width:38px; height:38px; border-radius:50%; border:1px solid var(--border);
      background:rgba(12,12,12,.65); color:var(--text); display:grid; place-items:center; cursor:pointer; transition:all .2s;
      font-size:1.55rem; line-height:1;
    }
    .product-carousel-nav button:hover{ border-color:var(--gold); color:var(--gold); }
    .product-carousel-nav button:disabled{ opacity:.35; cursor:default; }
    .product-hero .cover.has-single .product-carousel-nav{ display:none; }
    .product-hero .cover::after{
      content:""; position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 0 0 1px rgba(255,255,255,.03);
    }
  .product-hero .info{ background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)); border:1px solid var(--border); border-radius:12px; padding:1.4rem; display:flex; flex-direction:column; gap:1rem }
  .product-hero h2{ font-weight:600; letter-spacing:-.01em; font-size:1.4rem }
  .product-summary{ color:var(--muted); line-height:1.7; font-size:.98rem }
    .row{ display:flex; align-items:center; gap:.6rem; margin:.6rem 0 }
    select, .qty{ background:#0b0b0b; border:1px solid var(--border); color:var(--text); border-radius:10px; padding:.5rem .6rem; font-size:.95rem }
    .qty{ width:80px; text-align:center }
    .badges{ display:flex; gap:.5rem; margin:.6rem 0 }
    .badge{ border:1px solid var(--border); border-radius:999px; padding:.3rem .6rem; font-size:.76rem; color:var(--muted-2) }
  .product-tags{ display:flex; flex-wrap:wrap; gap:.4rem; margin:.8rem 0 1rem; }
    .cta-row{ display:flex; gap:.6rem; flex-wrap:wrap; margin-top:1rem }
    .btn{
      display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
      text-decoration:none; padding:.8rem 1rem; border-radius:12px; border:1px solid var(--border);
      background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02)); color:var(--text); font-weight:700;
    }
    .btn:hover{ border-color:var(--gold); }
    .btn.primary{ background:linear-gradient(180deg,var(--gold),var(--gold-2)); color:#17130c; border-color:rgba(0,0,0,.45) }
    .btn.secondary{ background:rgba(255,255,255,.02); color:var(--text); border:1px solid var(--border) }
    .btn.secondary:hover{ border-color:var(--gold); color:var(--gold) }
    .btn.is-disabled{ opacity:.5; cursor:not-allowed; pointer-events:none }

/* License Options Container */
.license-options-container{ display:flex; flex-direction:column; gap:1rem; margin:1.2rem 0 }
.license-card{
  background:rgba(11,11,11,.5); border:1px solid var(--border); border-radius:12px; padding:1rem;
  display:flex; flex-direction:column; gap:.8rem; transition:border-color .2s
}
.license-card:hover{ border-color:rgba(224,197,137,.3) }
.license-card-header{ display:flex; justify-content:space-between; align-items:center; gap:1rem }
.license-card-title{ font-size:1.05rem; font-weight:600; margin:0 }
.license-card-price{ font-size:1.1rem; font-weight:700; color:var(--gold) }
.license-card[data-license-type="free"] .license-card-price{ color:#7bc67b }
.license-card-cta{ display:flex; align-items:center; gap:.75rem; flex-wrap:wrap }
.license-qty-wrapper{ display:flex; align-items:center; gap:.4rem }
.license-qty-wrapper label{ font-size:.9rem; color:var(--muted-2) }
.license-qty-wrapper .qty{ width:70px }
.license-total-price{ font-size:1.05rem; color:var(--gold); white-space:nowrap }
.license-card-note{ margin:0; color:var(--muted-2); font-size:.9rem; font-style:italic }
.license-support-section{
  margin-top:1.5rem; padding-top:1.5rem; border-top:1px solid var(--border);
  display:flex; flex-direction:column; align-items:center; gap:1rem; text-align:center
}
.license-support-message{ color:var(--muted-2); font-size:.95rem }
.license-support-message p{ margin:0 }
.license-support-section .btn{ min-width:180px }
@media (max-width:640px){
  .license-card-cta{ flex-direction:column; align-items:stretch }
  .license-card-cta .btn{ width:100% }
  .license-qty-wrapper{ justify-content:space-between; width:100% }
  .license-support-section .btn{ width:100%; min-width:0 }
}
.note{ color:var(--muted-2); font-size:.86rem; margin-top:.2rem }
.product-article{ margin-top:1.8rem; background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)); border:1px solid var(--border); border-radius:14px; padding:1.8rem; }
.product-article-inner{ max-width:860px; margin:0 auto; }
.product-article article{ color:var(--text); line-height:1.8; font-size:1.02rem; }
.product-article article h2,
.product-article article h3,
.product-article article h4{ font-family:'Playfair Display',serif; color:var(--gold); margin:2rem 0 1rem; line-height:1.2; }
.product-article article h2:first-child,
.product-article article h3:first-child,
.product-article article h4:first-child{ margin-top:0; }
.product-article article p{ margin:1rem 0; color:rgba(233,228,218,.9); }
.product-article article ul,
.product-article article ol{ margin:1rem 0 1rem 1.5rem; padding:0; color:rgba(233,228,218,.9); }
.product-article article li{ margin:.4rem 0; }
.product-article article a{ color:var(--gold); }
.product-article article img,
.product-article article video,
.product-article article iframe{ display:block; width:100%; max-width:100%; height:auto; border-radius:12px; margin:1.2rem 0; border:1px solid var(--border); background:#000; }
.product-article article iframe{ aspect-ratio:16 / 9; }
.product-article article video{ border:1px solid var(--border); background:#000; }
.product-article article table{ width:100%; border-collapse:collapse; margin:1.6rem 0; background:rgba(11,11,11,.4); border:1px solid var(--border); border-radius:12px; overflow:hidden; }
.product-article article table thead th{ background:rgba(255,255,255,.05); }
.product-article article table th,
.product-article article table td{ padding:.85rem 1.1rem; text-align:left; border-bottom:1px solid rgba(255,255,255,.06); color:rgba(233,228,218,.9); }
.product-article article table tr:last-child th,
.product-article article table tr:last-child td{ border-bottom:none; }

.product-thumbnails{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:.8rem; justify-content:flex-start; }
.product-thumb{
  flex:1 1 calc((100% - (.6rem * 4)) / 5);
  min-width:88px;
  aspect-ratio:1/1;
  border-radius:12px;
  border:1px solid var(--border);
  overflow:hidden;
  cursor:pointer;
  position:relative;
  transition:border-color .2s, transform .2s;
  background:rgba(12,12,12,.85);
  padding:0;
  display:block;
}
.product-thumb:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.product-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }

@media (max-width: 960px){
  .product-hero{ grid-template-columns:1fr; }
  .product-hero .info{ order:2; }
  .product-hero .cover{ order:1; max-width:100%; }
  .product-thumbnails{ gap:.5rem; }
  .product-thumb{ flex:1 1 calc((100% - (.5rem * 2)) / 3); min-width:72px; }
}
.product-thumb.is-active{ border-color:var(--gold); transform:translateY(-2px); box-shadow:0 6px 16px rgba(0,0,0,.45); }
.product-thumb::after{ content:""; position:absolute; inset:0; box-shadow:inset 0 0 0 1px rgba(255,255,255,.05); pointer-events:none; }

@media (max-width: 960px){
  .product-hero{ grid-template-columns:1fr; }
  .product-hero .info{ order:2; }
  .product-hero .cover{ order:1; max-width:100%; }
}


/* === OVERRIDES: Lightbox & Modal main image sizing ===
   Keep images at their natural dimensions; only cap to container/viewport. */
.lightbox-image img{
  width:100% !important;
  height:auto !important;
  max-width:100% !important;
  max-height:80vh;
  object-fit:contain !important;
  display:block;
}
/* Match sizing for videos opened in the lightbox */
.lightbox-image video{ width:100%; height:auto; max-height:80vh; display:block; border-radius:12px; object-fit:contain }
.modal-main-image img{
  width:100%;
  height:auto;
  max-width:100%;
  object-fit:contain;
  display:block;
}
/* Reduce modal vertical margins on shorter viewports so media fits */
@media (max-height: 760px){
  .modal-content{ margin: 1.5rem auto; }
  .modal-header{ margin-bottom: 1.5rem; }
}
@media (max-width: 600px){
  /* On small screens, still respect container width and reduce height cap a bit */
  .lightbox-content{ width:min(94vw, 100%); padding: clamp(0.75rem, 2vh, 1.25rem) 1rem; }
  .lightbox-image{ margin-bottom: 1rem; }
  .lightbox-image img{ max-width:100% !important; max-height:min(76vh, 74svh, calc(100vh - 6rem)); }
}

/* Mobile overlay open state */
body.mobile-menu-open {
  overflow: hidden;
}

/* Ensure body-mounted panel shows on open */
body.mobile-menu-open .mobile-menu-panel {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
  display: flex !important;
}

/* When open, hide the CTA and burger within the header pill */
body.mobile-menu-open .nav-pill .cta { display: none !important; }
body.mobile-menu-open .nav-pill .hamburger { display: none !important; }






/* Disabled state for Gumroad purchase button */
.gumroad-button.is-disabled{
  opacity:0.55;
  pointer-events:none;
  cursor:not-allowed;
}

/* ===================================
 * Demo Reels Page Styles
 =================================== */

.reels-container{ max-width:1280px; margin:0 auto; padding:4rem 1.5rem 4rem; }

.reels-section{ margin-bottom:4rem; }
.reels-section-header{ margin-bottom:2rem; text-align:center; }
.reels-section-header p{ color:var(--muted-2); font-size:.95rem; }

.reels-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(420px, 1fr)); gap:2rem; }
@media (max-width:768px){
    .reels-grid{ grid-template-columns:1fr; }
}

.reel-card{
    background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
    border:1px solid var(--border); border-radius:14px; overflow:hidden; transition:all .3s;
    display:flex; flex-direction:column;
}
.reel-card:hover{ border-color:rgba(224,197,137,.4); transform:translateY(-4px); box-shadow:0 12px 28px rgba(0,0,0,.3); }

.reel-card.featured{
    grid-column:span 2; background:linear-gradient(180deg, rgba(224,197,137,.08), rgba(224,197,137,.02));
}
.reel-card.featured:hover{
    border-color:var(--gold);
}
@media (max-width:1024px){
    .reel-card.featured{ grid-column:span 1; }
}

.reel-thumbnail{
    position:relative; aspect-ratio:16/9; background:#000; overflow:hidden; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
}
.reel-thumbnail img{ width:100%; height:100%; object-fit:cover; }
.reel-thumbnail::after{
    content:''; position:absolute; inset:0;
    background:linear-gradient(0deg, rgba(0,0,0,.6), transparent 60%);
    pointer-events:none;
}
.reel-play-icon{
    position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);
    width:72px; height:72px; border-radius:50%; background:rgba(224,197,137,.9);
    display:flex; align-items:center; justify-content:center; z-index:2;
    transition:all .3s; backdrop-filter:blur(8px);
}
.reel-card:hover .reel-play-icon{ transform:translate(-50%, -50%) scale(1.1); background:var(--gold); }
.reel-play-icon::before{
    content:''; width:0; height:0; margin-left:6px;
    border-left:20px solid #17130c; border-top:12px solid transparent; border-bottom:12px solid transparent;
}
.reel-duration{
    position:absolute; bottom:12px; right:12px; z-index:2;
    background:rgba(0,0,0,.8); color:#fff; padding:.3rem .6rem; border-radius:6px;
    font-size:.85rem; font-weight:600; backdrop-filter:blur(4px);
}
.reel-featured-badge{
    position:absolute; top:12px; left:12px; z-index:2;
    background:var(--gold); color:#17130c; padding:.4rem .8rem; border-radius:8px;
    font-size:.8rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
}

.reel-content{ padding:1.5rem; flex:1; display:flex; flex-direction:column; }
.reel-title{ font-size:1.3rem; font-weight:600; margin-bottom:.8rem; line-height:1.3; }
.reel-card.featured .reel-title{ font-size:1.5rem; color:var(--gold); }
.reel-description{ color:var(--muted); line-height:1.7; font-size:.95rem; flex:1; }

.archives-toggle{
    text-align:center; margin:3rem 0 2rem; padding:2rem 0;
    border-top:1px solid var(--border); border-bottom:1px solid var(--border);
}
.archives-toggle button{
    background:rgba(255,255,255,.05); border:1px solid var(--border); color:var(--text);
    padding:.75rem 1.5rem; border-radius:10px; cursor:pointer; font-size:1rem; font-weight:600;
    font-family:Inter,system-ui,sans-serif; transition:all .2s;
}
.archives-toggle button:hover{ border-color:var(--gold); color:var(--gold); }

.archives-section{ display:none; }
.archives-section.active{ display:block; }

.empty-state{
    text-align:center; padding:4rem 2rem; color:var(--muted-2); font-size:1.1rem;
}

/* Video Modal */
.video-modal{
    position:fixed; inset:0; z-index:10000; background:rgba(0,0,0,.95);
    display:none; align-items:center; justify-content:center; padding:2rem;
}
.video-modal.active{ display:flex; }
.video-modal-content{ max-width:1600px; width:100%; position:relative; }
.video-modal-close{ position:absolute; top:-3rem; right:0; z-index:10001; }
@media (max-width: 640px){ .video-modal-close{ top:-2rem; right:-.2rem; } }
.video-wrapper{ position:relative; width:100%; aspect-ratio:16/9; background:#000; border-radius:12px; overflow:hidden; }
.video-wrapper iframe,
.video-wrapper video{ position:absolute; inset:0; width:100%; height:100%; }

/* Password Overlay for Protected Reels */
.password-overlay{
    position:absolute; inset:0; z-index:10002;
    background:rgba(0,0,0,.95); backdrop-filter:blur(10px);
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    padding:2rem;
}
.password-overlay-content{
    max-width:400px; width:100%; text-align:center;
    background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
    border:1px solid var(--border); border-radius:16px; padding:2.5rem 2rem;
}
.password-overlay h3{
    font-size:1.5rem; font-family:'Playfair Display',serif;
    color:var(--gold); margin-bottom:.5rem;
}
.password-overlay p{
    color:var(--muted); font-size:.95rem; margin-bottom:2rem;
}
.password-form{
    display:flex; flex-direction:column; gap:1rem;
}
.password-form input[type="password"]{
    width:100%; padding:.85rem 1.1rem; background:rgba(0,0,0,.4);
    border:1px solid var(--border); border-radius:10px; color:var(--text);
    font-size:1rem; font-family:inherit; transition:all .2s;
}
.password-form input[type="password"]:focus{
    outline:none; border-color:var(--gold); background:rgba(0,0,0,.6);
}
.password-form button{
    padding:.85rem 1.5rem; background:var(--gold); color:#17130c;
    border:none; border-radius:10px; cursor:pointer; font-weight:600;
    font-size:1rem; transition:all .2s; font-family:inherit;
}
.password-form button:hover{
    background:var(--gold-2); transform:translateY(-1px);
}
.password-error{
    color:#ff6b6b; font-size:.9rem; margin-top:.5rem; display:none;
}
.password-error.active{
    display:block;
}



/* Share Button and Modal Styles */
.reel-actions{
    display:flex; justify-content:flex-end; align-items:center; margin-top:1rem;
}

.reel-share-btn{
    display:inline-flex; align-items:center; gap:.5rem;
    padding:.6rem 1rem; border:1px solid var(--border); border-radius:8px;
    background:rgba(255,255,255,.05); color:var(--muted); font-size:.9rem;
    cursor:pointer; transition:all .2s; text-decoration:none;
    font-weight:500; font-family:inherit;
}
.reel-share-btn:hover{
    border-color:var(--gold); color:var(--gold); background:rgba(201,168,117,.08);
}
.reel-share-btn svg{
    width:16px; height:16px; stroke:currentColor; stroke-width:2;
}

/* Share Modal */
.share-modal{
    position:fixed; inset:0; z-index:10001;
    background:rgba(0,0,0,.95); backdrop-filter:blur(12px);
    display:none; align-items:center; justify-content:center;
    padding:2rem; overflow-y:auto;
}
.share-modal.active{ display:flex; }

.share-modal-content{
    background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
    border:1px solid var(--border); border-radius:16px;
    max-width:500px; width:100%; position:relative;
    box-shadow:0 20px 40px rgba(0,0,0,.4);
}

.share-modal-header{
    display:flex; justify-content:space-between; align-items:center;
    padding:1.5rem 2rem; border-bottom:1px solid var(--border);
}
.share-modal-header h3{
    font-size:1.3rem; font-weight:600; margin:0; color:var(--text);
}
.share-modal-close{
    background:none; border:none; color:var(--muted-2);
    font-size:1.8rem; cursor:pointer; padding:.2rem;
    border-radius:50%; width:36px; height:36px;
    display:flex; align-items:center; justify-content:center;
    transition:all .2s;
}
.share-modal-close:hover{
    color:var(--text); background:rgba(255,255,255,.1);
}

.share-modal-body{
    padding:2rem;
}

.share-url-container{
    display:flex; gap:.5rem; margin-bottom:2rem;
    align-items:center;
}
.share-url-container input{
    flex:1; padding:.8rem 1rem; background:rgba(0,0,0,.4);
    border:1px solid var(--border); border-radius:8px;
    color:var(--text); font-family:inherit; font-size:.95rem;
    outline:none; transition:border-color .2s;
}
.share-url-container input:focus{
    border-color:var(--gold);
}
.copy-btn{
    padding:.8rem 1.2rem; background:var(--gold); color:#17130c;
    border:none; border-radius:8px; cursor:pointer;
    font-weight:600; font-size:.9rem; transition:all .2s;
    white-space:nowrap;
}
.copy-btn:hover{
    background:var(--gold-2); transform:translateY(-1px);
}

.share-buttons{
    display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:1rem;
}
.share-btn-twitter,
.share-btn-facebook,
.share-btn-linkedin,
.share-btn-email{
    display:flex; align-items:center; justify-content:center; gap:.6rem;
    padding:.8rem 1rem; border:1px solid var(--border); border-radius:8px;
    background:rgba(255,255,255,.05); color:var(--text);
    text-decoration:none; font-size:.9rem; font-weight:500;
    transition:all .2s;
}
.share-btn-twitter:hover{ border-color:#1da1f2; color:#1da1f2; background:rgba(29,161,242,.1); }
.share-btn-facebook:hover{ border-color:#1877f2; color:#1877f2; background:rgba(24,119,242,.1); }
.share-btn-linkedin:hover{ border-color:#0077b5; color:#0077b5; background:rgba(0,119,181,.1); }
.share-btn-email:hover{ border-color:var(--gold); color:var(--gold); background:rgba(201,168,117,.1); }

.share-buttons svg{
    width:18px; height:18px; flex-shrink:0;
}

@media (max-width: 600px){
    .share-modal{ padding:1rem; }
    .share-modal-content{ max-width:95vw; }
    .share-modal-header{ padding:1.2rem 1.5rem; }
    .share-modal-body{ padding:1.5rem; }
    .share-buttons{ grid-template-columns:1fr; }
    .share-url-container{ flex-direction:column; align-items:stretch; }
    .copy-btn{ align-self:flex-start; }
}