:root{
  --bg: #07080a;
  --fg: #f3f4f6;
  --muted: rgba(243,244,246,.72);
  --line: rgba(255,255,255,.22);
  --glass: rgba(255,255,255,.05);
  --glass2: rgba(255,255,255,.07);
  --shadow: rgba(0,0,0,.45);
}

*{ box-sizing:border-box; }
html,body{ 
  height:100%; 
}

body{
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin:0;
  background: var(--bg);
  color: var(--fg);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}

#bg{
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  display: block;
  z-index: 0;           /* <- NOT -1 */
}

.wrap{
  flex: 1;
  margin: 0 auto;
  display: flex;
  width: min(80vw, 1120px); 
  flex-direction: column;
  padding: 24px 0 15px;
}

.topbar{
  position: sticky;
  top: 24px;
  z-index: 9999;
  display:flex;
  justify-content: space-between;
  align-items:center;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--glass2), var(--glass));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 5px 30px  var(--shadow);
}

/* Make overlay click-through by default */
.wrap,
.main,
.hero,
.topbar{
  pointer-events: none;
}

/* Re-enable interaction only for the elements you want clickable */
.topbar a,
.topbar button,
.nav a,
.card,
.btn,
.reset-btn,
.links a{
  pointer-events: auto;
}


/* Relative link page offset */
:root { --header-offset: 90px; }

#work, #about, #skills {
  scroll-margin-top: var(--header-offset);
}


.brand{ display:flex; align-items:center; gap: 12px; }

.logo{
  width: clamp(20px, 2vw, 40px);
  height: clamp(20px, 2vw, 40px);
  background-image: url("chromestar.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.name{ font-weight: 650; 
  display: inline-block;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  font-size: 0.8rem;
  letter-spacing: 0.15rem;
  text-transform: uppercase;
  font-weight: 500;
  color: rgba(255,255,255,0.85);
}
.role{ color: var(--muted); font-size: 13px; margin-top:2px; }

.nav{ display:flex; gap: 10px; flex-wrap:wrap; }

.nav a{
  color: rgba(255,255,255,0.85);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  text-decoration:none;
  font-size: 14px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid transparent;
  transition: .18s ease;
}
.nav a:hover{
  color: var(--fg);
  border-color: var(--line);
  background: rgba(255,255,255,.04);
  box-shadow: 0 0 20px rgba(165, 180, 180, 0.6);
}

.main{ 
  flex: 1;
  padding-top: 56px; 
  display:flex; 
  flex-direction:column; 
  gap: 14px; 
}

.card{
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
    box-shadow: 0 5px 30px  var(--shadow);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 18px;
  height: 100%;
}

.card-link {
  text-decoration: none;   /* removes underline */
  color: inherit;          /* keeps text color */
  display: block;    
  height: 100%;    
}

.glow:hover {
  transform: translateY(-6px);
  box-shadow: 0 0 20px rgba(165, 180, 180, 0.6); /* glow */
}

#project {
  cursor: pointer;
}

.hero h1{
  margin: 0 0 15px;
  font-size: clamp(15px, 3vw, 20px);
  display: inline-block;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color: rgba(255,255,255,0.85);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
}
.card.hero p{
  margin: 0 0 28px;
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.6;
  max-width: 90%;
  color: var(--muted);
}

.title {
  margin: 3rem 0 1.5rem;
  padding: 0.6rem 1.2rem;
  z-index: 999;
  display: inline-block;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  font-size: clamp(15px, 3vw, 28px);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
  border-bottom: 1px solid rgb(94, 90, 90);
  color: rgba(255,255,255,0.85);
}


.cta{ display:flex; gap: 10px; flex-wrap: wrap; }
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.06);
  color: var(--fg);
  text-decoration:none;
  font-size: 14px;
  transition: .18s ease;
}
.btn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.22);
}
.btn.primary{
  background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.07));
  border-color: rgba(255,255,255,.22);
}

.grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 980px){
  .grid{ grid-template-columns: 1fr; }
}

h2{ margin: 0 0 8px; 
  font-size: 13px; 

  display: inline-block;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;

  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
}
.card p{ margin: 0; color: var(--muted); line-height: 1.55; font-size: 14px; }

/* Tech Stack arrow list */

.arrow-list {
  list-style: none;
  padding-left: 0;
  margin: 8px 0 0;
}

.arrow-list li {
  position: relative;
  padding-left: 1.2em;
  margin-bottom: 6px;
  color:rgb(255, 255, 255, .8);
  font-size: clamp(14px, 1.2vw, 15px);
}

.arrow-list li::before {
  content: "▸";   /* arrow */
  position: absolute;
  left: 0;
  color: rgb(249, 253, 253);
}



.footer{
  margin-top: auto;
  padding: 0;           /* match .wrap side padding */
}

.footer-inner{         /* match .wrap */
  display:flex;
  justify-content: space-between;
  align-items:center;
  max-width: none; 
  flex-wrap: wrap;
  max-width: 100%;
}



.links{ display:flex; gap: 12px; flex-wrap: wrap; }
.links a{ color: var(--fg); text-decoration:none; opacity:.85; }
.links a:hover{ opacity:1; text-decoration:underline; }

@media (prefers-reduced-motion: reduce){
  #bg{ display:none; }
  body{
    background:
      radial-gradient(900px 600px at 20% 80%, rgba(255,255,255,.06), transparent 65%),
      radial-gradient(1000px 700px at 80% 75%, rgba(255,255,255,.05), transparent 60%),
      #07080a;
  }
  .btn:hover{ transform:none; }
}

/* CONTACT PAGE STYLING */


.contact-card{
  pointer-events: auto; /* allow typing/clicking inside this card */
}

.contact-title{
  margin: 0 0 10px;
  font-size: clamp(15px, 3vw, 20px);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
}

.contact-sub{
  margin: 0 0 16px;
  color: var(--muted);
  line-height: 1.6;
  font-size: clamp(14px, 1.3vw, 16px);
  max-width: 70ch;
}

.contact-form{
  display: grid;
  gap: 14px;
  margin-top: 10px;
}

.field{
  display: grid;
  gap: 8px;
}

.field span{
  font-size: 13px;
  color: var(--muted);
}

/* White “writing” area + inputs */
.field input,
.field textarea{
  width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.10);
  background: #ffffff;
  color: #0b0c0f;
  padding: 8px 8px;
  font: inherit;
  outline: none;
  pointer-events: auto; /* ensure interactive even with your global pointer-events rules */
}

.field textarea{
  min-height: 220px;  /* makes it feel like a “square” note box */
  resize: vertical;   /* allow resize; change to none if you want fixed */
}

/* Nice focus ring */
.field input:focus,
.field textarea:focus{
  box-shadow: 0 0 0 3px rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.25);
}

.contact-actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.contact-note{
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.contact-note a{
  color: var(--fg);
  opacity: .9;
  text-decoration: none;
  pointer-events: auto;
}
.contact-note a:hover{
  text-decoration: underline;
}

.required {
  color: #ff4d4f;
  font-weight: 600;
}

.reset-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.06);
  color: var(--fg);
  text-decoration:none;
  font-size: 14px;
  transition: .18s ease;
}
.reset-btn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.22);
}

.reset-btn.primary{
  background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.07));
  border-color: rgba(255,255,255,.22);
}

/* ABOUT PAGE */

.about-card {
  pointer-events: none;
}

.about-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 24px;
  align-items: start;
}

.about-text {
  text-align: left;
}

.about-text h1 {
  margin: 0 0 15px;
  display: inline-block;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color: rgba(255,255,255,0.85);
  font-size: clamp(15px, 3vw, 20px);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
}

.about-text p {
  margin: 0 0 14px;
  color: var(--muted);
  line-height: 1.6;
  font-size: clamp(14px, 1.3vw, 16px);
}

.about-image {
  display: flex;
  align-items: flex-start;
}

.about-image img {
  width: 100%;
  max-width: 350px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 16px;
  border: 1px solid var(--line);
  box-shadow: 0 10px 40px var(--shadow);
}

/* Stack on smaller screens */
@media (max-width: 800px) {
  .about-grid {
    grid-template-columns: 1fr;
    text-align: left;
  }

  .about-image {
    width: 100%;
    max-width: 280px;
    display: flex;
    justify-content: center;  
    align-items: flex-start;     /* top */
  }
}


/* ===== Mobile / small screens ===== */
@media (max-width: 600px) {

    /* Disable popup on mobile */
  .popup {
    display: none !important;
  }

  /* keep your nice centered layout, but give it safe side padding */
  .wrap{
    width: min(92vw, 1120px);
    padding: 16px 0 12px;
  }

  /* Relative link page offset */
:root { --header-offset: 110px; }

#work, #about {
  scroll-margin-top: var(--header-offset);
}

  /* your sticky header needs an explicit top value */
  .topbar{
    top: 12px;
    padding: 10px 12px;
    gap: 10px;
  }

  /* nav tends to wrap awkwardly on phones — this makes it behave */
  .nav{
    gap: 6px;
  }
  .nav a{
    padding: 8px 10px;
    font-size: 13px;
  }

  /* cards and text spacing */
  .card{
    padding: 14px;
  }

  .card.hero p{
    max-width: 100%;
    font-size: clamp(14px, 4.2vw, 16px);
  }

  /* buttons become full width on narrow screens */
  .cta, .contact-actions{
    gap: 8px;
  }
  .btn, .reset-btn{
    width: 100%;
    justify-content: center;
  }

  /* stop the textarea from forcing vertical overflow */
  .field textarea{
    min-height: 160px;
    height: min(32vh, 260px);
    resize: none;
  }

  /* footer stacks nicely */
  .footer-inner{
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

/* MOBILE: allow normal scrolling + taps */
@media (hover: none) and (pointer: coarse) {


  /* Re-enable interaction for the UI/content so it behaves normally on touch */
  .wrap,
  .main,
  .card,
  .hero,
  .topbar{
    pointer-events: auto;
  }
}