/* ═══════════════════════════════════════════════════════════
   JORDAN MOSS PORTFOLIO - GHOST THEME STYLES
   Custom cyberpunk marathon-style theme
   ═══════════════════════════════════════════════════════════ */

:root{
  --bg:#0a0a0c;--bg2:#111116;--bgc:#16161c;--bge:#1c1c24;
  --cyan:#00f0ff;--mag:#ff2d7b;--ora:#ff6a00;--lime:#ff6a00;
  --tp:#e8e8ec;--ts:#8a8a96;--tm:#55555e;
  --brd:#2a2a34;--brda:#3a3a48;
  --fd:'Outfit',sans-serif;--fm:'Space Mono','JetBrains Mono',monospace;
}

/* ═══ BASE STYLES ═══ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--fd);background:var(--bg);color:var(--tp);line-height:1.6;overflow-x:hidden}
::selection{background:var(--cyan);color:var(--bg)}
::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:var(--cyan)}

/* ═══ SPLASH HERO WITH ASCII BG ═══ */
.splash{position:relative;width:100%;height:100vh;overflow:hidden;z-index:1;margin-top:0 !important}
#ascii-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none;background:var(--bg)}
#ascii-output{
  margin:0;padding:0;
  font-family:'JetBrains Mono',monospace;
  font-size:7px;line-height:1.05;letter-spacing:0.3px;
  white-space:pre;
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
}
.splash-overlay{
  position:absolute;inset:0;z-index:1;
  background:
    radial-gradient(ellipse at 25% 35%, rgba(10,10,12,0.35) 0%, rgba(10,10,12,0.65) 45%, rgba(10,10,12,0.88) 100%);
  pointer-events:none;
}
.splash-overlay::after{
  content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,0.04) 2px,rgba(0,0,0,0.04) 4px);
  pointer-events:none;
}
.splash-content{
  position:relative;z-index:3;
  max-width:1400px;margin:0 auto;padding:0 2rem;
  height:100%;display:flex;flex-direction:column;justify-content:center;
}
.splash-bottom{
  position:absolute;bottom:0;left:0;right:0;height:120px;z-index:2;
  background:linear-gradient(transparent,var(--bg));pointer-events:none;
}

/* ═══ ANIMATIONS ═══ */
@keyframes scan{0%{transform:translateX(-100%)}100%{transform:translateX(100vw)}}
@keyframes glow{0%,100%{box-shadow:0 0 5px var(--ora)}50%{box-shadow:0 0 15px var(--ora)}}
@keyframes glitch{0%,100%{text-shadow:none}42%{text-shadow:-2px 0 var(--mag),2px 0 var(--cyan)}43%{text-shadow:1px 0 var(--mag),-1px 0 var(--cyan)}44%{text-shadow:none}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
@keyframes fadeUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@keyframes scrollHint{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(8px);opacity:1}}

/* ═══ HERO TEXT STYLES ═══ */
.ht{font-family:var(--fm);font-size:.65rem;color:var(--mag);letter-spacing:.3em;text-transform:uppercase;margin-bottom:1.5rem;display:flex;align-items:center;gap:.75rem;animation:fadeUp .8s ease-out .2s both}.ht::before{content:'';width:40px;height:1px;background:var(--mag)}
.type-cursor{display:inline-block;color:var(--ora);animation:blink 1s step-end infinite;font-size:inherit;line-height:inherit;vertical-align:baseline;margin-left:0}
.h1{font-family:var(--fd);font-weight:900;font-size:clamp(3rem,7.5vw,6.5rem);line-height:.95;letter-spacing:-.03em;margin-bottom:1.5rem;animation:fadeUp .8s ease-out .4s both}
.l1{display:block;color:var(--tp)}.l2{display:block;color:transparent;-webkit-text-stroke:1.5px var(--cyan)}.l3{display:block;color:var(--ora);font-size:.45em;letter-spacing:.08em;-webkit-text-stroke:0;margin-top:.3em}
.hsub{font-family:var(--fm);font-size:.75rem;color:var(--ts);max-width:520px;line-height:1.8;animation:fadeUp .8s ease-out .6s both}.hsub span{color:var(--cyan)}
.hm{margin-top:2.5rem;display:flex;gap:2.5rem;flex-wrap:wrap;animation:fadeUp .8s ease-out .8s both}.hmi{font-family:var(--fm);font-size:.6rem;text-transform:uppercase;letter-spacing:.12em;color:var(--tm)}.hmi strong{display:block;font-size:1.6rem;font-family:var(--fd);font-weight:700;color:var(--tp);letter-spacing:-.02em;margin-bottom:.2rem}
.hcta{margin-top:2.5rem;display:flex;gap:1rem;flex-wrap:wrap;animation:fadeUp .8s ease-out 1s both}
.scroll-hint{position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);z-index:3;font-family:var(--fm);font-size:.55rem;letter-spacing:.2em;text-transform:uppercase;color:var(--tm);display:flex;flex-direction:column;align-items:center;gap:.5rem;animation:fadeUp .8s ease-out 1.2s both}
.scroll-hint .arrow{font-size:1rem;animation:scrollHint 2s ease-in-out infinite;color:var(--cyan)}

/* ═══ NAVIGATION ═══ */
nav{position:fixed;top:0;width:100%;z-index:1000;background:rgba(10,10,12,0.82);backdrop-filter:blur(20px);border-bottom:1px solid var(--brd);transition:transform .3s}
.ni{max-width:1400px;margin:0 auto;padding:0 2rem;height:60px;display:flex;align-items:center;justify-content:space-between}
.nl{font-family:var(--fm);font-weight:700;font-size:.8rem;color:var(--cyan);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;display:flex;align-items:center;gap:.6rem;cursor:pointer}
.lb{width:28px;height:28px;border:2px solid var(--cyan);display:flex;align-items:center;justify-content:center}.lb::after{content:'';width:10px;height:10px;background:var(--cyan);clip-path:polygon(50% 0%,100% 100%,0% 100%)}
.nk{display:flex;gap:0;list-style:none}.nk a{font-family:var(--fm);font-size:.65rem;color:var(--ts);text-decoration:none;text-transform:uppercase;letter-spacing:.12em;padding:.4rem 1rem;transition:color .3s;cursor:pointer}.nk a::before{content:'//';color:var(--tm);margin-right:.25em}.nk a:hover,.nk a.active{color:var(--cyan)}
.nk-mobile{display:none}
.ns{font-family:var(--fm);font-size:.55rem;color:var(--tm);display:flex;align-items:center;gap:.4rem}.sd{width:6px;height:6px;border-radius:50%;background:var(--ora);animation:glow 2s ease-in-out infinite}
.nt{display:none;background:none;border:1px solid var(--brd);color:var(--ts);padding:.4rem .6rem;cursor:pointer;font-family:var(--fm);font-size:.65rem}
@media(max-width:768px){.nk-desktop,.ns{display:none}.nt{display:block}.nk-mobile{display:none}.nk-mobile.open{display:flex;flex-direction:column;position:absolute;top:60px;left:0;right:0;background:rgba(10,10,12,.95);backdrop-filter:blur(20px);border-bottom:1px solid var(--brd);padding:1rem;z-index:100}}

/* ═══ BUTTONS ═══ */
.bp{font-family:var(--fm);font-size:.65rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;padding:.9rem 2rem;background:var(--ora);color:var(--bg);border:none;cursor:pointer;text-decoration:none;transition:all .3s;clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));display:inline-block}.bp:hover{background:#fff;box-shadow:0 0 20px rgba(255,106,0,.4)}
.bs0{font-family:var(--fm);font-size:.65rem;letter-spacing:.15em;text-transform:uppercase;padding:.9rem 2rem;background:transparent;color:var(--ts);border:1px solid var(--brd);cursor:pointer;text-decoration:none;transition:all .3s;display:inline-block}.bs0:hover{color:var(--cyan);border-color:var(--cyan)}

/* ═══ SECTIONS ═══ */
.page-content{position:relative;z-index:2;background:var(--bg)}
.sec{padding:5rem 0}
.sec#work{padding-top:2rem}
.sc{max-width:1400px;margin:0 auto;padding:0 2rem}.sh{margin-bottom:3.5rem}
.sl{font-family:var(--fm);font-size:.55rem;color:var(--ora);letter-spacing:.3em;text-transform:uppercase;margin-bottom:.6rem;display:flex;align-items:center;gap:.6rem}.sl::before{content:'◆';font-size:.45rem}
.st{font-family:var(--fd);font-weight:900;font-size:clamp(1.8rem,3.5vw,3rem);letter-spacing:-.02em}
.dv{width:100%;height:1px;background:linear-gradient(90deg,var(--cyan),transparent 50%)}

/* ═══ FILTERS + GRID ═══ */
.fl{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:2.5rem}.fb{font-family:var(--fm);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;padding:.5rem 1rem;background:transparent;color:var(--tm);border:1px solid var(--brd);cursor:pointer;transition:all .3s}.fb:hover,.fb.active{color:var(--ora);border-color:var(--ora);background:rgba(255,106,0,.04)}
.wg{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:1.25rem}@media(max-width:500px){.wg{grid-template-columns:1fr}}
.wc{background:var(--bgc);border:1px solid var(--brd);overflow:hidden;cursor:pointer;transition:all .4s cubic-bezier(.16,1,.3,1)}.wc:hover{border-color:var(--ora);transform:translateY(-3px);box-shadow:0 16px 50px rgba(0,0,0,.4),0 0 25px rgba(255,106,0,.06)}
.wi{width:100%;aspect-ratio:16/10;background:var(--bge);overflow:hidden;position:relative}.wi img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.16,1,.3,1)}.wc:hover .wi img{transform:scale(1.04)}
.wi .bd{position:absolute;top:10px;right:10px;font-family:var(--fm);font-size:.5rem;letter-spacing:.08em;text-transform:uppercase;padding:.25rem .5rem;background:rgba(10,10,12,.8);border:1px solid var(--brda);color:var(--ora)}
.wb{padding:1.25rem}.tg{display:flex;gap:.4rem;margin-bottom:.6rem;flex-wrap:wrap}
.t{font-family:var(--fm);font-size:.5rem;letter-spacing:.08em;text-transform:uppercase;padding:.15rem .4rem;display:inline-block}
.professional,.tc{color:var(--cyan);border:1px solid rgba(0,240,255,.2);background:rgba(0,240,255,.04)}
.exotek,.tm2{color:var(--mag);border:1px solid rgba(255,45,123,.2);background:rgba(255,45,123,.04)}
.personal,.tl,.to{color:var(--ora);border:1px solid rgba(255,106,0,.2);background:rgba(255,106,0,.04)}
.weapons{color:var(--cyan);border:1px solid rgba(0,240,255,.2);background:rgba(0,240,255,.04)}
.aaa{color:var(--ts);border:1px solid var(--brd);background:rgba(138,138,150,.04)}
.concept{color:var(--ora);border:1px solid rgba(255,106,0,.2);background:rgba(255,106,0,.04)}
.wt{font-family:var(--fd);font-weight:700;font-size:1.15rem;margin-bottom:.4rem}.wd{font-size:.8rem;color:var(--ts);line-height:1.6;margin-bottom:.75rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.wm{display:flex;justify-content:space-between;font-family:var(--fm);font-size:.55rem;color:var(--tm);letter-spacing:.08em;text-transform:uppercase;padding-top:.75rem;border-top:1px solid var(--brd)}.wm .rm{color:var(--ora);transition:letter-spacing .3s}.wc:hover .rm{letter-spacing:.15em}
.ip{width:100%;height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:.4rem}.ip span{font-family:var(--fm);font-size:.55rem;color:var(--tm);letter-spacing:.12em}

/* ═══ POST/PROJECT DETAIL ═══ */
.post-template{background:var(--bg);padding-top:80px}
.post-header{padding:3rem 0 2rem;border-bottom:1px solid var(--brd)}
.post-header-content{max-width:920px}
.post-title{font-family:var(--fd);font-weight:900;font-size:clamp(2rem,4vw,3.5rem);letter-spacing:-.02em;margin-bottom:1rem;line-height:1.1}
.post-meta{font-family:var(--fm);font-size:.6rem;color:var(--tm);letter-spacing:.12em;text-transform:uppercase}
.meta-divider{margin:0 .5rem;color:var(--brd)}
.post-hero-image{width:100%;max-width:1400px;margin:0 auto;padding:0 2rem;margin-top:2rem}
.post-hero-image img{width:100%;display:block;border:1px solid var(--brd)}
.post-content{padding:3rem 0}
.post-content-body{max-width:920px}
.post-content-body h2{font-family:var(--fd);font-weight:700;font-size:1.8rem;margin-top:2.5rem;margin-bottom:1rem;color:var(--cyan)}
.post-content-body h3{font-family:var(--fd);font-weight:700;font-size:1.3rem;margin-top:2rem;margin-bottom:.75rem}
.post-content-body p{font-size:.95rem;color:var(--ts);line-height:1.8;margin-bottom:1.5rem}
.post-content-body img{width:100%;border:1px solid var(--brd);margin:2rem 0}
.post-content-body ul,.post-content-body ol{margin-bottom:1.5rem;padding-left:1.5rem}
.post-content-body li{color:var(--ts);margin-bottom:.5rem}
.post-content-body a{color:var(--cyan);text-decoration:none;border-bottom:1px solid rgba(0,240,255,.3);transition:all .3s}
.post-content-body a:hover{color:var(--ora);border-color:var(--ora)}
.post-content-body blockquote{border-left:3px solid var(--cyan);padding-left:1.5rem;margin:2rem 0;font-style:italic;color:var(--ts)}
.post-footer{padding:3rem 0;border-top:1px solid var(--brd)}
.post-nav{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-bottom:2rem}
.post-nav-prev,.post-nav-next{display:flex;flex-direction:column;gap:.5rem;padding:1.5rem;background:var(--bgc);border:1px solid var(--brd);text-decoration:none;transition:all .3s}
.post-nav-prev:hover,.post-nav-next:hover{border-color:var(--ora);background:var(--bge)}
.post-nav-label{font-family:var(--fm);font-size:.55rem;letter-spacing:.15em;text-transform:uppercase;color:var(--tm)}
.post-nav-title{font-family:var(--fd);font-weight:600;font-size:1rem;color:var(--tp)}
.post-nav-next{text-align:right}
.post-back{text-align:center}

/* ═══ PAGE TEMPLATE (ABOUT, etc) ═══ */
.page-template{background:var(--bg);padding-top:80px}
.page-header{padding:3rem 0 2rem}
.page-content{padding:2rem 0}
.page-content-body{max-width:920px}
.page-content-body p{font-size:.95rem;color:var(--ts);line-height:1.8;margin-bottom:1.5rem}
.page-content-body h2{font-family:var(--fd);font-weight:700;font-size:1.8rem;margin-top:2.5rem;margin-bottom:1rem;color:var(--cyan)}
.page-content-body ul,.page-content-body ol{margin-bottom:1.5rem;padding-left:1.5rem}
.page-content-body li{color:var(--ts);margin-bottom:.5rem}

/* ═══ FOOTER ═══ */
.site-footer{padding:2.5rem 0;border-top:1px solid var(--brd);background:var(--bg);margin-top:5rem}
.footer-content{display:flex;justify-content:space-between;flex-wrap:wrap;gap:2rem}
.footer-left{max-width:400px}
.footer-desc{font-family:var(--fm);font-size:.65rem;color:var(--ts);margin-top:1rem;line-height:1.6}
.footer-right{text-align:right}
.footer-right p{font-family:var(--fm);font-size:.55rem;color:var(--tm);letter-spacing:.08em;margin-bottom:.5rem}
.footer-right a{color:var(--cyan);text-decoration:none;transition:color .3s}
.footer-right a:hover{color:var(--ora)}

/* ═══ PAGINATION ═══ */
.pagination{display:none !important}
.pagination a,.pagination span{font-family:var(--fm);font-size:.65rem;letter-spacing:.12em;text-transform:uppercase;padding:.7rem 1.2rem;background:var(--bgc);border:1px solid var(--brd);color:var(--ts);text-decoration:none;transition:all .3s}
.pagination a:hover{border-color:var(--ora);color:var(--ora)}
.pagination .page-number{color:var(--ora);border-color:var(--ora)}

/* ═══ GALLERY / IMAGE GRID IN CONTENT ═══ */
.kg-gallery-container{margin:2rem 0}
.kg-gallery-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1rem}
.kg-gallery-image img{width:100%;border:1px solid var(--brd)}

/* ═══ GHOST CARD WIDTHS (REQUIRED) ═══ */
.kg-width-wide{max-width:1400px;margin:2rem auto}
.kg-width-full{max-width:100%;margin:2rem 0}
.kg-width-wide img,.kg-width-full img{width:100%;height:auto}

/* ═══ RESPONSIVE ═══ */
@media(max-width:768px){
  .post-nav{grid-template-columns:1fr}
  .footer-content{flex-direction:column}
  .footer-right{text-align:left}
}