.projects-page{
  min-height:100vh;
  background:#050509;
  color:#f9fafb;
}

.info-section{
  background:#050509;
}

.about-section{
  background:#050509;
}
.info-card,
.project-card,
.project-detail{
  background:#111827;
  border:1px solid #272b3a;
  color:#f9fafb;
}

.info-card p,
.project-card p,
.info-extra{
  color:#e5e7eb;
}
h1, h2, h3,
.side-links a,
.about-cta{
  color:#f9fafb;
}


.projects-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 40px;
}

.projects-header h1 {
  font-size: clamp(2.5rem, 6vw, 4rem);
  letter-spacing: -0.04em;
}

.projects-meta .years {
  font-size: 0.85rem;
  letter-spacing: 0.08em;
}

.projects-filter-row {
  display: flex;
  gap: 20px;
  align-items: center;
  margin-bottom: 40px;
  flex-wrap: wrap;
  border-bottom: 1px solid #ddd1c5;
  padding-bottom: 20px;
}

.category-select span {
  display: block;
  font-size: 0.85rem;
  margin-bottom: 4px;
}

.category-select select {
  padding: 8px 10px;
  border-radius: 3px;
  border: 1px solid #ccc;
  background: #fff;
}

.search-input {
  flex: 1;
  min-width: 200px;
  padding: 10px 12px;
  border-radius: 3px;
  border: 1px solid #ccc;
}

.project-list {
  display: grid;
  gap: 24px;
  margin-top: 30px;
}

.project-card {
  display: block;
  background: #050509;
  border-radius: 8px;
  padding: 24px 28px;
  border: 1px solid #e0d6ca;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  text-decoration: none;
  color: inherit;
}

.project-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 35px rgba(0,0,0,0.08);
  text-decoration: none;
}

.project-card header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
  margin-bottom: 12px;
}

.project-tag {
  font-family: "Menlo", "SF Mono", monospace;
  letter-spacing: 0.1em;
}

.project-type {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.75rem;
}

.project-card h2 {
  font-size: 1.3rem;
  margin: 4px 0 8px;
}

.project-card p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #444;
}

@media (max-width: 768px) {
  .projects-header {
    flex-direction: column;
    gap: 10px;
  }
}

.project-detail {
  margin-top: 40px;
  padding: 32px 28px;
  border-radius: 10px;
  background:#111827;
  border:1px solid #272b3a;
}

.project-detail h2 {
  font-size: 1.6rem;
  margin-bottom: 12px;
}

.project-meta-row {
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  font-size:0.9rem;
  margin-bottom:16px;
}

.project-meta-label {
  opacity:0.7;
  margin-right:4px;
}

.project-images {
  display:grid;
  gap:16px;
  margin-top:20px;
}

.project-images img {
  width:100%;
  border-radius:8px;
  display:block;
}

/* EDUCATION / INFO SECTIONS */

.info-section{
  background:#050509;
}

.info-header{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  margin-bottom:32px;
}

.info-header h1{
  font-size:clamp(2.1rem,5vw,3rem);
  letter-spacing:-0.04em;
}

.info-years{
  font-size:0.85rem;
  letter-spacing:0.08em;
}

.info-list{
  display:grid;
  gap:22px;
}

.info-card{
  background:#111827;
  border-radius:12px;
  padding:22px 26px;
  border:1px solid #272b3a;
}

.info-card header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:0.85rem;
  margin-bottom:8px;
}

.info-tag{
  font-family:"Menlo","SF Mono",monospace;
  letter-spacing:0.12em;
}

.info-meta{
  text-transform:uppercase;
  letter-spacing:0.12em;
  font-size:0.75rem;
}

.info-card h2{
  font-size:1.2rem;
  margin:4px 0 6px;
}

.info-card p{
  font-size:0.95rem;
  line-height:1.6;
  color:#444;
}

.info-extra{
  margin-top:4px;
  font-size:0.9rem;
}

/* SKILLS */

.skill-pill{
  background:#111827;
  color:#f9fafb;
  border-radius:999px;
  padding:18px 22px;
  border:none;
  text-align:left;
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.skill-pill:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 25px rgba(15,23,42,0.35);
}

.skill-pill.active{
  background:#1f2937;
  box-shadow:0 0 0 2px #38bdf8;
}

/* CONTACT */

.contact-full{
  background:#050509;
  color:#f9fafb;
}

.contact-inner{
  max-width:1120px;
  margin:0 auto;
}

.contact-email{
  font-size:clamp(2.1rem,4vw,2.7rem);
  margin:0 0 26px;
  letter-spacing:-0.03em;
}

.contact-layout{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,1.4fr);
  gap:32px;
}

@media(max-width:900px){
  .contact-layout{grid-template-columns:1fr;}
}

.contact-left{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:20px;
}

.contact-copy{
  font-size:0.95rem;
  line-height:1.7;
  opacity:0.85;
  max-width:260px;
}

.contact-icons{
  display:flex;
  gap:14px;
  font-size:1rem;
  opacity:0.8;
}

.contact-form{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.contact-form .field{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.contact-form label{
  font-size:0.8rem;
  text-transform:uppercase;
  letter-spacing:.14em;
  opacity:0.7;
}

.contact-form input,
.contact-form textarea{
  background:transparent;
  border:none;
  border-bottom:1px solid #4b4b55;
  padding:8px 4px;
  color:#f9fafb;
  font-family:inherit;
  font-size:0.95rem;
}

.contact-form input:focus,
.contact-form textarea:focus{
  outline:none;
  border-bottom-color:#f97373;
}

.contact-button{
  margin-top:10px;
  padding:14px 32px;
  border:none;
  border-radius:4px;
  background:#ff3b30;
  color:#fff;
  font-weight:600;
  font-size:0.95rem;
  cursor:pointer;
  align-self:flex-start;
}

.contact-button:hover{
  opacity:0.9;
}

.contact-note{
  margin-top:20px;
  font-size:0.85rem;
  opacity:0.8;
}

.contact-toast{
  margin-top:10px;
  font-size:0.85rem;
  color:#bbf7d0;
  background:#14532d;
  border-radius:8px;
  padding:8px 10px;
  border:1px solid #22c55e;
  display:none;
}

/* ABOUT */

.about-section{
  background: #050509;
}

.about-header h1{
  font-size:clamp(2.7rem,6vw,3.8rem);
  letter-spacing:-0.06em;
  margin:0 0 24px;
}

.about-grid{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,1.6fr);
  gap:40px;
}

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

.about-left{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.about-label{
  font-size:0.9rem;
  letter-spacing:.2em;
  text-transform:uppercase;
}

.about-sub{
  font-size:0.95rem;
  line-height:1.7;
  color:#444;
  max-width:260px;
}

.about-metrics{
  display:flex;
  flex-wrap:wrap;
  gap:18px;
  margin-top:6px;
}

.metric-num{
  font-size:1.6rem;
  letter-spacing:-0.04em;
}

.metric-text{
  font-size:0.8rem;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:#6b6b76;
}

.about-main p{
  font-size:0.98rem;
  line-height:1.8;
  color:#333;
  margin:0 0 12px;
}

.about-footer{
  margin-top:40px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  flex-wrap:wrap;
}

.about-free{
  font-size:0.95rem;
  line-height:1.7;
  max-width:520px;
}

.about-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 28px;
  border-radius:999px;
  border:1px solid #111;
  font-size:0.9rem;
  text-decoration:none;
  color:#111;
  transition:background .15s ease,color .15s ease,transform .15s ease;
}

.about-cta:hover{
  background:#111;
  color:#f9fafb;
  transform:translateY(-2px);
}

/* SIDE NAV */

.side-nav{
  position:fixed;
  top:50%;
  right:32px;
  transform:translateY(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:20px;
  z-index:1000;
}

.side-logo{
  width:42px;
  height:42px;
  border-radius:50%;
  border:1px solid #111;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-size:1.2rem;
  background:#111;
  color:#f9fafb;
  cursor:pointer;
}

.side-links{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:6px;
}

.side-links a{
  writing-mode:vertical-rl;
  text-orientation:mixed;
  font-size:0.75rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#555;
  text-decoration:none;
  padding:4px 0;
  transition:color .15s ease, transform .15s ease;
}

.side-links a:hover{
  color:#000;
  transform:translateX(-2px);
}

@media(max-width:900px){
  .side-nav{display:none;}
}

/* LOGO POPUP */

.logo-popup{
  position:fixed;
  top:50%;
  right:86px;
  transform:translateY(-50%);
  background:#111827;
  color:#f9fafb;
  padding:14px 16px;
  border-radius:12px;
  border:1px solid #1f2937;
  box-shadow:0 18px 40px rgba(15,23,42,0.55);
  font-size:0.85rem;
  min-width:190px;
  display:none;
  z-index:999;
}

.logo-popup-name{
  font-weight:600;
  margin-bottom:4px;
}

.logo-popup-line{
  opacity:0.9;
  margin-top:2px;
}

@media(max-width:900px){
  .logo-popup{display:none;}
}

/* HERO AVATAR */

.hero-avatar{
  position:fixed;
  bottom:80px;
  right:140px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  z-index:900;
  transition:opacity .25s ease, transform .25s ease;
}

.hero-avatar img{
  width: 470px;
  height:500px;
}

.hero-avatar-bubble{
  background:#111827;
  color:#f9fafb;
  padding:8px 14px;
  /* border-radius:999px;
  font-size:0.85rem;
  box-shadow:0 12px 30px rgba(15,23,42,0.5); */
}

.hero-avatar.hidden{
  opacity:0;
  pointer-events:none;
  transform:translateY(10px);
}

@media(max-width:900px){
  .hero-avatar{display:none;}
}

/* TYPING ROLES */

.type-roles{
  display:inline-flex;
  align-items:baseline;
  gap:2px;
  font-weight:600;
}

#role-text{
  min-width:110px;
}

.type-cursor{
  animation: blink 0.9s steps(1) infinite;
  opacity:1;
}

@keyframes blink{
  0%,50%{opacity:1;}
  51%,100%{opacity:0;}
}

/* UNIFORM SECTION SPACING */

.page-section{
  padding:60px 8%;
}

@media (max-width:768px){
  .page-section{
    padding:48px 6%;
  }
}

/* remove extra vertical padding from individual sections, keep only left/right */
.projects-page,
.info-section,
.about-section,
.contact-full{
  padding-left:8%;
  padding-right:8%;
  padding-top:0;
  padding-bottom:0;
}