@font-face{
      font-family:'MyEnvatoFont';
      src:url('../assets/fonts/Brithney.woff2') format('woff2'),
          url('../assets/fonts/Brithney.ttf') format('truetype'),
          url('../assets/fonts/Brithney.otf') format('opentype');
      font-weight:400;font-style:normal;font-display:swap;
    }

    *,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
    html,body{width:100%;overflow-x:hidden}
    html{scroll-behavior:smooth}

    :root{
      --coral:#ee0039;
      --crimson1:#ee0039;
      --crimson2:#54091b;
      --accent-gradient:linear-gradient(135deg,var(--crimson1),var(--crimson2));
      --accent-rgb:238,0,57;
      --wine-rgb:84,9,27;
      --dark:#1a1a1a;
      --bg:#f4f2ef;
      --muted:#6b6b6b;
      --dim:#a6a29c;
      --line:rgba(26,26,26,.10);
      --glass:rgba(255,255,255,.72);
      --glass-strong:rgba(255,255,255,.95);
      --display:'MyEnvatoFont','Pinyon Script',cursive;
    }

    body{
      background:var(--bg);font-family:'Inter',sans-serif;min-height:100vh;
      cursor:none;opacity:0;color:var(--dark);position:relative;
      transition:opacity .5s ease,background .5s ease,color .5s ease;
    }
    body.loaded{opacity:1}

    /* soft atmospheric blobs */
    body::before{content:'';position:fixed;top:6%;left:-180px;width:420px;height:420px;border-radius:50%;
      background:radial-gradient(circle,rgba(var(--accent-rgb),.13),transparent 70%);filter:blur(34px);z-index:-2;pointer-events:none;
      animation:floatA 16s ease-in-out infinite}
    body::after{content:'';position:fixed;bottom:4%;right:-200px;width:500px;height:500px;border-radius:50%;
      background:radial-gradient(circle,rgba(var(--wine-rgb),.12),transparent 70%);filter:blur(40px);z-index:-2;pointer-events:none;
      animation:floatB 20s ease-in-out infinite}
    @keyframes floatA{0%,100%{transform:translateY(0)}50%{transform:translateY(46px)}}
    @keyframes floatB{0%,100%{transform:translateY(0)}50%{transform:translateY(-56px)}}

    body.dark-mode{
      --dark:#f2f0ec;
      --bg:#0d0d0f;
      --muted:#9a9690;
      --dim:#6a6660;
      --line:rgba(255,255,255,.10);
      --glass:rgba(28,28,32,.72);
      --glass-strong:rgba(28,28,32,.95);
    }
    body.dark-mode::before{background:radial-gradient(circle,rgba(var(--accent-rgb),.22),transparent 70%)}
    body.dark-mode::after{background:radial-gradient(circle,rgba(var(--wine-rgb),.22),transparent 70%)}

    #progress{position:fixed;top:0;left:0;height:3px;background:var(--accent-gradient);z-index:9999;width:0%;transition:width .1s linear;border-radius:0 2px 2px 0}

    /* cursor */
    #cur{position:fixed;width:8px;height:8px;background:var(--coral);border-radius:50%;pointer-events:none;z-index:10000;transform:translate(-50%,-50%);transition:width .2s,height .2s,background .2s}
    #cur-ring{position:fixed;width:32px;height:32px;border:1.5px solid rgba(var(--accent-rgb),.45);border-radius:50%;pointer-events:none;z-index:10000;transform:translate(-50%,-50%);transition:width .3s,height .3s,opacity .3s,border-color .3s}
    body:has(a:hover) #cur,body:has(button:hover) #cur,body:has(figure:hover) #cur{width:14px;height:14px}
    body:has(a:hover) #cur-ring,body:has(button:hover) #cur-ring,body:has(figure:hover) #cur-ring{width:50px;height:50px;opacity:.25}

    /* nav */
    nav{display:flex;justify-content:space-between;align-items:flex-start;padding:1.8rem 5%;position:relative;z-index:100}
    .nav-logo{font-size:.95rem;font-weight:500;color:var(--dark);text-decoration:none;transition:color .25s ease,transform .25s ease}
    .nav-logo:hover{color:var(--coral);transform:translateY(-2px)}
    .nav-links{display:flex;flex-direction:column;align-items:flex-end;gap:.1rem;list-style:none}
    .nav-links a{font-size:.88rem;font-weight:400;color:var(--dark);text-decoration:none;line-height:1.8;transition:color .25s ease}
    .nav-links a:hover{color:var(--coral)}
    @media(min-width:701px){
      nav{align-items:center}
      .nav-links{flex-direction:row;gap:.75rem}
      .nav-links a{padding:.48rem 1.05rem;border-radius:100px;border:1px solid var(--line);background:var(--glass);backdrop-filter:blur(10px);line-height:1;position:relative;overflow:hidden;font-size:.88rem;transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease,color .28s ease,background .28s ease}
      .nav-links a:hover{color:var(--coral);border-color:rgba(var(--accent-rgb),.45);background:var(--glass-strong);transform:translateY(-3px);box-shadow:0 10px 28px rgba(var(--accent-rgb),.18)}
      .nav-links a.active{color:var(--coral);border-color:rgba(var(--accent-rgb),.45);background:var(--glass-strong);box-shadow:0 8px 22px rgba(var(--accent-rgb),.14)}
    }

    /* standalone dark-mode trigger */
    .theme-fab{position:fixed;bottom:1.6rem;right:1.6rem;width:46px;height:46px;border-radius:50%;
      background:rgba(255,255,255,.55);backdrop-filter:blur(12px) saturate(1.3);-webkit-backdrop-filter:blur(12px) saturate(1.3);
      border:1px solid var(--line);color:var(--dark);font-size:1.05rem;cursor:none;z-index:300;
      display:flex;align-items:center;justify-content:center;line-height:1;
      box-shadow:0 8px 24px rgba(var(--wine-rgb),.14);transition:transform .35s ease,box-shadow .35s ease,color .3s ease,background .3s ease,border-color .3s ease}
    .theme-fab:hover{color:var(--coral);border-color:rgba(var(--accent-rgb),.45);transform:translateY(-3px) rotate(25deg);box-shadow:0 12px 30px rgba(var(--accent-rgb),.22)}
    body.dark-mode .theme-fab{background:rgba(28,28,32,.6);box-shadow:0 8px 24px rgba(0,0,0,.4)}

    /* ── HEADER ── */
    .proj-header{padding:3rem 7% 0;position:relative}
    .ph-kicker{font-family:'DM Mono',monospace;font-size:.6rem;letter-spacing:.32em;text-transform:uppercase;color:var(--coral);display:flex;align-items:center;gap:.6rem;margin-bottom:1.4rem;opacity:0;transform:translateY(10px);transition:opacity .7s,transform .7s}
    .ph-kicker::before{content:'';width:34px;height:1px;background:var(--accent-gradient)}
    .ph-kicker.visible{opacity:1;transform:translateY(0)}
    .proj-title{font-family:var(--display);font-size:clamp(4rem,15vw,10rem);color:var(--coral);line-height:1.08;letter-spacing:.01em;opacity:0;transform:translateY(20px);transition:opacity .8s,transform .8s;display:inline-block;padding:.04em .02em .12em;background:var(--accent-gradient);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;overflow:visible}
    .proj-title.visible{opacity:1;transform:translateY(0)}
    .ph-stand{max-width:30rem;margin-top:1.8rem;font-size:.85rem;color:var(--muted);line-height:1.95;opacity:0;transform:translateY(12px);transition:opacity .7s .15s,transform .7s .15s}
    .ph-stand.visible{opacity:1;transform:translateY(0)}
    .ph-rule{height:1px;background:var(--line);margin:2.8rem 0 0}

    /* filters — glass pills */
    .filter-bar{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;margin-top:1.8rem}
    .filter-label{font-family:'DM Mono',monospace;font-size:.55rem;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);margin-right:.4rem}
    .filter-pill{font-family:'DM Mono',monospace;font-size:.62rem;letter-spacing:.08em;padding:.45rem 1rem;border-radius:100px;border:1px solid var(--line);background:rgba(255,255,255,.4);backdrop-filter:blur(8px);color:var(--muted);cursor:none;transition:all .25s}
    body.dark-mode .filter-pill{background:rgba(255,255,255,.05)}
    .filter-pill:hover{border-color:rgba(var(--accent-rgb),.45);color:var(--coral);transform:translateY(-2px)}
    .filter-pill.active{background:var(--accent-gradient);color:#fff;border-color:transparent;box-shadow:0 8px 22px rgba(var(--accent-rgb),.28)}

    /* ── PROJECTS (editorial, frameless) ── */
    .projects-list{padding:5rem 7% 4rem;max-width:1240px;margin:0 auto;display:flex;flex-direction:column;gap:clamp(6rem,12vw,11rem)}

    .proj{position:relative}
    .proj.hide{display:none}

    /* giant ghost index number */
    .proj-index{position:absolute;top:-3.2rem;font-family:'Inter',sans-serif;font-weight:700;font-size:clamp(7rem,18vw,15rem);line-height:1;color:transparent;-webkit-text-stroke:1.5px rgba(var(--accent-rgb),.13);z-index:0;pointer-events:none;user-select:none;left:-1.2rem}
    body.dark-mode .proj-index{-webkit-text-stroke-color:rgba(var(--accent-rgb),.22)}
    .proj.reverse .proj-index{left:auto;right:-1.2rem}

    .proj-head{position:relative;z-index:1;margin-bottom:2.8rem;max-width:46rem}
    .proj.reverse .proj-head{margin-left:auto;text-align:right}
    .proj-kicker{font-family:'DM Mono',monospace;font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;color:var(--coral);display:inline-flex;align-items:center;gap:.6rem;margin-bottom:.9rem}
    .proj-name{font-size:clamp(2.2rem,5.5vw,3.8rem);font-weight:700;color:var(--dark);line-height:1.04;letter-spacing:-.02em}
    .proj-tagline{display:block;margin-top:.7rem;font-size:.92rem;color:var(--muted);font-weight:300}

    .proj-body{display:grid;grid-template-columns:1.55fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center;position:relative;z-index:1}
    .proj.reverse .proj-body{grid-template-columns:1fr 1.55fr}
    .proj.reverse .proj-gallery{order:2}

    /* image cluster: tall lead + two stacked subs */
    .proj-gallery{display:grid;grid-template-columns:1.45fr 1fr;grid-template-rows:1fr 1fr;gap:.9rem}
    figure{position:relative;border-radius:16px;overflow:hidden;cursor:none;background:var(--accent-gradient)}
    body.dark-mode figure{background:linear-gradient(150deg,#7a1226,#3a0512)}
    .img-lead{grid-column:1;grid-row:1/3;aspect-ratio:3/4}
    .img-sub.a{grid-column:2;grid-row:1;aspect-ratio:auto}
    .img-sub.b{grid-column:2;grid-row:2;aspect-ratio:auto}
    .img-sub{background:linear-gradient(160deg,var(--crimson1),var(--crimson2))}
    body.dark-mode .img-sub{background:linear-gradient(160deg,#7a1226,#3a0512)}
    figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.3,1)}
    figure:hover img{transform:scale(1.06)}
    .fig-ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:'DM Mono',monospace;font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.7);text-align:center;padding:.5rem}

    /* GLASS hover overlay on each image */
    .fig-overlay{position:absolute;inset:0;display:flex;align-items:flex-end;padding:.8rem;opacity:0;transition:opacity .35s ease}
    figure:hover .fig-overlay{opacity:1}
    .fig-glass{display:flex;align-items:center;justify-content:space-between;gap:.6rem;width:100%;
      background:rgba(255,255,255,.16);backdrop-filter:blur(12px) saturate(1.4);-webkit-backdrop-filter:blur(12px) saturate(1.4);
      border:1px solid rgba(255,255,255,.32);border-radius:11px;padding:.5rem .75rem;transform:translateY(8px);transition:transform .35s ease}
    figure:hover .fig-glass{transform:translateY(0)}
    .fig-label{font-family:'DM Mono',monospace;font-size:.56rem;letter-spacing:.12em;color:#fff;text-transform:uppercase}
    .fig-exp{font-size:.7rem;color:#fff;opacity:.85}

    /* floating glass status chip on lead image */
    .fig-status{position:absolute;top:.7rem;left:.7rem;font-family:'DM Mono',monospace;font-size:.52rem;letter-spacing:.1em;text-transform:uppercase;
      background:rgba(255,255,255,.18);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.3);color:#fff;
      padding:.32rem .6rem;border-radius:100px;display:inline-flex;align-items:center;gap:.4rem;z-index:2}
    .fig-status::before{content:'';width:6px;height:6px;border-radius:50%;background:#7CFFB0}
    .fig-status.local::before{background:#FFD27C}

    /* copy column — floats free, no frame */
    .proj-copy{min-width:0}
    .proj.reverse .proj-copy{text-align:left}
    .proj-desc{font-size:.82rem;color:var(--muted);line-height:1.95;text-align:justify;text-justify:inter-word}
    .proj-desc p+p{margin-top:.85rem}

    .proj-meta{display:flex;gap:2rem;margin-top:1.6rem;flex-wrap:wrap}
    .meta-item{display:flex;flex-direction:column;gap:.25rem}
    .meta-k{font-family:'DM Mono',monospace;font-size:.5rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
    .meta-v{font-size:.78rem;color:var(--dark);font-weight:500}

    .proj-chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1.5rem}
    .proj-chip{font-family:'DM Mono',monospace;font-size:.55rem;letter-spacing:.06em;padding:.3rem .72rem;border-radius:100px;
      background:rgba(255,255,255,.4);backdrop-filter:blur(8px);color:var(--muted);border:1px solid var(--line);transition:all .22s}
    body.dark-mode .proj-chip{background:rgba(255,255,255,.05)}
    .proj-chip:hover{background:var(--accent-gradient);color:#fff;border-color:transparent;transform:translateY(-2px);box-shadow:0 8px 20px rgba(var(--accent-rgb),.18)}

    .proj-links{display:flex;gap:1.3rem;align-items:center;margin-top:1.7rem;flex-wrap:wrap}
    .proj-link{font-family:'DM Mono',monospace;font-size:.64rem;letter-spacing:.06em;color:var(--dark);text-decoration:none;display:inline-flex;align-items:center;gap:.4rem;border-bottom:1px solid var(--line);padding-bottom:.2rem;transition:all .25s}
    .proj-link:hover{color:var(--coral);border-color:var(--coral);gap:.6rem}
    .proj-link.disabled{color:var(--dim);pointer-events:none;border-color:transparent}
    .proj-sig{font-family:var(--display);font-size:1.7rem;color:var(--dim);margin-left:auto;transition:color .35s;line-height:1}
    .proj.reverse .proj-sig{margin-left:0;margin-right:auto}
    .proj:hover .proj-sig{color:var(--coral)}

    /* reveal */
    .proj-head,.proj-gallery,.proj-copy,.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s ease}
    .proj.in .proj-head{opacity:1;transform:none}
    .proj.in .proj-gallery{opacity:1;transform:none;transition-delay:.1s}
    .proj.in .proj-copy{opacity:1;transform:none;transition-delay:.2s}
    .reveal.visible{opacity:1;transform:none}

    /* ── TEASER ── */
    .teaser{max-width:1240px;margin:0 auto;padding:0 7% 6rem;text-align:center}
    .teaser h3{font-family:var(--display);font-size:clamp(2rem,5vw,3.4rem);color:var(--coral);line-height:1.08;margin-bottom:.6rem;display:inline-block;padding:.04em .02em .12em;background:var(--accent-gradient);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;overflow:visible}
    .teaser p{font-size:.8rem;color:var(--muted);max-width:24rem;margin:0 auto;line-height:1.9}
    .teaser-rule{width:50px;height:2px;background:var(--accent-gradient);margin:0 auto 2rem;border-radius:2px}

    /* LIGHTBOX */
    #lightbox{position:fixed;inset:0;background:rgba(8,4,6,.94);backdrop-filter:blur(6px);z-index:50000;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .3s ease;padding:1.5rem}
    #lightbox.open{opacity:1;pointer-events:all}
    #lightbox-img{max-width:88vw;max-height:84vh;border-radius:14px;object-fit:contain;transform:scale(.92);transition:transform .35s cubic-bezier(.34,1.56,.64,1);box-shadow:0 30px 80px rgba(0,0,0,.6)}
    #lightbox.open #lightbox-img{transform:scale(1)}
    .lb-ph{width:min(70vw,640px);aspect-ratio:4/3;border-radius:14px;background:var(--accent-gradient);display:flex;align-items:center;justify-content:center;font-family:'DM Mono',monospace;letter-spacing:.2em;color:rgba(255,255,255,.7);text-transform:uppercase;font-size:.7rem;transform:scale(.92);transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
    #lightbox.open .lb-ph{transform:scale(1)}
    #lightbox-close{position:fixed;top:1.5rem;right:1.5rem;width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);color:#fff;font-size:1.2rem;cursor:none;display:flex;align-items:center;justify-content:center;transition:all .25s;backdrop-filter:blur(8px)}
    #lightbox-close:hover{background:var(--crimson1);border-color:var(--crimson1);transform:rotate(90deg)}
    #lightbox-caption{position:fixed;bottom:1.5rem;left:50%;transform:translateX(-50%);font-family:'DM Mono',monospace;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.55);white-space:nowrap}
    .lb-nav{position:fixed;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);color:#fff;font-size:1.1rem;cursor:none;display:flex;align-items:center;justify-content:center;transition:all .25s;backdrop-filter:blur(8px)}
    #lb-prev{left:1.5rem}#lb-next{right:1.5rem}
    .lb-nav:hover{background:var(--crimson1);border-color:var(--crimson1)}

    /* footer */
    footer{background:var(--accent-gradient);color:#f7f7f7;padding:2.8rem 7% 1.8rem;position:relative;overflow:hidden;margin-top:2rem}
    footer::before{content:'';position:absolute;top:-40%;right:-10%;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.16),transparent 70%);pointer-events:none}
    body.dark-mode footer{background:linear-gradient(135deg,#0a0a0c 0%,#22030b 52%,#54091b 100%)}
    .footer-logo{font-family:var(--display);font-size:2rem;color:#f7f7f7;line-height:1;margin-bottom:.9rem;display:block;position:relative}
    .footer-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.8rem;position:relative}
    .footer-copy{font-size:.62rem;color:rgba(255,255,255,.45)}
    .footer-links{display:flex;gap:1.1rem;flex-wrap:wrap}
    .footer-links a{font-size:.66rem;color:rgba(255,255,255,.65);text-decoration:none;transition:color .2s}
    .footer-links a:hover{color:#fff}

    @media(max-width:860px){
      .proj-body,.proj.reverse .proj-body{grid-template-columns:1fr;gap:2.2rem}
      .proj.reverse .proj-gallery{order:0}
      .proj.reverse .proj-head{text-align:left;margin-left:0}
      .proj-head{margin-bottom:2rem}
    }
    @media(max-width:700px){
      body{cursor:auto}#cur,#cur-ring{display:none}
      figure,.lb-nav,#lightbox-close,.filter-pill,.theme-fab{cursor:pointer}
      .proj-gallery{grid-template-columns:1fr 1fr;grid-template-rows:auto auto}
      .img-lead{grid-column:1/3;grid-row:1;aspect-ratio:4/3}
      .img-sub.a{grid-column:1;grid-row:2;aspect-ratio:1}
      .img-sub.b{grid-column:2;grid-row:2;aspect-ratio:1}
    }
    @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}


/* ============================================================
   TITLE FIX COPIED FROM ABOUT PAGE APPROACH
   About works because the big script title is NOT gradient-clipped.
   These titles now use solid red text, normal background rendering,
   and line-height:1, same idea as .page-title on About.
============================================================ */
.proj-header{
  overflow:visible !important;
}
.proj-title{
  font-family:var(--display) !important;
  font-size:clamp(4rem,15vw,10rem) !important;
  color:var(--red1) !important;
  background:none !important;
  -webkit-background-clip:initial !important;
  background-clip:initial !important;
  -webkit-text-fill-color:var(--red1) !important;
  line-height:1 !important;
  padding:0 !important;
  margin:0 !important;
  display:block !important;
  overflow:visible !important;
}
.proj-title.visible{
  opacity:1 !important;
  transform:translateY(0) !important;
}