/* ================= ROOT / RESET ================= */
:root{
  --ink:#0b0b0b;
  --paper:#f2f0e8;
  --accent:#2e5eea;
  --accent-dark:#17337e;
  --steel:#3a3a3a;
  --steel-dim:#1a1a1a;
  --muted:#c9c7bd;
  --max:1180px;
}
*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:'Space Mono', monospace;
  overflow-x:hidden;
  cursor:none;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
.wrap{ max-width:var(--max); margin:0 auto; padding:0 6vw; }
section{ position:relative; }

h1,h2,h3{
  font-family:'Archivo Black', sans-serif;
  text-transform:uppercase;
  letter-spacing:-0.01em;
  line-height:0.95;
  margin:0;
}

.eyebrow{ font-size:13px; letter-spacing:0.3em; color:var(--accent); text-transform:uppercase; margin-bottom:0.8rem; }
.eyebrow::before{ content:"// "; color:var(--paper); opacity:0.5; }

.section-title{ font-size:clamp(2rem, 5vw, 3.4rem); text-shadow:4px 4px 0 var(--accent); }

/* ================= NAV ================= */
.nav{
  position:sticky; top:0; z-index:100;
  background:var(--ink);
  border-bottom:2px solid var(--paper);
}
.nav-inner{
  max-width:var(--max); margin:0 auto; padding:1.1rem 6vw;
  display:flex; align-items:center; justify-content:space-between;
}
.logo{
  font-family:'Archivo Black', sans-serif; font-size:1.3rem; text-transform:uppercase;
  text-decoration:none;
}
.logo .dot{ color:var(--accent); }
.nav-links{ display:flex; gap:1.8rem; list-style:none; margin:0; padding:0; }
.nav-links a{
  text-decoration:none; font-size:13px; letter-spacing:0.08em; text-transform:uppercase;
  font-weight:700; padding-bottom:3px; border-bottom:2px solid transparent;
  transition:border-color .15s ease;
}
.nav-links a:hover{ border-color:var(--accent); }
.nav-toggle{ display:none; background:none; border:2px solid var(--paper); color:var(--paper); padding:0.4rem 0.6rem; cursor:none; }

/* ================= HERO ================= */
.hero{
  position:relative; min-height:92vh; width:100%; overflow:hidden;
}
.skyline{ position:absolute; inset:0; }
.bldg{ position:absolute; bottom:0; }
.windows{
  position:absolute; inset:6% 8%;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 10px, rgba(242,240,232,0.16) 10px 11px),
    repeating-linear-gradient(90deg, transparent 0 14px, rgba(242,240,232,0.16) 14px 15px);
}
.bldg-back-1{ left:1%; width:11vw; height:32vh; background:var(--steel-dim); }
.bldg-back-2{ left:13%; width:8vw; height:24vh; background:var(--steel-dim); }
.bldg-back-3{ right:2%; width:13vw; height:38vh; background:var(--steel-dim); }
.bldg-mid-1{ left:24%; width:9vw; height:48vh; background:var(--steel); clip-path:polygon(0 6%,100% 0,100% 100%,0 100%); }
.bldg-mid-2{ right:18%; width:11vw; height:56vh; background:var(--steel); clip-path:polygon(0 0,100% 4%,100% 100%,0 100%); }
.bldg-front-1{ right:28%; width:9vw; height:70vh; background:var(--ink); border-left:2px solid var(--paper); }
.bldg-front-2{ right:2%; width:15vw; height:80vh; background:var(--ink); border-left:2px solid var(--paper); clip-path:polygon(0 3%,100% 0,100% 100%,0 100%); }
.bldg-front-2 .windows{ background-image:
    repeating-linear-gradient(0deg, transparent 0 9px, rgba(242,240,232,0.26) 9px 10px),
    repeating-linear-gradient(90deg, transparent 0 12px, rgba(242,240,232,0.26) 12px 13px); }
.spire{ position:absolute; top:-6vh; left:50%; transform:translateX(-50%); width:2px; height:6vh; background:var(--paper); }

.strip{ position:absolute; background:var(--accent); z-index:2; }
.strip-1{ width:120%; height:5vh; top:22vh; left:-10%; transform:rotate(-7deg); opacity:0.92; }
.strip-2{ width:60%; height:2.4vh; top:50vh; right:-5%; transform:rotate(9deg); background:var(--accent-dark); }
.strip-3{ width:26vw; height:26vw; top:6vh; right:8vw; background:var(--accent);
  clip-path:polygon(20% 0,100% 10%,80% 100%,0 90%); transform:rotate(4deg); opacity:0.88; }

.ink-vignette{
  position:absolute; inset:0; z-index:3; pointer-events:none;
  background:linear-gradient(180deg, rgba(11,11,11,0) 45%, rgba(11,11,11,0.9) 100%);
}

.hero-content{
  position:relative; z-index:4; min-height:92vh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:6vw 6vw 8vh;
}
.hero-content h1{ font-size:clamp(2.6rem, 8vw, 7rem); text-shadow:4px 4px 0 var(--accent); }
.hero-content h1 .accent{ color:var(--accent); text-shadow:4px 4px 0 var(--paper); }
.hero-sub{ max-width:36ch; margin-top:1.4rem; font-size:15px; line-height:1.7; color:var(--muted); }
.cta-row{ display:flex; gap:1rem; margin-top:2.2rem; flex-wrap:wrap; }

/* ================= BUTTONS ================= */
.btn{
  display:inline-block;
  font-family:'Space Mono', monospace; font-weight:700; font-size:13px;
  letter-spacing:0.08em; text-transform:uppercase; padding:0.9rem 1.6rem;
  border:2px solid var(--paper); background:transparent; color:var(--paper);
  cursor:none; box-shadow:6px 6px 0 var(--accent); text-decoration:none;
  transition:transform .12s ease, box-shadow .12s ease;
}
.btn.primary{ background:var(--accent); border-color:var(--accent); color:var(--ink); box-shadow:6px 6px 0 var(--paper); }
.btn:active{ transform:translate(4px,4px); box-shadow:2px 2px 0 var(--accent); }
.btn.primary:active{ box-shadow:2px 2px 0 var(--paper); }
.btn.small{ padding:0.55rem 1rem; font-size:12px; box-shadow:4px 4px 0 var(--accent); }
.btn.ghost{ background:transparent; box-shadow:4px 4px 0 var(--accent-dark); }

/* ================= ABOUT ================= */
.about{ padding:9vh 0; border-bottom:2px solid var(--steel); }
.about-grid{ display:grid; grid-template-columns:1fr 1.4fr; gap:4vw; align-items:start; }
.about-bio{ font-size:15px; line-height:1.8; color:var(--muted); max-width:60ch; }
.about-facts{ list-style:none; margin:1.6rem 0 0; padding:0; font-size:13px; }
.about-facts li{ padding:0.6rem 0; border-bottom:1px solid var(--steel); display:flex; justify-content:space-between; gap:1rem; }
.about-facts span:first-child{ color:var(--accent); text-transform:uppercase; letter-spacing:0.05em; }

/* ================= PROJECTS ================= */
.projects{ padding:9vh 0; }
.project-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:3vw; margin-top:4vh; }

.card{
  position:relative; background:#141414; border:2px solid var(--paper);
  box-shadow:10px 10px 0 var(--accent);
  transition:transform .15s ease, box-shadow .15s ease;
  display:flex; flex-direction:column;
}
.card:hover{ transform:translate(-4px,-4px); box-shadow:14px 14px 0 var(--accent); }

.shot-wrap{
  position:relative; overflow:hidden; border-bottom:2px solid var(--paper);
  clip-path:polygon(0 0, 92% 0, 100% 6%, 100% 100%, 8% 100%, 0 92%);
  aspect-ratio:16/10; background:#000;
}
.shot-wrap img{ width:100%; height:100%; object-fit:cover; object-position:top; filter:saturate(0.9) contrast(1.05); }
.tear-strip{
  position:absolute; top:0; right:0; width:34%; height:100%; background:var(--accent);
  clip-path:polygon(55% 0, 100% 0, 60% 100%, 15% 100%); opacity:0.85; pointer-events:none;
}
.tear-strip::after{ content:""; position:absolute; inset:0; background:repeating-linear-gradient(115deg, transparent 0 8px, rgba(0,0,0,0.25) 8px 9px); }
.corner-peel{
  position:absolute; bottom:0; left:0; width:22%; height:30%; background:var(--ink);
  clip-path:polygon(0 100%, 100% 100%, 0 0); border-top:2px solid var(--paper); border-right:2px solid var(--paper);
  pointer-events:none;
}

.card-body{ padding:clamp(1.2rem, 3vw, 1.8rem); display:flex; flex-direction:column; flex:1; }
.card-num{ font-size:12px; color:var(--accent); letter-spacing:0.2em; }
.card-body h3{ font-size:clamp(1.4rem, 3vw, 1.9rem); margin-top:0.4rem; text-shadow:3px 3px 0 var(--accent); }
.card-desc{ margin-top:0.9rem; font-size:13.5px; line-height:1.7; color:var(--muted); }

.stack{ display:flex; flex-wrap:wrap; gap:0.5rem; margin-top:1.1rem; }
.tag{ font-size:11px; letter-spacing:0.05em; text-transform:uppercase; border:1px solid var(--steel); color:var(--muted); padding:0.3rem 0.6rem; }

.gallery{ display:flex; gap:0.5rem; margin-top:1.2rem; overflow-x:auto; padding-bottom:0.3rem; }
.gallery::-webkit-scrollbar{ height:4px; }
.gallery::-webkit-scrollbar-thumb{ background:var(--accent); }
.thumb{ flex:0 0 auto; width:56px; height:40px; overflow:hidden; cursor:none; border:2px solid var(--steel); opacity:0.6; transition:opacity .15s ease, border-color .15s ease; }
.thumb img{ width:100%; height:100%; object-fit:cover; }
.thumb.active{ opacity:1; border-color:var(--accent); }
.thumb:hover{ opacity:1; }

.card-links{ display:flex; gap:0.6rem; margin-top:auto; padding-top:1.4rem; flex-wrap:wrap; }

/* ================= SKILLS ================= */
.skills{ padding:9vh 0; border-top:2px solid var(--steel); border-bottom:2px solid var(--steel); }
.skill-groups{ display:grid; grid-template-columns:repeat(2, 1fr); gap:3vw; margin-top:4vh; }
.skill-group h4{ font-family:'Archivo Black', sans-serif; text-transform:uppercase; font-size:1rem; color:var(--accent); margin-bottom:0.9rem; }
.pill-row{ display:flex; flex-wrap:wrap; gap:0.5rem; }
.pill{ font-size:12px; border:2px solid var(--paper); padding:0.4rem 0.8rem; }
.skill-group.exploring .pill{ border-style:dashed; border-color:var(--accent-dark); color:var(--muted); }

/* ================= CODING PROFILES ================= */
.platforms{ padding:9vh 0; border-top:2px solid var(--steel); }
.platform-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:1.4rem; margin-top:4vh; }
.platform-card{
  display:block; text-decoration:none; color:var(--paper);
  background:#141414; border:2px solid var(--paper); padding:1.4rem 1.2rem;
  box-shadow:6px 6px 0 var(--accent);
  transition:transform .15s ease, box-shadow .15s ease;
  position:relative;
}
.platform-card:hover{ transform:translate(-3px,-3px); box-shadow:9px 9px 0 var(--accent); }
.platform-num{ font-size:11px; color:var(--accent); letter-spacing:0.2em; }
.platform-card h4{ font-family:'Archivo Black', sans-serif; text-transform:uppercase; font-size:1.05rem; margin-top:0.5rem; }
.platform-card .arrow{ position:absolute; top:1.2rem; right:1.2rem; font-size:1.1rem; color:var(--accent); }

/* ================= RESUME ================= */
.resume{ padding:9vh 0; }
.resume-top{ display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; flex-wrap:wrap; }
.timeline{ margin-top:5vh; display:grid; gap:2.4rem; }
.tl-item{ display:grid; grid-template-columns:180px 1fr; gap:2rem; border-bottom:1px solid var(--steel); padding-bottom:2rem; }
.tl-date{ font-size:12px; color:var(--accent); letter-spacing:0.05em; text-transform:uppercase; }
.tl-item h4{ font-family:'Archivo Black', sans-serif; text-transform:uppercase; font-size:1.15rem; }
.tl-item p{ font-size:13.5px; color:var(--muted); line-height:1.7; margin-top:0.5rem; }
.tl-item ul{ margin:0.6rem 0 0; padding-left:1.1rem; color:var(--muted); font-size:13.5px; line-height:1.7; }

/* ================= BLOG ================= */
.blog{ padding:9vh 0; border-top:2px solid var(--steel); }
.blog-card{
  display:grid; grid-template-columns:220px 1fr; gap:2rem; background:#141414; border:2px solid var(--paper);
  box-shadow:8px 8px 0 var(--accent); text-decoration:none; color:var(--paper); padding:1.6rem;
  transition:transform .15s ease, box-shadow .15s ease;
}
.blog-card:hover{ transform:translate(-3px,-3px); box-shadow:11px 11px 0 var(--accent); }
.blog-cover{
  background:linear-gradient(135deg, var(--steel) 0%, var(--ink) 100%);
  border:2px solid var(--paper); min-height:140px; position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.blog-cover::before{
  content:""; position:absolute; width:70%; height:70%; background:var(--accent);
  clip-path:polygon(20% 0, 100% 15%, 80% 100%, 0 85%); opacity:0.9; transform:rotate(8deg);
}
.blog-cover span{ position:relative; z-index:2; font-family:'Archivo Black', sans-serif; font-size:1.6rem; color:var(--paper); text-shadow:2px 2px 0 var(--ink); }
.blog-meta{ font-size:12px; color:var(--accent); letter-spacing:0.05em; text-transform:uppercase; margin-bottom:0.6rem; }
.blog-card h3{ font-size:clamp(1.3rem, 2.6vw, 1.8rem); }
.blog-card p{ font-size:13.5px; color:var(--muted); line-height:1.7; margin-top:0.7rem; }

/* ================= CONTACT ================= */
.contact{ padding:9vh 0; border-top:2px solid var(--steel); }
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:4vw; margin-top:4vh; }
.form-row{ margin-bottom:1.2rem; display:flex; flex-direction:column; gap:0.5rem; }
.form-row label{ font-size:12px; text-transform:uppercase; letter-spacing:0.08em; color:var(--muted); }
.form-row input, .form-row textarea{
  background:var(--ink); border:2px solid var(--paper); color:var(--paper);
  font-family:'Space Mono', monospace; font-size:14px; padding:0.7rem; cursor:auto;
}
.form-row textarea{ resize:vertical; min-height:120px; }
.form-row input:focus, .form-row textarea:focus{ outline:none; border-color:var(--accent); }

.contact-links{ display:flex; flex-direction:column; gap:1rem; }
.contact-links a{ text-decoration:none; font-size:14px; border-bottom:1px solid var(--steel); padding-bottom:0.8rem; display:flex; justify-content:space-between; }
.contact-links a:hover{ color:var(--accent); }

footer{ padding:4vh 0; border-top:2px solid var(--steel); text-align:center; font-size:12px; color:var(--muted); }
footer .accent{ color:var(--accent); }

/* ================= CURSOR ================= */
#cursor-dot{
  position:fixed; width:9px; height:9px; background:var(--accent); border-radius:50%;
  pointer-events:none; z-index:9999; transform:translate(-50%,-50%);
  box-shadow:0 0 8px 1px rgba(46,94,234,0.5);
  transition:opacity .2s ease;
}
.crack{
  position:fixed; pointer-events:none; z-index:9998; background:var(--paper);
  transform-origin:0 50%; opacity:0.55; box-shadow:0 0 4px 1px rgba(46,94,234,0.35);
}

/* ================= RESPONSIVE ================= */
@media (max-width: 900px){
  .nav-links{
    position:fixed; top:64px; left:0; right:0; background:var(--ink);
    flex-direction:column; gap:0; border-bottom:2px solid var(--paper);
    max-height:0; overflow:hidden; transition:max-height .25s ease;
  }
  .nav-links.open{ max-height:400px; }
  .nav-links li{ border-bottom:1px solid var(--steel); }
  .nav-links a{ display:block; padding:1rem 6vw; }
  .nav-toggle{ display:block; }

  .about-grid, .skill-groups, .contact-grid{ grid-template-columns:1fr; }
  .project-grid{ grid-template-columns:1fr; }
  .platform-grid{ grid-template-columns:1fr 1fr; }
  .tl-item{ grid-template-columns:1fr; gap:0.6rem; }
  .blog-card{ grid-template-columns:1fr; }
}

@media (max-width: 520px){
  .platform-grid{ grid-template-columns:1fr; }
}

@media (pointer: coarse){
  body{ cursor:auto; }
  .btn, .thumb{ cursor:pointer; }
  #cursor-dot, .crack{ display:none !important; }
}