:root{
  --bg:#0b0c10;
  --fg:#e9ecf1;
  --muted:#9aa4b2;
  --card:rgba(255,255,255,.06);
  --border:rgba(255,255,255,.12);
  --accent:#7c5cff;
  --max:1000px;
}


a{ color:inherit; }
.container{ width:min(var(--max), calc(100% - 2rem)); margin:0 auto; }
.row{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.muted{ color:var(--muted); }

.header{
  justify-content: center;   /* centers the inner row block */
  min-height: 30px;
  position:sticky; top:0;
  border-bottom:1px solid var(--border);
  background:rgba(11,12,16,.9);
  flex: 0 0 auto;
}

.brand{ 
  font-weight:700;
  text-decoration:none; 
  padding:1rem 0; 
  margin-left: clamp(0px, calc(min(100vw, 1920px) * 0.02), 2rem);
}

.navBtn{
  margin-right: clamp(0px, calc(min(100vw, 1920px) * 0.02), 2rem);
  border:1px solid var(--border);
  background:transparent;
  color:var(--fg);
  padding:.4rem .6rem;
  border-radius:10px;
  cursor:pointer;
}

.nav{
  margin-right: clamp(0px, calc(min(100vw, 1920px) * 0.02), 2rem);
  display:none;
  gap:.9rem;
  align-items:center;
}
.nav a{
  text-decoration:none;
  padding:.3rem .5rem;
  border-radius:10px;
  transition: background .35s ease, box-shadow .35s ease, transform .35s ease, border-color .35s ease, color .35s ease;
}

.nav a:hover{
  border-color: color-mix(in srgb, rgb(255, 255, 255) 40%, transparent);
  background: linear-gradient(135deg,
    rgba(204, 73, 149, 0.35),
    rgba(110, 231, 255, 0.22)
  );
  box-shadow:
    0 0 12px rgb(78, 182, 201),
    0 0 22px rgb(207, 47, 173);
  transform: translateY(-1px);
}

/* optional: don’t change active link too much when hovering */
.nav a.active:hover{
    border-color: color-mix(in srgb, rgb(255, 255, 255) 40%, transparent);
    background: linear-gradient(135deg,
    rgba(204, 73, 149, 0.35),
    rgba(110, 231, 255, 0.22)
  );
  box-shadow:
    0 0 12px rgb(78, 182, 201),
    0 0 22px rgb(207, 47, 173);
  transform: translateY(-1px);
}

.nav a.active{
  background: linear-gradient(135deg,
    rgba(204, 73, 149, 0.55),
    rgba(110, 231, 255, 0.35)
  );

  box-shadow:
    0 0 14px rgba(204, 73, 149, 0.692),
    0 0 26px rgba(110, 231, 255, 0.5);

  color: rgba(255,255,255,0.95);
}

.nav.open{
  display:flex;
  position:absolute;
  right:5rem;
  top:64px;
  flex-direction:column;
  padding:.7rem;
  border:1px solid var(--border);
  border-radius:14px;
  background:rgba(11,12,16,.95);

}

@media (min-width: 800px){
  .navBtn{ display:none; }
  .nav{ display:flex; }
}

main{

  flex: 1 1 auto;                 /* fills leftover space */
  min-height: 0;                  /* important: allows shrinking so overflow can scroll */
  overflow-y: auto;          /* scroll here */
  overflow-x: hidden;                 /* only main scrolls */

  -ms-overflow-style: none;   /* IE/Edge legacy */
  scrollbar-width: none;      /* Firefox */
}

main::-webkit-scrollbar{
  width: 0;
  height: 0;                  /* Chrome/Safari */
}


.grid{
  display:grid;
  grid-template-columns: 1fr;
  gap:1rem;
}
@media (min-width: 900px){
  .grid{ grid-template-columns: repeat(3, 1fr); }
}

.card{
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--card);
  padding:1rem;
}

.btn{
  border:1px solid var(--border);
  background:rgba(124,92,255,.18);
  color:var(--fg);
  padding:.5rem .8rem;
  border-radius:999px;
  cursor:pointer;
  text-decoration:none;
  display:inline-block;
}
.btn.ghost{ background:transparent; }


/* Modal */
.modal[hidden]{ display:none; }
.modal{
  position:fixed; inset:0;
  display:grid; place-items:center;
  padding:1rem;
}
.backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.6); }
.panel{
  position:relative;
  width:min(520px, 100%);
  border:1px solid var(--border);
  background:rgba(11,12,16,.95);
  border-radius:14px;
  padding:1rem;
}
.x{
  position:absolute; right:.6rem; top:.6rem;
  border:1px solid var(--border);
  background:transparent;
  color:var(--fg);
  border-radius:10px;
  padding:.2rem .5rem;
  cursor:pointer;
}

main.right{
  position: relative;
  overflow: hidden;  
  display: flex;
  flex-direction: column;  /* stack box + buttons vertically */
  align-items: left;     /* center the whole main content */
  justify-content: flex-start;
  height: min(1080px, 100vh); 
}

.mainVideo{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.mainOverlay{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 1;
}

main.right .box,
main.right .btnRow{
  position: relative;
  z-index: 2;
}

main.right .box{
  width: min(520px, 100%);
  padding-top: 6rem; /* top margin for top*/
  margin-left: auto;   /* push to the far right */
  margin-right: 5rem;
  text-align: right; 
}

main.right .box h1{
  font-size: 4rem;  
  margin: 0;           /* kills all h1 margins */
  padding: 0;          /* kills the h1 padding from your global rule */
  line-height: 1;      /* tighter line box */
}
main.right .box p{
  margin: 0;           /* kills paragraph top margin */
  position: relative;
  left: -1.2rem;
  white-space: nowrap; /* for phone */
  font-size: 0.7rem; 
}
  @media (max-width: 480px){ 
  main.right .box p{
    font-size: 0.95rem;
    padding-left: clamp(10px, 1.6vw, 6rem);
  } /* for phone */
}


.btnRow .btn.ghost{
  display: inline-flex;
  align-items: center;
  gap: 2rem;
  color: var(--fg);
  text-decoration: none;
  padding: .35rem .7rem;
  border-radius: 20px;
  transition: background .4s ease, border-color .4s ease, transform .4s ease;
  border: 1px solid transparent;
}

.btnRow .btn.ghost:hover{
  background: color-mix(in srgb, var(--hbg) 35%, transparent);
  transform: translateX(20px) scale(1.2);
}
main.right .btnRow{
  font-size: 3rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  align-items: flex-start;
  margin-top: 9rem;

  width: fit-content;
  margin-left: clamp(0px, calc(min(100vw, 1920px) * 0.03), 6rem);
}

main.right .btnRow .btn{
  border: none;
  background: transparent; /* if you want pure text */
}

.pageWrap{
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;      /* center */
}

.container{
  width: 100%;
  max-width: 1920px;
  max-height: auto;
  margin: 0 auto;
  box-sizing: border-box;
  overflow: auto;
}

.pageWrap{ outline: 0px solid red; }
.container{ outline: 0px solid lime; }
.projectWrap{outline: 1px solid rgb(0, 195, 255); }
.architectureProjectCard-01{ outline: 1px solid rgb(255, 230, 0); }
.split{ outline: 0px solid lime; }
.projectsMain{ outline: 2px solid lime; }
main.right{ outline: 0px solid cyan; }




/*FOOTER*/

.footer{
  border-top: 1px solid var(--border);
  padding:  5px;
  color: var(--muted);
  min-height: 30px;
  display: flex;
  justify-content: center;   /* centers the inner row block */
  flex: 0 0 auto;
}

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

/* header / main / footer */


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





.footerRow{
  width: 100%;
  max-width: 1920px;         /* match your site cap */
  padding-inline: clamp(8px, 2vw, 40px);
  box-sizing: border-box;

  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;       /* vertical center */
  gap: 1rem;
}

.footerLeft{
  justify-self: start;
}

.footerEmail{
  justify-self: center;
  color: var(--muted);
  text-decoration: none;
}


.footerRight{
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 2rem;     /* more space between icons */
  flex-wrap: nowrap; /* prevent wrapping/overlap */
}

.footerEmail:hover{
  filter: drop-shadow(0 0 8px rgb(233, 231, 240));
}



.iconLink{
  width: 64px;
  height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;

  border: none;          /* remove boundary */
  background: transparent;
  border-radius: 0;      /* optional: remove rounding */

  transition: filter .35s ease-in-out; /* ✅ add this */
}

.iconLink:hover{
  filter: drop-shadow(0 0 8px rgba(149, 92, 255, 0.397));
}

.iconLink img{
  width: 54px;      /* was 40px */
  height: 54px;     /* was 40px */
  border: 0px solid var(--border);
  border-radius: 14px;  /* slightly rounder */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

/* Mobile: stack nicely */
@media (max-width: 600px){
  .footerRow{
    grid-template-columns: 1fr;
    align-items: center;
    text-align: center;
  }
  .footerLeft, .footerEmail, .footerRight{
    justify-self: center;
  }
  .footerRight{
    flex-wrap: wrap;
    justify-content: center;
  }
}


/*SPLIT CODE*/

.split{
  align-self: center;
  max-width: 1920px;
  height: 100%;
  overflow: auto;           /* prevent body/page scroll inside this area */
  display: grid;
  grid-template-columns: 3fr 7fr;

  background-image: url("assets/images/about-pg.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed; /* keeps background fixed (desktop) */
}
/* each panel scrolls separately */

/*icon*/


.profileIcon{
  width: 180px;
  height: 180px;
  margin-left: 60px;
  border-radius: 80%;     /* circle */
  overflow: hidden;       /* clip image to circle */
  display: inline-block;

  transition: transform .35s ease, box-shadow .35s ease, filter .35s ease;
  transform-origin: left center;
}


.profileIcon img{
  overflow: hidden;   
  object-position: left center; /* align the crop to left */
  width: 180px;
  height: 180px;
  object-fit: cover;
  margin-right: auto;
  display: inline-block;

  transform-origin: left center;
}
.profileIcon:hover{
  transform: translateY(-2px) scale(1.08);
  /* glow */
  box-shadow:
    0 0 10px rgba(112, 230, 210, 0.55),
    0 0 26px rgba(77, 165, 168, 0.479),
    0 0 60px rgba(9, 52, 63, 0.2);

  filter: brightness(1.05);

}

.leftPane .box1 {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  padding-top: 25px;

}

.leftPane
{
  border-right: 0;
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  align-items: center;  
  position: relative;
  padding: 0px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: rgba(0, 0, 0, 0.50); 

  /*deactivate the scroll bar*/
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* IE/Edge legacy */
}


/* overlays (won’t block scrolling) */
.leftPane::before{
 display: none;
}

/*scroll bar not working*/
.leftPane::-webkit-scrollbar,
.rightPane::-webkit-scrollbar{
  width: 0;
  height: 0;
  display: none;                /* Chrome/Safari */
}

.rightPane{
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;

  position: relative;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: rgba(0, 0, 0, 0.350);

  /*deactivate the scroll bar*/
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* IE/Edge legacy */
}

.rightPane::before{
  content: "";
  position: sticky;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}



.leftPane::before{ background: rgba(0,0,0,0.60); }
.rightPane::before{ background: rgba(0,0,0,0.12); }

/* keep content above overlay — NO overflow here */
.leftPane > *
{
  position: relative;
  z-index: 1;
}

.rightPane > *{
  position: relative;
  z-index: 1;
}



/* left pane buttons: vertical stack, left aligned */
.leftPane .btnRow{
  margin-left: -12px;
  margin-bottom: 50px;
  /*padding: -30px 0px 0px 0px;  /* top right bottom left */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px; /* spacing between buttons */
}

.leftPane .btnRow::before{
  margin-top: 0px;
  content:"";
  display: block;
  width: 100%;          /* line length */
  height: 1px;           /* line thickness */
  background: rgb(255, 255, 255);
}


/* optional: make each button fit its content (not full width) */
.leftPane .btnRow .btn{
  font-size: 3rem;
  width: fit-content;
}

.leftPane .btnRow::after{
  margin-top: 5px;
  content:"";
  display: block;
  width: 100%;          /* line length */
  height: 1px;           /* line thickness */
  background: rgb(255, 255, 255);
}


/*MYSTORY*/



.leftPane .myStory{
  padding-left: 70px;
  padding-right: 80px;
}

.leftPane .myStory h3{
  margin: 0 0 10px;
  text-align: left;
  font-size: 2.5rem;
  letter-spacing: .08em;
  color: rgb(255, 255, 255);
}

.leftPane .myStory h4{
  margin: 0 0 0px;
  text-align: left;
  font-size: 1.2rem;
  letter-spacing: 0;
  color: rgba(253, 142, 175, 0.95);
}

.leftPane .myStory .firstP{
  max-width: 500px;
  margin: 0 0 16px;
  text-align: justify;        /* fills both sides */
  text-justify: inter-word;
  font-size: 1rem;          
  line-height: 1.6;
  font-weight: 300;
  color: rgba(255,255,255,0.85);
}

.leftPane .myStory p{
  max-width: 500px;
  margin: 0 0 16px;
  text-align: justify;        /* fills both sides */
  text-justify: inter-word;
  font-size: 1rem;          
  line-height: 1.6;
  font-weight: 300;
  color: rgba(255,255,255,0.85);
}

.leftPane .myStory p { text-indent: 2em; }
.leftPane .myStory .firstP{
  text-indent: 0;
}

.bold{
  color: rgb(255, 255, 255);
  font-weight: 1000;
}

/*RIGHTPANE*/

.rightPane .box h1{
  font-size: 3rem;
  text-align: right;
  padding-top: 100px;
  padding-right: 180px;
  margin: 0;
}
.rightPane .bold2{
  color: rgb(255, 255, 255);
  font-weight: 600;
}

.rightPane .box .nameLine{
  width: 44%;
  height: 1.35px;
  background: rgb(255, 255, 255);

  margin: 0px 180px 0px auto; /* right padding = 180px, align right */
}

.rightPane .box p{
  font-size: .85rem;
  margin: 4px 0 0;           /* kills paragraph top margin */
  text-align: right;
  padding-top: 0px;
  padding-right: 180px;
  margin-left: 0;
}

/*introduction*/

.rightPane .box .intro{

  font-size: 1.5rem;
  font-weight: 300; 

  margin-left: auto;        /* keep the block on the right side */
  max-width: 60ch;

  text-align: justify;      /* justify both sides */
  text-justify: inter-word;

  line-height: 1.6;
  color: rgb(255, 255, 255);

  padding-right: 180px;
  padding-left: 0;
}



/*BIOGRAPHY*/
.rightPane .bioTitle{
  padding-right: 180px; 
  position: relative;
  margin: 100px 0 0 0;
  padding-left: 10px;   /* increase to push more right; decrease to push left */
  text-align: left;
  font-size: 2.5rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: rgba(255,255,255,0.95);
}

.rightPane .bioTitle::after{
  content:"";
  display: block;
  width: 100%;          /* line length */
  height: 1px;           /* line thickness */
  background: rgb(255, 255, 255);
}



/* card-like buttons */
.rightPane .linkGrid{
  margin-top: 0px;
  padding-right: 180px;          /* match your right offset */
  display: grid;
  grid-template-columns: repeat(3, minmax(140px, 1fr));
  gap: 14px;
  justify-content: end;          /* keep the grid on the right side */
  align-content: start;
}

.rightPane .linkCard{
  text-decoration: none;
  height: 140px; 
  color: rgba(255,255,255,0.95);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 16px;
  padding: 14px 14px 12px;
  transition: transform .25s ease, border-color .25s ease;

  position: relative;
  overflow: hidden;

  background-image: var(--bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* dark overlay so text stays readable */
.rightPane .linkCard::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0, 0, 0, 0.589);   /* faint image */
  transition: background .25s ease; /* smooth both directions */
  pointer-events:none;
}

/* keep text above the overlay */
.rightPane .linkCard > *{
  position: relative;
  z-index: 1;
}

.rightPane .linkCard:hover{
  transform: translateY(-2px);
  border-color: rgba(0, 0, 0, 0.274);
}

/* optional: hover brighten image */
.rightPane .linkCard:hover::before{
  background: rgba(3, 3, 3, 0.329);  /* lighter = image looks stronger */
}

.rightPane .linkTitle{
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .02em;
}

.rightPane .linkDesc{
  margin-top: 6px;
  font-size: .85rem;
  font-weight: 300;
  line-height: 1.35;
  color: rgba(255,255,255,0.78);
}


/*EDUCATION& WORKING EXPERIENCE*/
.rightPane .resumeBlock{
  margin-top: 0px;
  padding-right: 180px;  /* match your right content offset */
}

.rightPane .resumeTitle{
  text-align: left;
  margin: 100px 0 10px;
  font-size: 2.5rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: rgba(255,255,255,0.95);
}

.rightPane .resumeTitle::after{
  content:"";
  display: block;
  width: 100%;          /* line length */
  height: 1px;           /* line thickness */
  background: rgb(255, 255, 255);
}


.rightPane .resumeHead{
  display: flex;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.rightPane.resumeHead.highlight{
  padding-left: 12px;
  border-left: 3px solid rgba(255,255,255,0.35);
}

.rightPane .resumeRole{
  font-weight: 600;
  color: rgba(255,255,255,0.92);
}

.rightPane .resumeTime{
  font-weight: 450;
  color: rgb(255, 255, 255);
}


.rightPane .resumeDesc{
  margin: 0px 0 36px;
  font-weight: 300;
  line-height: 1;
  color: rgba(255,255,255,0.80);
}



/*CONTACT*/

.rightPane .contactBlock .resumeTitle{
  text-align: right;
}

.rightPane .contactBlock .resumeTitle::after{
  margin-left: auto;
  content:"";
  display: block;
  width: 20%;          /* line length */
  height: 1px;           /* line thickness */
  background: rgb(255, 255, 255);
}

/* bigger value text (email + tel) */
.rightPane .contactLink{
  font-size: 1rem;     /* adjust */
  font-weight: 300;      /* optional */
  color: #fff;
}

/* keep label a bit smaller (optional) */
.rightPane .contactLabel{
  font-size: 1.5rem;
  font-weight: 400;
  color: rgb(255, 255, 255);
}

/* more space between Email row and Tel row */
.rightPane .contactRow{
  text-align: right;
  padding-top: 5px;
  margin-bottom: 20px;   /* gap between the two rows */
}

.rightPane .contactRow:last-child{
  margin-bottom: 60px;
}




/* mobile: stack */
@media (max-width: 900px){
  .split2{ grid-template-columns: 1fr; }
  .leftPane{
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }
}


/* responsive: stack on small screens */
@media (max-width: 900px){
  .split{
    grid-template-columns: 1fr;
  }
  .leftPane{
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }
}









/*PROJECTS*/

.projectsTitle{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;                 /* space between text and lines */
  text-align: center;
}

.projectsTitle .tMain{
  padding-left: 50px;
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-style: italic;
  font-size: 4rem;
  color: rgba(255,255,255,0.95);
  font-weight: 500;
  letter-spacing: 0.01em;
}

.projectsTitle .tMain .bigP{
  font-size: 5rem;   /* bigger than the rest of PROJECTS */
  line-height: 1;
  display: inline-block;
}

.projectsTitle .tSub{
  padding-top: 30px;
  font-size: 1.4rem;
  color: rgba(190, 201, 42, 0.596);
  font-weight: 320;
  font-style: italic;
  letter-spacing: 0.01em;
  margin-left: 0px;   /* space between the two */
}




/* 5) LINES (a line under the title) */
.projectsTitle::before,
.projectsTitle::after{
  content: "";
  height: 0.1px;
  background: rgb(255,255,255);
  flex: 1;                   /* lines expand */
  max-width: 33%;          /* optional: cap line length */
  opacity: 1;
}

.grid{
  display: grid;
  box-sizing: border-box;  
  padding-right: 50px;   
  padding-left: 50px;   
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;

  column-gap: 30px;
  row-gap: 40px;
}

/*Grid frame*/



/* button that contains image */

.projectCard::before{
  content:"";
  position:absolute;
  inset:0;

  /* gradient stays the same */
  background: radial-gradient(circle at center,
    rgba(0,0,0,0.15) 0%,
    rgba(0, 0, 0, 0.98) 85%);

  opacity: 0;                       /* hidden by default */
  transition: opacity .45s ease;    /* <-- slower fade */
  z-index: 1;
  pointer-events: none;
}

.projectCard{
  position: relative;
  overflow: hidden;
  border-radius: 5px;
  padding: 0;
  border: 0;
  width: 100%;
  cursor: pointer;
  text-align: left;
  height: 300px;

  /* background image */
  background-image: var(--bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;


  transition: transform .45s ease, opacity .45s ease;
  /* control card size (crop comes from size) */
}

.projectCard:hover{
  transform: translateY(-10px);
}


.projectCard:hover::before,
.projectCard:focus-visible::before{
  opacity: 1;                       /* fade in */
}


.projectCard .cardContent{
  position: absolute;
  inset: 0;
  z-index: 2;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  height: auto;          /* important */
  padding: 0px;
  gap: 0px;
}




/* h2 styling */
.projectCard .cardContent h2{
  position: relative;
  padding-top:70px;
  
  margin: -30px;
  text-align: center;
  font-size: 3.4rem;        /* size */
  font-weight: 700;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.95);  /* color */

  transition: transform .45s ease;
  will-change: transform;
}

.projectCard:hover .cardContent h2,
.projectCard:focus-visible .cardContent h2{
  transform: translateY(-20px); /* adjust hop amount */
}

.projectCard .cardContent .h2-arch{
transition: .45s ease-in-out;  /* adjust time */
font-size: 3.4rem;
letter-spacing: 0em;  }

.projectCard:hover .h2-arch{ color:#c04444; }


.projectCard .cardContent p{
  margin: 10px;
  padding: 0 90px;

  font-size: 1.15rem;
  font-style: italic;
  font-weight: 200;
  color: rgba(255, 255, 255, 0.932);
  transform: translateY(-10px);
}

.projectCard .cardContent p::before{
  position: relative;
  content: "";
  display: block;
  width: min(430px, 115%);   /* long, but responsive */
  height: 2px;

  margin: 10px -10px 10px;        /* small space ABOVE line */
  /* no bottom margin, so it touches the <p> */
  background: rgb(255, 255, 255);

}

.projectCard:hover .cardContent p,
.projectCard:focus-visible .cardContent p{
  transform: translateY(0);
  opacity: 1;
}



.projectCard .cardContent p{
  margin: 0;
  text-align: left;
  transform: translateY(140%);
  opacity: 0;
  transition: transform .45s ease, opacity .45s ease;
  will-change: transform;
}

.projectCard:hover .cardContent p,
.projectCard:focus-visible .cardContent p{
  transform: translateY(0);
  opacity: 1;
}


.projectCard:focus-visible{
  outline: 2px solid color-mix(in srgb, var(--fg) 35%, transparent);
  outline-offset: 3px;
}




/*LINES*/
.lineQuote{
  margin: 100px 0;
  padding: 0 50px;
  text-align: center;

  font-size: 2.5rem;
  font-weight: 300;
  font-style: italic;
  letter-spacing: 0.10em;
  color: rgba(255,255,255,0.9);

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
}

/* lines left and right */
.lineQuote::before,
.lineQuote::after{
  content: "";
  height: 0.1px;
  background: rgb(255,255,255);
  flex: 1;                   /* lines expand */
  max-width: 50%;          /* optional: cap line length */
  opacity: 1;
}


/*photo*/

.photoMosaic{
  display: flex;
  flex-direction: column;
  gap: 50px;                 /* distance between rows */
  padding: 0px 50px ;           /* optional page side padding */
}

/* shared row behavior */
.photoRow{
  display: grid;
  column-gap: 20px;          /* gap between photos */
  height: 935px;             /* row height */
}

/* Row templates */
.photoRow.r3{
  grid-template-columns: 710px 535px 535px;
}

.photoRow.r2{
  grid-template-columns: 520px 1280px;
}

/* tiles/images */
.tile{
  margin: 0;
  height: 100%;
  overflow: hidden;
  border-radius: 5px;
  background: rgba(255,255,255,0.06); /* shows if image doesn't fill */
}

.tile img{
  width: 100%;
  height: 100%;
  display: block;

  object-fit: cover;    /* fills the box; keeps proportion; may crop */
  /* If you want to show full image instead (no crop), use:
     object-fit: contain;
  */
}

.photoMosaic{ overflow-x: auto; }
.photoRow{ min-width: 1820px; } /* for r3 rows */









/*ALL PROJECTS*/

/* page shell */
.projectsPage{
  min-height: 100vh;
  margin: 0;
  background: var(--bg, #07070b);
  color: var(--fg, rgba(255,255,255,.92));
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
}

.siteHeader{
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  background: rgba(10,10,14,.75);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.brand{
  color: var(--fg);
  text-decoration: none;
  letter-spacing: .08em;
}

.nav a{
  color: rgba(255,255,255,.75);
  text-decoration: none;
  padding: 8px 10px;
  border-radius: 999px;
  transition: transform .25s ease, background .25s ease, filter .25s ease;
}

.nav a:hover{
  background: linear-gradient(90deg, rgba(144, 117, 255, 0.164), rgba(211, 98, 164, 0.158));
  transform: translateY(-1px);
  filter: drop-shadow(0 0 10px rgba(124,92,255,.25));
}

.nav a.active{
  background: linear-gradient(90deg, rgba(124,92,255,.35), rgba(204,73,149,.28));
  border: 1px solid rgba(255,255,255,.12);
  filter: drop-shadow(0 0 14px rgba(124,92,255,.35));
}

/* main scroll area */
.projectsMain{
  padding-left: 40px;
  padding-right: 40px;
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
}

.categoryHero{
  padding: 10px 0 22px;
  border-bottom: 5px solid rgba(255,255,255,.08);
  margin-bottom: 22px;
}

.categoryHero h1{
  margin: 0 0 8px;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  letter-spacing: .06em;
}


/* project cards */
.projectCard2{
  gap: 18px;
  padding: 18px;
  margin: 18px 0;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(37, 37, 37, 0.473);
}

.projectMeta h2{
  margin: 0 0 10px;
  font-size: 2rem;
}

.projectDesc{
  margin: 0 0 12px;
  color: rgba(255,255,255,.78);
  line-height: 1.65;
}

.projectTags{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.projectTags li{
  font-size: .85rem;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.72);
  background: rgba(0,0,0,.18);
}

/* media */
.projectMedia img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
}

.imgGrid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.videoWrap{
  display: flex;
  justify-content: center;  /* ✅ horizontal center */
  margin-top: 10px;
  border-radius: 14px;
  overflow: hidden;
  border: 3px solid rgba(78, 78, 78, 0.1);
}

.videoWrap video,
.videoWrap iframe{
  width: 100%;
  max-width: 980px;
  aspect-ratio: 16 / 9;
  display: block;
  margin: 0 auto;
}

/* footer */
.siteFooter{
  padding: 18px;
  color: rgba(255,255,255,.55);
  border-top: 1px solid rgba(255,255,255,.08);
  text-align: center;
}


/*PROJECT LABLES*/
/* top category buttons */
.categoryHero.categoryNav{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  padding: 18px 0 22px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.catBtn{
  display: grid;
  place-items: center;
  text-decoration: none;
  color: rgba(255,255,255,.86);

  padding: 36px 28px;
  border-radius: 10px;

  background: rgba(255,255,255,.04);

  font-size: clamp(1.5rem, 2vw, 1.5rem);
  letter-spacing: .08em;
  text-transform: uppercase;

  transition: transform .35s ease, background .35s ease, filter .35s ease, border-color .35s ease;
}

.catBtn:hover{
  transform: translateY(-3px);
  background: rgba(255,255,255,.07);
  filter: drop-shadow(0 0 14px rgba(124,92,255,.30));
  border-color: rgba(255,255,255,.18);
}

.catBtn.isActive:hover{
  border-color: color-mix(in srgb, rgb(255, 255, 255) 40%, transparent);
  background: linear-gradient(135deg,
    rgba(204, 73, 149, 0.35),
    rgba(110, 231, 255, 0.22)
  );
  transform: translateY(-3px);
}

.catBtn.isActive{
  background: linear-gradient(135deg,
    rgba(189, 32, 123, 0.35),
    rgba(110, 231, 255, 0.22));
  box-shadow:
    0 0 6px rgb(78, 182, 201),
    0 0 12px rgb(207, 47, 173);
  filter: drop-shadow(0 0 16px rgba(124,92,255,.38));
  transform: translateY(-1px);
}


/*CHARACTER*/
/*PROJECT_01*/
/*CHARACTER_01*/
.chLayout-01{
  width: 100%;
  max-width: 980px;
  max-height:1040px;
  margin: 20px 0 20px;
  display: grid;
  grid-template-columns: 59.6939% minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.chLayout-01 .imgLeft{
  width: 100%;
  height: 1040px;
  object-fit: cover;
  display: block;
}

.chLayout-01 .rightCol{
  width:100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.chLayout-01 .imgRight{
  width: 100%;
  height: 560px;
  object-fit: cover;
  display: block;
}

.chLayout-01 .projectDesc{
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: none;

  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;           /* helps justification look better */
  line-height: 1.7;
}

/*CHARACTER_02*/
.chLayout-02{
  width: 100%;
  max-width: 980px;
  max-height:1040px;
  margin: 20px 0 20px;                /* center the whole frame */
  display: grid;
  grid-template-columns: 38.7755% minmax(0, 1fr); /* exact columns */
  gap: 10px;
  align-items: start;
  box-sizing: border-box;

}

/* left column stack: small image + text */
.chLayout-02 .leftCol{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* left small image */
.chLayout-02 .imgLeft{
  width: 100%;
  height: 560px;
  object-fit: cover;
  display: block;
}

/* text under left image */
.chLayout-02 .projectDesc{
  margin: 12px 0 0;
  width: 100%;            /* match the small image */
  max-width: none;
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  line-height: 1.7;
}

.chLayout-02 .imgRight{
  width: 100%;
  height: 1040px;
  object-fit: cover;
  display: block;
}

/*CHARACTER_03*/
.chLayout-03{
  width: 100%;
  max-width: 980px;
  max-height:1040px;
  margin: 20px 0 20px;
  display: grid;
  grid-template-columns: 59.6939% minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.chLayout-03 .imgLeft{
  width: 100%;
  height: 1040px;
  object-fit: cover;
  display: block;
}

.chLayout-03 .rightCol{
  width:100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.chLayout-03 .imgRight{
  width: 100%;
  height: 560px;
  object-fit: cover;
  display: block;
}

.chLayout-03 .projectDesc{
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: none;

  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;           /* helps justification look better */
  line-height: 1.7;
}


/*CHARACTER_04*/
.chLayout-04{
  width: 100%;
  max-width: 980px;
  margin: 20px 0 20px;
  display: grid;
  grid-template-columns: 59.6939% minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.chLayout-04{
  width: 100%;
  max-width: 980px;
  max-height:1040px;
  margin: 20px 0 20px;                /* center the whole frame */
  display: grid;
  grid-template-columns: 38.7755% minmax(0, 1fr); /* exact columns */
  gap: 10px;
  align-items: start;
  box-sizing: border-box;

}

/* left column stack: small image + text */
.chLayout-04 .leftCol{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* left small image */
.chLayout-04 .imgLeft{
  width: 100%;
  height: 560px;
  object-fit: cover;
  display: block;
}

/* text under left image */
.chLayout-04 .projectDesc{
  margin: 12px 0 0;
  width: 100%;            /* match the small image */
  max-width: none;
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  line-height: 1.7;
}

.chLayout-04 .imgRight{
  width: 100%;
  height: 1040px;
  object-fit: cover;
  display: block;
}



/* right large image */
/*CRAFT*/
/*PROJECT_01*/
.ProjectCard{
  box-sizing: border-box;
  width: 100%;
  max-width: 980px;
  margin: 18px auto;
  display: flex;
  flex-direction: column;
  align-items: center;

  /* baseline (important for smooth un-hover) */
  transform: translateY(0);
  border-color: rgba(255,255,255,0.12);
  box-shadow:
    0 18px 50px rgba(0,0,0,0.45),
    0 1px 0 rgba(255,255,255,0.05) inset;

  /* smooth both directions */
  transition:
    transform 750ms cubic-bezier(.16, 1, .3, 1),
    box-shadow 1200ms cubic-bezier(.16, 1, .3, 1),
    border-color 1000ms cubic-bezier(.16, 1, .3, 1);
  will-change: transform, box-shadow;


  /* decoration */
  padding: clamp(18px, 2.2vw, 28px);
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(5, 5, 5, 0.295);
  box-shadow:
    0 0 30px  rgba(0,0,0,0.45),
    0 0 5px rgba(255,255,255,0.05) inset;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* subtle glow on hover */
.ProjectCard:hover{
  border-color: rgba(124,92,255,0.45);
  box-shadow:
    0 0 30px rgba(0,0,0,0.55),
    0 0 25px  rgba(124,92,255,0.18) inset,
    0 0 20px rgba(124,92,255,0.20);
  transform: translateY(-0px);

}

/* optional: a thin gradient “top edge” highlight */
.ProjectCard::before{
  content:"";
  width: 100%;
  height: 1px;
  display: block;
  margin-bottom: 14px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(124,92,255,0.55),
    rgba(204,73,149,0.45),
    transparent
  );
  opacity: .9;
}

.ProjectCard::after{
  content:"";
  width: 100%;
  height: 1px;
  display: block;
  margin-bottom: 14px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(124,92,255,0.55),
    rgba(204,73,149,0.45),
    transparent
  );
  opacity: .9;
}


.ProjectCard .projectMeta{
  width: 100%;
  max-width: 980px;            /* readable text width */
  margin: 0 auto;              /* center text block */
  text-align: left;   /* uncomment if you want centered text */
}

.ProjectCard .projectHead{
  padding: 20px 0 0;
  font-size: 2rem;
  letter-spacing: .04em;
  line-height: 1.15;
}

.ProjectCard .projectDesc{
  padding: 20px 0 20px;
  max-width:100%;
  text-align: left;
}

.ProjectCard .projectMeta .craftImageWrap-01-01 img{
  width: 100%;
  max-width: 980px;
  margin: 0 auto; /* center */
}

.ProjectCard .projectMeta .craftImageWrap-01-02{
  position: relative;
  width: 100%;
  max-width: 980px;
  margin: 0 auto;

  aspect-ratio: 980 / 505;   /* correct: width / height */
  overflow: hidden;
}

.ProjectCard .projectMeta .craftImageWrap-01-02 > img{
  position: absolute;
  display: block;
  object-fit: cover;
}

/* each tile width = 320/980 = 32.6531% */
.ProjectCard .projectMeta .craftImageWrap-01-02 > img:nth-child(1){
  left: 0%;
  top: 0%;
  width: 32.6531%;
  height: 100%;
}

/* left = (320+10)/980 = 33.6735% */
.ProjectCard .projectMeta .craftImageWrap-01-02 > img:nth-child(2){
  left: 33.6735%;
  top: 0%;
  width: 32.6531%;
  height: 100%;

  object-fit: cover;
  object-position: center 0%; /* smaller % shows more TOP (moves image "up") */
  transform: none;             /* important */
}

/* left = (320+10+320+10)/980 = 67.3469% */
.ProjectCard .projectMeta .craftImageWrap-01-02 > img:nth-child(3){
  left: 67.3469%;
  top: 0%;
  width: 32.6531%;
  height: 100%;
}

/*PROJECT_02*/

.craftImageWrap-02-01{
  position: relative;
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  height: 480px;          /* your target height */
  overflow: hidden;
}

.craftImageWrap-02-01 > img{
  position: absolute;
  display: block;
  height: 100%;
  object-fit: cover;
}

/* ---------- Row: 640 - 10 - 330, height 480 ---------- */
.craftImageWrap-02-01 > img:nth-child(1){
  left: 0%;
  top: 0%;
  width: 65.3061%;   /* 640/980 */
}

.craftImageWrap-02-01 > img:nth-child(2){
  left: 66.3265%;    /* (640+10)/980 */
  top: 0%;
  width: 33.6735%;   /* 330/980 */

  object-position: center 0%; /* optional */
  transform: none;
}


/*PROJECT_03*/

.craftImageWrap-03-01{
  position: relative;
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  height: 850px;          /* your target height */
  overflow: hidden;
}

.craftImageWrap-03-01 > img{
  position: absolute;
  display: block;
  height: 100%;
  object-fit: cover;
}

/* ---------- Row: 485 - 10 - 485, height 980 ---------- */
.craftImageWrap-03-01 > img:nth-child(1){
  left: 0%;
  top: 0%;
  width: 49.4897%;   /* 485/980 */
}

.craftImageWrap-03-01 > img:nth-child(2){
  left: 50.5102%;    /* (485+10)/980 */
  top: 0%;
  width: 49.4897%;   /* 330/980 */

  object-position: center 0%; /* optional */
  transform: none;
}

.craftImageWrap-03-02{
  position: relative;
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  height: 1165px;          /* your target height */
  overflow: hidden;
}

.craftImageWrap-03-02 > img{
  position: absolute;
  display: block;
  height: 100%;
  object-fit: cover;
}

/* ---------- Row: 485 - 10 - 485, height 980 ---------- */
.craftImageWrap-03-02 > img:nth-child(1){
  left: 0%;
  top: 0%;
  width: 100%;   /* 980/980 */
  height: 43.7768% ;   /* 510/1165 */
  
}

.craftImageWrap-03-02 > img:nth-child(2){
  left: 0%;    /* 0/980 */
  top: 44.6352%;      /*（510+10)/1165*/
  width: 24.2347%;   /* 237.5/980 */
  height: 35.6223% ;  /* 415/1165 */

}

.craftImageWrap-03-02 > img:nth-child(3){
  left: 25.2551%;    /* （237.5+10)/980 */
  top: 44.6352%;      /*（510+10)/1165*/
  width: 24.2347%;   /* 237.5/980 */
  height: 35.6223% ;  /* 415/1165 */


}

.craftImageWrap-03-02 > img:nth-child(4){
  left: 50.5102%;    /* （237.5+10+237.5+10)/980 */
  top: 44.6352%;      /*（510+10)/1165*/
  width: 24.2347%;   /* 237.5/980 */
  height: 35.6223% ;  /* 415/1165 */
}

.craftImageWrap-03-02 > img:nth-child(5){
  left: 75.7653%;    /* （237.5+10+237.5+10+237.5+10)/980 */
  top: 44.6352%;      /*（510+10)/1165*/
  width: 24.2347%;   /* 237.5/980 */
  height: 35.6223% ;  /* 415/1165 */
}

.craftImageWrap-03-02 > img:nth-child(6){
  left: 0%;    /* 0/980 */
  top: 81.1159%;           /* (510+10+415+10)/1165 */
  width: 100%;   /* 980/980 */
  height: 18.8841% ;   /* 220/1165 */

  object-position: center 65%;  /* smaller % = show more TOP */
}


/*PROJECT_04*/
.craftImageWrap-04-01{
  position: relative;
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  height: 1185px;          /* your target height */
  overflow: hidden;
}

.craftImageWrap-04-01 > img{
  position: absolute;
  display: block;
  height: 100%;
  object-fit: cover;
}

/* ---------- Row: 485 - 10 - 485, height 375 ---------- */
.craftImageWrap-04-01 > img:nth-child(1){
  left: 0%;
  top: 0%;
  width: 49.4898%;   /* 485/980 */
  height: 31.6456% ;   /* 375/1185 */
  
}

.craftImageWrap-04-01 > img:nth-child(2){
  left: 50.5102%;    /* （485 + 10）/980 */
  top: 0%;      /*（375+10)/1185*/
  width: 49.4898%;   /* 485/980 */
  height: 31.6456%;  /* 375/1185 */

}

.craftImageWrap-04-01 > img:nth-child(3){
  left: 0%;            /* 0/980 */
  top: 32.4895%;      /*（375+10)/1185*/
  width: 100%;   /* 980/980 */
  height: 37.9747% ;  /* 450/1185 */

}

.craftImageWrap-04-01 > img:nth-child(4){
  left: 0%;           /* 0/980 */
  top: 71.3080%;      /*（375+10+450+10)/1185*/
  width: 32.6531%;   /* 320/980 */
  height: 28.6920% ;  /* 340/1185 */
}

.craftImageWrap-04-01 > img:nth-child(5){
  left: 33.6735%;    /* （320+10）/980 */
  top: 71.3080%;     /*（375+10+450+10)/1185*/
  width: 32.6531%;   /* 320/980 */
  height: 28.6920% ;  /* 340/1185 */
}

.craftImageWrap-04-01 > img:nth-child(6){
  left: 67.3269%;    /* （320+10+320+10）/980 */
  top: 71.3080%;      /*（375+10+450+10)/1185*/
  width: 32.6531%;   /* 320/980 */
  height: 28.6920% ;  /* 340/1185 */
}

/*ARCHITECTURE*/
/*PROJECT_01*/
.projectWrap{
  width: 100%;
  display: column;
  justify-content: center;     /* center the card */
}

.architectureProjectCard-01{
  width: 100%;
  max-width: 980px;
  margin: 18px auto;
  display: flex;
  flex-direction: column;
  align-items: center;

  /* baseline (important for smooth un-hover) */
  transform: translateY(0);
  border-color: rgba(255,255,255,0.12);
  box-shadow:
    0 18px 50px rgba(0,0,0,0.45),
    0 1px 0 rgba(255,255,255,0.05) inset;

  /* smooth both directions */
  transition:
    transform 750ms cubic-bezier(.16, 1, .3, 1),
    box-shadow 1200ms cubic-bezier(.16, 1, .3, 1),
    border-color 1000ms cubic-bezier(.16, 1, .3, 1);
  will-change: transform, box-shadow;


  /* decoration */
  padding: clamp(18px, 2.2vw, 28px);
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(5, 5, 5, 0.295);
  box-shadow:
    0 0 30px  rgba(0,0,0,0.45),
    0 0 5px rgba(255,255,255,0.05) inset;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* subtle glow on hover */
.architectureProjectCard-01:hover{
  border-color: rgba(124,92,255,0.45);
  box-shadow:
    0 0 30px rgba(0,0,0,0.55),
    0 0 25px  rgba(124,92,255,0.18) inset,
    0 0 20px rgba(124,92,255,0.20);
  transform: translateY(-0px);

}

/* optional: a thin gradient “top edge” highlight */
.architectureProjectCard-01::before{
  content:"";
  width: 100%;
  height: 1px;
  display: block;
  margin-bottom: 14px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(124,92,255,0.55),
    rgba(204,73,149,0.45),
    transparent
  );
  opacity: .9;
}


.architectureProjectCard-01 .projectMeta{
  width: 100%;
  max-width: 980px;            /* readable text width */
  margin: 0 auto;              /* center text block */
  text-align: left;   /* uncomment if you want centered text */
}

.architectureProjectCard-01 .projectHead{
  padding: 20px 0 0;
  font-size: 2rem;
  letter-spacing: .04em;
  line-height: 1.15;
}

.architectureProjectCard-01 .projectDesc{
  padding: 20px 0 20px;
  max-width:100%;
  text-align: left;
}



.projectTags{
  align-items: left;
  list-style: none;
  padding:0px 0 20px;             /* ✅ removes the UL left indent */        
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/*PROJECT_02*/

.architectureProjectCard-02{
  width: 100%;
  max-width: 980px;
  margin: 18px auto;
  display: flex;
  flex-direction: column;
  align-items: center;

  /* baseline (important for smooth un-hover) */
  transform: translateY(0);
  border-color: rgba(255,255,255,0.12);
  box-shadow:
    0 18px 50px rgba(0,0,0,0.45),
    0 1px 0 rgba(255,255,255,0.05) inset;

  /* smooth both directions */
  transition:
    transform 750ms cubic-bezier(.16, 1, .3, 1),
    box-shadow 1200ms cubic-bezier(.16, 1, .3, 1),
    border-color 1000ms cubic-bezier(.16, 1, .3, 1);
  will-change: transform, box-shadow;


  /* decoration */
  padding: clamp(18px, 2.2vw, 28px);
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(5, 5, 5, 0.295);
  box-shadow:
    0 0 30px  rgba(0,0,0,0.45),
    0 0 5px rgba(255,255,255,0.05) inset;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* subtle glow on hover */
.architectureProjectCard-02:hover{
  border-color: rgba(124,92,255,0.45);
  box-shadow:
    0 0 30px rgba(0,0,0,0.55),
    0 0 25px  rgba(124,92,255,0.18) inset,
    0 0 20px rgba(124,92,255,0.20);
  transform: translateY(-0px);

}

/* optional: a thin gradient “top edge” highlight */
.architectureProjectCard-02::before{
  content:"";
  width: 100%;
  height: 1px;
  display: block;
  margin-bottom: 14px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(124,92,255,0.55),
    rgba(204,73,149,0.45),
    transparent
  );
  opacity: .9;
}

.architectureProjectCard-02 .projectMeta{
  width: 100%;
  max-width: 980px;            /* readable text width */
  margin: 0 auto;              /* center text block */
  text-align: left;   /* uncomment if you want centered text */
}

.architectureProjectCard-02 .projectHead{
  padding: 20px 0 0;
  font-size: 2rem;
  letter-spacing: .04em;
  line-height: 1.15;
}

.architectureProjectCard-02 .projectDesc{
  padding: 20px 0 20px;
  max-width:100%;
  text-align: left;
}

.architectureProjectCard-02 .imageWrap-01 img{
  width: 100%;
  max-width: 980px;
  margin: 0 auto; /* center */
}


.architectureProjectCard-02 .imageWrap-02{
  width: 100%;
  max-width: 980px;
  box-sizing: border-box;
  margin: 0 auto;

  display: grid;
  grid-template-columns: 520px 1fr; /* right side auto fits */
  grid-template-rows: 295px 295px;
  gap: 10px;

  /* if you have these, they won't push it larger anymore */
  /* padding: 10px; */
  /* border: 1px solid rgba(255,255,255,.12); */
  overflow: hidden;        /* extra safety */
}

.architectureProjectCard-02 .imageWrap-02 img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
/* 1st image: left top */
.imageWrap-02 img:nth-child(1){
  grid-column: 1;
  grid-row: 1;
}

/* 2nd image: left bottom */
.imageWrap-02 img:nth-child(2){
  grid-column: 1;
  grid-row: 2;
}

/* 3rd image: right, spans two rows */
.imageWrap-02 img:nth-child(3){
  grid-column: 2;
  grid-row: 1 / span 2;
}

.architectureProjectCard-02 .imageWrap-03 img{
  width: 100%;
  max-width: 980px;
  margin: 0 auto; /* center */
}

/*PROJECT_03*/
.architectureProjectCard-03{
  width: 100%;
  max-width: 980px;
  margin: 18px auto;
  display: flex;
  flex-direction: column;
  align-items: center;

  /* baseline (important for smooth un-hover) */
  transform: translateY(0);
  border-color: rgba(255,255,255,0.12);
  box-shadow:
    0 18px 50px rgba(0,0,0,0.45),
    0 1px 0 rgba(255,255,255,0.05) inset;

  /* smooth both directions */
  transition:
    transform 750ms cubic-bezier(.16, 1, .3, 1),
    box-shadow 1200ms cubic-bezier(.16, 1, .3, 1),
    border-color 1000ms cubic-bezier(.16, 1, .3, 1);
  will-change: transform, box-shadow;


  /* decoration */
  padding: clamp(18px, 2.2vw, 28px);
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(5, 5, 5, 0.295);
  box-shadow:
    0 0 30px  rgba(0,0,0,0.45),
    0 0 5px rgba(255,255,255,0.05) inset;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* subtle glow on hover */
.architectureProjectCard-03:hover{
  border-color: rgba(124,92,255,0.45);
  box-shadow:
    0 0 30px rgba(0,0,0,0.55),
    0 0 25px  rgba(124,92,255,0.18) inset,
    0 0 20px rgba(124,92,255,0.20);
  transform: translateY(-0px);

}

/* optional: a thin gradient “top edge” highlight */
.architectureProjectCard-03::before{
  content:"";
  width: 100%;
  height: 1px;
  display: block;
  margin-bottom: 14px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(124,92,255,0.55),
    rgba(204,73,149,0.45),
    transparent
  );
  opacity: .9;
}

.architectureProjectCard-03 .projectMeta{
  width: 100%;
  max-width: 980px;            /* readable text width */
  margin: 0 auto;              /* center text block */
  text-align: left;   /* uncomment if you want centered text */
}

.architectureProjectCard-03 .projectHead{
  padding: 20px 0 0;
  font-size: 2rem;
  letter-spacing: .04em;
  line-height: 1.15;
}

.architectureProjectCard-03 .projectDesc{
  padding: 20px 0 20px;
  max-width:100%;
  text-align: left;
}

/* wrapper scales to fit inside the padded card */
.architectureProjectCard-03 .architectureProjectMedia .imageWrap-01{
  position: relative;
  width: 100%;
  max-width: 980px;
  margin: 0 auto;

  aspect-ratio: 980 / 1095;  /* keeps the whole collage proportional */
  overflow: hidden;

}

/* all images fill their assigned boxes */
.architectureProjectCard-03 .architectureProjectMedia .imageWrap-01 > img{
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Row 1 (height 375/1095 = 34.2466%) */
.architectureProjectCard-03 .imageWrap-01 > img:nth-child(1){
  left: 0%;
  top: 0%;
  width: 58.1633%;   /* 570/980 */
  height: 34.2466%;  /* 375/1095 */
}
.architectureProjectCard-03 .imageWrap-01 > img:nth-child(2){
  left: 59.1837%;    /* 580/980 */
  top: 0%;
  width: 40.8163%;   /* 400/980 */
  height: 34.2466%;
}

/* Row 2 (top 385/1095 = 35.1598%, height 540/1095 = 49.3151%) */
.architectureProjectCard-03 .imageWrap-01 > img:nth-child(3){
  left: 0%;
  top: 35.1598%;
  width: 18.8776%;   /* 185/980 */
  height: 49.3151%;
}
.architectureProjectCard-03 .imageWrap-01 > img:nth-child(4){
  left: 19.8980%;    /* 195/980 */
  top: 35.1598%;
  width: 48.9796%;   /* 480/980 */
  height: 49.3151%;

  object-fit: cover;
  object-position: 45% center; /* move content right; try 60%~90% */
}
.architectureProjectCard-03 .imageWrap-01 > img:nth-child(5){
  left: 69.8980%;    /* 685/980 */
  top: 35.1598%;
  width: 30.1020%;   /* 295/980 */
  height: 49.3151%;

  object-fit: cover;
  object-position: 40% center; /* move content right; try 60%~90% */
}


/* Row 3 (top 935/1095 = 85.3881%, height 160/1095 = 14.6119%) */
.architectureProjectCard-03 .imageWrap-01 > img:nth-child(6){
  left: 0%;
  top: 85.3881%;
  width: 100%;
  height: 14.6119%;

  object-fit: cover;
  object-position: center 65%; /* smaller % shows more TOP (moves image "up") */
  transform: none;             /* important */
}


/*PROJECT_04*/
.architectureProjectCard-04{
  width: 100%;
  max-width: 980px;
  margin: 18px auto;
  display: flex;
  flex-direction: column;
  align-items: center;

  /* baseline (important for smooth un-hover) */
  transform: translateY(0);
  border-color: rgba(255,255,255,0.12);
  box-shadow:
    0 18px 50px rgba(0,0,0,0.45),
    0 1px 0 rgba(255,255,255,0.05) inset;

  /* smooth both directions */
  transition:
    transform 750ms cubic-bezier(.16, 1, .3, 1),
    box-shadow 1200ms cubic-bezier(.16, 1, .3, 1),
    border-color 1000ms cubic-bezier(.16, 1, .3, 1);
  will-change: transform, box-shadow;


  /* decoration */
  padding: clamp(18px, 2.2vw, 28px);
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(5, 5, 5, 0.295);
  box-shadow:
    0 0 30px  rgba(0,0,0,0.45),
    0 0 5px rgba(255,255,255,0.05) inset;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* subtle glow on hover */
.architectureProjectCard-04:hover{
  border-color: rgba(124,92,255,0.45);
  box-shadow:
    0 0 30px rgba(0,0,0,0.55),
    0 0 25px  rgba(124,92,255,0.18) inset,
    0 0 20px rgba(124,92,255,0.20);
  transform: translateY(-0px);

}

/* optional: a thin gradient “top edge” highlight */
.architectureProjectCard-04::before{
  content:"";
  width: 100%;
  height: 1px;
  display: block;
  margin-bottom: 14px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(124,92,255,0.55),
    rgba(204,73,149,0.45),
    transparent
  );
  opacity: .9;
}

.architectureProjectCard-04 .projectMeta{
  width: 100%;
  max-width: 980px;            /* readable text width */
  margin: 0 auto;              /* center text block */
  text-align: left;   /* uncomment if you want centered text */
}

.architectureProjectCard-04 .projectHead{
  padding: 20px 0 0;
  font-size: 2rem;
  letter-spacing: .04em;
  line-height: 1.15;
}

.architectureProjectCard-04 .projectDesc{
  padding: 20px 0 20px;
  max-width:100%;
  text-align: left;
}

.architectureProjectCard-04 .projectMeta .imageWrap-01 img{
  position: relative;
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  overflow: hidden;

}


/* wrapper MUST define the ratio for % positioning to be correct */
.architectureProjectCard-04 .projectMeta .imageWrap-02{
  position: relative;
  width: 100%;
  max-width: 980px;
  margin: 0 auto;

  aspect-ratio: 980 / 1000;   /* 280 +10 +390 +10 +310 = 1000 */
  overflow: hidden;
}

/* base image behavior */
.architectureProjectCard-04 .projectMeta .imageWrap-02 > img{
  position: absolute;
  display: block;
  object-fit: cover;
}

/* ---------- Row 1: 485 - 10 - 485, height 280 ---------- */
/* height = 280/1000 = 28% */
.architectureProjectCard-04 .projectMeta .imageWrap-02 > img:nth-child(1){
  left: 0%;
  top: 0%;
  width: 49.4898%;    /* 485/980 */
  height: 28%;        /* 280/1000 */
}

.architectureProjectCard-04 .projectMeta .imageWrap-02 > img:nth-child(2){
  left: 50.5102%;     /* (485+10)/980 */
  top: 0%;
  width: 49.4898%;
  height: 28%;
}

/* ---------- Row 2: full width, height 390 ---------- */
/* top = (280+10)/1000 = 29% ; height = 390/1000 = 39% */
.architectureProjectCard-04 .projectMeta .imageWrap-02 > img:nth-child(3){
  left: 0%;
  top: 29%;
  width: 100%;
  height: 39%;
}

/* ---------- Row 3: 600 - 10 - 180 - 10 - 180, height 310 ---------- */
/* top = (280+10+390+10)/1000 = 69% ; height = 310/1000 = 31% */
.architectureProjectCard-04 .projectMeta .imageWrap-02 > img:nth-child(4){
  left: 0%;
  top: 69%;
  width: 61.2245%;    /* 600/980 */
  height: 31%;
}

.architectureProjectCard-04 .projectMeta .imageWrap-02 > img:nth-child(5){
  left: 62.2449%;     /* (600+10)/980 */
  top: 69%;
  width: 18.3673%;    /* 180/980 */
  height: 31%;
}

.architectureProjectCard-04 .projectMeta .imageWrap-02 > img:nth-child(6){
  left: 81.6327%;     /* (600+10+180+10)/980 */
  top: 69%;
  width: 18.3673%;
  height: 31%;

  /* optional: pan inside the frame */
  object-position: center 65%;
}
/*A.I*/
/*PROJECT_01*/
.aiImageWrap-01-01{
  width: 100%;
  overflow: hidden; /* optional */
}

.aiImageWrap-01-01 > img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;      /* keeps proportion, no crop */
  object-position: center;
}


/*PROJECT_01*/
.aiImageWrap-01-01{
  width: 100%;
  overflow: hidden; /* optional */
}

.aiImageWrap-01-01 > img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;      /* keeps proportion, no crop */
  object-position: center;
}

/*PROJECT_02*/
.aiImageWrap-02-01{
  width: 100%;
  overflow: hidden; /* optional */
}

.aiImageWrap-02-01 > img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;      /* keeps proportion, no crop */
  object-position: center;
}

.aiImageWrap-02-02{
  width: 100%;
  display: grid;
  margin-bottom: 10px;

  grid-template-columns: 57.1429% 1fr;       /* left fixed ratio, right fills */
           
  align-items: stretch;                         /* top align */
  /* keep frame scaling */
  aspect-ratio: 980 / 530;
}

.aiImageWrap-02-02 > img{
  width: 100%;
  height: auto;              /* ✅ no zoom, keeps ratio */
  object-fit: contain;
  display: block;
}

.aiImageWrap-02-02 > .projectDesc{
  margin-left: 10px;
  margin-bottom: 0px;
  padding: 0;
  width: 97.6190%;
  max-width: none;
  justify-self: stretch;

  display: flex;
  align-items:flex-end;
  text-align: justify;      /* ✅ flush left & right */
  text-justify: inter-word;
  line-height: 1.7;
}


.aiImageWrap-02-03{
  position: relative;
  width: 100%;
  max-width: 980px;
  margin: 0 auto;

  aspect-ratio: 980 / 990;   /* 490 +10 +490 = 990 */
  overflow: hidden;
}

.aiImageWrap-02-03 > img{
  position: absolute;
  display: block;
  object-fit: cover;
}

/* ---------- Row: 980, height 490 ---------- */
.aiImageWrap-02-03 > img:nth-child(1){
  left: 0%;
  top: 0%;
  width: 100%;   /* 980/980 */
  height: 49.4949% ;   /* 490/990 */
  
}

.aiImageWrap-02-03 > img:nth-child(2){
  left: 0%;
  top: 50.5050%;
  width: 100%;   /* 980/980 */
  height: 49.4949% ;   /* 490/990 */
  
}

.aiImageWrap-02-04{
  position: relative;
  width: 100%;
  max-width: 980px;
  margin: 0 auto;

  aspect-ratio: 980 / 940;   /* 490 +10 +490 = 990 */
  overflow: hidden;
}

.aiImageWrap-02-04 > img{
  position: absolute;
  display: block;
  object-fit: cover;
}

/* ---------- Row: 485 -10 485, height 630 ---------- */
.aiImageWrap-02-04 > img:nth-child(1){
  left: 0%;
  top: 0%;
  width: 49.4898%;   /* 485/980 */
  height: 67.0213% ;   /* 630/940 */
  
}

.aiImageWrap-02-04 > img:nth-child(2){
  left: 50.5102%;
  top: 0%;
  width: 49.4898%;    /* 485/980 */
  height: 67.0213% ;    /* 630/940 */
  
}

.aiImageWrap-02-04 > img:nth-child(3){
  left: 0%;
  top: 68.0851%;  /* (640+10)/940 */
  width: 100%;   /* 980/980 */
  height: 31.9149% ;   /* 490/940 */
  
  object-position: center 25%;

}

.aiImageWrap-02-05{
  position: relative;
  width: 100%;
  max-width: 980px;
  margin: 0 auto;

  aspect-ratio: 980 / 630;   /* 490 +10 +490 = 990 */
  overflow: hidden;
}

.aiImageWrap-02-05 > img{
  position: absolute;
  display: block;
  object-fit: cover;
}

/* ---------- Row: 320 -10 - 320, height 630 ---------- */
.aiImageWrap-02-05 > img:nth-child(1){
  left: 0%;           /* 0/980 */
  top: 0%;
  width: 32.6531%;   /* 320/980 */
  height: 100% ;   /* 980/980 */
  
}

.aiImageWrap-02-05 > img:nth-child(2){
  left: 33.6735%;           /* 320 + 10 /980 */
  top: 0%;
  width: 32.6531%;   /* 320/980 */
  height: 100% ;   /* 980/980 */
  
}

.aiImageWrap-02-05 > img:nth-child(3){
  left: 67.3469%;           /* 320 + 10 +320 +10 /980 */
  top: 0%;
  width: 32.6531%;   /* 320/980 */
  height: 100% ;   /* 980/980 */

}

/*TREAT*/
.treatLayout{
  position: relative;
  width: 100%;
  max-width: 980px;
  margin: 0 auto;

  aspect-ratio: 980 / 880;   /* 490 +10 +490 = 990 */
  overflow: hidden;
}

.treatLayout> img{
  position: absolute;
  display: block;
  object-fit: cover;
}

/* ---------- Row: 980, height 550 ---------- */
.treatLayout > img:nth-child(1){
  left: 0%;          
  top: 0%;
  width: 100%;   /* 980/980 */
  height: 100% ;   /* 880/880 */
}

.treatLayout > img:nth-child(2){

  left: 0%;        
  top: 63.6363%;
  width: 32.6531%;   /* 320/980 */
  height: 36.3636% ;   /* 980/980 */
}

.treatLayout > img:nth-child(3){

  left: 33.6734%;        
  top: 63.6363%;
  width: 32.6531%;   /* 320/980 */
  height: 36.3636% ;   /* 980/980 */
}
.treatLayout> img:nth-child(4){

  left: 67.3469%;        
  top: 63.6363%;
  width: 32.6531%;   /* 320/980 */
  height: 36.3636% ;   /* 980/980 */

}