/* --- block-1 --- */
:root {
  --bg:#0a0a0a; --panel:#131313; --text:#f5f5f5; --muted:rgba(255,255,255,.62);
  --line:rgba(255,255,255,.09);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
button,a{font:inherit}
a{color:inherit;text-decoration:none}
.page{display:none;min-height:100vh}
.page.active{display:block}
.shell{width:min(1600px,calc(100% - 72px));margin:0 auto}
.nav{height:82px;display:flex;align-items:center;justify-content:space-between;position:relative;z-index:5}
.brand{font-size:15px;font-weight:750;letter-spacing:.02em}
.navlinks{display:flex;gap:28px;align-items:center;font-size:14px;font-weight:650}
.navlinks button,.linkbtn{border:0;background:none;color:inherit;cursor:pointer;padding:0}
.cv{padding:10px 14px!important;border:1px solid rgba(255,255,255,.18)!important;border-radius:11px!important;background:rgba(255,255,255,.03)!important}

.hero{position:relative;min-height:100vh;overflow:hidden}
.hero-bg{position:absolute;inset:0;background:
 linear-gradient(90deg,rgba(0,0,0,.34) 0%,rgba(0,0,0,.13) 42%,rgba(0,0,0,.03) 74%,rgba(0,0,0,.10) 100%),
 url('../assets/images/site/legacy/chatgpt-image-sep-5-2026-07-39-01-pm-1.png') center/cover no-repeat}
.hero-bg:after{content:"";position:absolute;inset:auto 0 0;height:150px;background:linear-gradient(transparent,var(--bg))}
.hero-content{position:relative;z-index:2;min-height:calc(100vh - 82px);display:flex;align-items:center;padding:70px 0 120px}
.hero-copy{max-width:760px}
.status{display:flex;align-items:center;gap:10px;font-size:13px;color:rgba(255,255,255,.82);margin-bottom:32px}
.dot{width:8px;height:8px;border-radius:50%;background:#2bd45a;box-shadow:0 0 14px rgba(43,212,90,.6)}
.hero h1{font-size:clamp(34px,3.7vw,58px);line-height:1.04;margin:0;letter-spacing:-.035em;font-weight:650}
.hero h1 span{display:block;color:rgba(255,255,255,.70);font-weight:460;white-space:nowrap;font-size:.88em;margin-top:7px}
.hero p{font-size:clamp(16px,1.35vw,21px);line-height:1.6;max-width:650px;color:rgba(255,255,255,.80);margin:30px 0 0}
.actions{display:flex;gap:13px;margin-top:35px}
.btn{cursor:pointer;border-radius:999px;padding:14px 21px;border:1px solid rgba(255,255,255,.17);background:rgba(0,0,0,.16);color:#fff;font-size:14px;font-weight:700;backdrop-filter:blur(10px)}
.btn.primary{background:#f5f5f5;color:#111}

.section{padding:100px 0}
.kicker{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.47);margin-bottom:12px}
.section-title{font-size:clamp(24px,2.4vw,36px);line-height:1.05;margin:0 0 34px;letter-spacing:-.03em;font-weight:650}
.category-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.category-card{position:relative;min-height:500px;border-radius:24px;overflow:hidden;border:1px solid var(--line);cursor:pointer;background:var(--panel)}
.category-card .image{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .55s cubic-bezier(.2,.8,.2,1)}
.category-card.research .image{background-image:linear-gradient(to top,rgba(0,0,0,.58),rgba(0,0,0,.05) 60%),url('../assets/images/site/legacy/chatgpt-image-sep-5-2026-02-06-11-pm.png')}
.category-card.creative .image{background-image:linear-gradient(to top,rgba(0,0,0,.58),rgba(0,0,0,.05) 60%),url('../assets/images/site/legacy/chatgpt-image-sep-5-2026-02-06-14-pm.png')}
.category-card:hover .image{transform:scale(1.035)}
.category-content{position:absolute;inset:0;padding:27px;display:flex;flex-direction:column;justify-content:flex-end}
.index{position:absolute;top:24px;left:27px;color:rgba(255,255,255,.66);font-size:13px}
.category-content h3{font-size:clamp(28px,3vw,48px);line-height:.98;margin:0 0 12px;letter-spacing:-.035em}
.meta{font-size:14px;color:rgba(255,255,255,.72)}

.about-wrap{
  padding:100px 0 120px;
}
.about-card{
  position:relative;
  min-height:560px;
  border-radius:28px;
  overflow:hidden;
  border:1px solid var(--line);
  background:#121212;
  display:grid;
  grid-template-columns:1.05fr .95fr;
}
.about-image{
  position:relative;
  min-height:560px;
  background:
    linear-gradient(to right,rgba(0,0,0,.04),rgba(0,0,0,.18)),
    url('../assets/images/site/legacy/chatgpt-image-sep-5-2026-03-19-29-pm.png') center/cover no-repeat;
}
.about-image:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.25),transparent 55%);
}
.about-content{
  padding:56px 56px 52px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  background:linear-gradient(145deg,#151515,#101010);
}
.about-label{
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(255,255,255,.44);
  margin-bottom:20px;
}
.about-title{
  font-size:clamp(34px,3.5vw,56px);
  line-height:1.02;
  letter-spacing:-.04em;
  margin:0 0 24px;
}
.about-text{
  color:rgba(255,255,255,.68);
  line-height:1.75;
  font-size:16px;
  max-width:590px;
}
.about-tags{
  margin-top:28px;
  color:rgba(255,255,255,.9);
  font-size:14px;
  line-height:1.7;
}
.about-actions{
  margin-top:34px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

.inner-head{padding:70px 0 38px;border-bottom:1px solid var(--line)}
.back{border:0;background:none;color:rgba(255,255,255,.65);padding:0;cursor:pointer;font-size:14px;margin-bottom:28px}
.inner-head h1{font-size:clamp(42px,5.4vw,78px);line-height:.96;letter-spacing:-.045em;margin:0 0 20px}
.inner-head p{max-width:700px;color:var(--muted);font-size:17px;line-height:1.6}
.project-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;padding:42px 0 110px}
.project-card{position:relative;aspect-ratio:16/10;border-radius:20px;overflow:hidden;background:#171717;border:1px solid var(--line);cursor:pointer}
.project-card .pcbg{position:absolute;inset:0;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.project-card:hover .pcbg{transform:scale(1.045)}
.pcoverlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.72),rgba(0,0,0,.04) 58%)}
.pccontent{position:absolute;inset:0;padding:20px;display:flex;flex-direction:column;justify-content:flex-end}
.pcno{position:absolute;top:18px;left:20px;font-size:12px;color:rgba(255,255,255,.64)}
.pctag{position:absolute;top:18px;right:20px;font-size:11px;color:rgba(255,255,255,.58);letter-spacing:.08em}
.pccontent h3{font-size:clamp(20px,1.8vw,30px);margin:0 0 6px;line-height:1.05}
.pccontent p{font-size:13px;color:rgba(255,255,255,.68);margin:0}

.detail{padding:48px 0 120px}
.detail-top{display:flex;justify-content:space-between;gap:30px;align-items:flex-start;margin-bottom:28px}
.detail h1{font-size:clamp(42px,5.2vw,74px);line-height:.96;letter-spacing:-.045em;margin:0}
.detail .tags{color:var(--muted);font-size:14px;margin-top:12px}
.detail-hero{aspect-ratio:16/8;border-radius:24px;overflow:hidden;background:#171717;border:1px solid var(--line);margin-top:34px}
.detail-hero img{width:100%;height:100%;object-fit:cover;display:block}
.detail-info{display:grid;grid-template-columns:1.2fr .8fr;gap:70px;padding:54px 0;border-bottom:1px solid var(--line)}
.detail-info h4{font-size:12px;text-transform:uppercase;letter-spacing:.15em;color:rgba(255,255,255,.48);margin:0 0 13px}
.detail-info p{font-size:17px;line-height:1.7;color:rgba(255,255,255,.76);margin:0}
.rolelist{font-size:17px;line-height:1.8;color:rgba(255,255,255,.76)}
.media-gallery{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
  padding-top:42px;
}
.media-slot{
  aspect-ratio:16/10;
  border-radius:18px;
  border:1px dashed rgba(255,255,255,.18);
  display:grid;
  place-items:center;
  color:rgba(255,255,255,.35);
  background:#111;
  overflow:hidden;
}
.media-slot.video{
  grid-column:1 / -1;
  aspect-ratio:16/7;
  min-height:360px;
}
.media-label{
  font-size:13px;
  letter-spacing:.08em;
  text-transform:uppercase;
}

footer{border-top:1px solid var(--line);padding:30px 0 46px;color:rgba(255,255,255,.44);font-size:13px}
footer .shell{display:flex;justify-content:space-between}



/* Projects -> About transition */
.about-wrap{
  position:relative;
  padding-top:190px;
}
.about-wrap::before{
  content:"";
  position:absolute;
  left:50%;
  top:0;
  width:100vw;
  height:190px;
  transform:translateX(-50%);
  pointer-events:none;
  background:
    linear-gradient(
      to bottom,
      #0a0a0a 0%,
      #0a0a0a 18%,
      rgba(10,10,10,.94) 36%,
      rgba(10,10,10,.70) 58%,
      rgba(10,10,10,.24) 82%,
      rgba(10,10,10,0) 100%
    );
  z-index:2;
}
.about-card{
  position:relative;
  z-index:1;
}
.about-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:3;
  background:linear-gradient(to bottom,rgba(10,10,10,.22),transparent 24%);
}
.about-image,.about-content{
  position:relative;
  z-index:1;
}



/* Floating scroll controls */
.scroll-controls{
  position:fixed;
  right:24px;
  bottom:24px;
  z-index:40;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.scroll-btn{
  width:46px;
  height:46px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(12,12,12,.58);
  color:#fff;
  display:grid;
  place-items:center;
  cursor:pointer;
  font-size:18px;
  backdrop-filter:blur(14px);
  transition:transform .25s ease, background .25s ease, opacity .25s ease;
}
.scroll-btn:hover{
  transform:translateY(-2px);
  background:rgba(255,255,255,.12);
}

/* Contact area */
.contact-wrap{
  padding:20px 0 90px;
}
.contact-card{
  max-width:920px;
  margin:0 auto;
  padding:30px 0 0;
  border-top:1px solid rgba(255,255,255,.08);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
}
.contact-copy h3{
  margin:0 0 8px;
  font-size:clamp(22px,2vw,30px);
  letter-spacing:-.025em;
}
.contact-copy p{
  margin:0;
  color:rgba(255,255,255,.52);
  font-size:14px;
}
.contact-links{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.social-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:0 16px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.03);
  color:#fff;
  font-size:13px;
  font-weight:700;
  transition:transform .25s ease, background .25s ease;
}
.social-btn:hover{
  transform:translateY(-2px);
  background:rgba(255,255,255,.08);
}
@media(max-width:700px){
  .scroll-controls{right:14px;bottom:14px}
  .scroll-btn{width:42px;height:42px}
  .contact-card{display:block}
  .contact-links{margin-top:18px}
}

/* Compact About section */
.about-wrap{
  position:relative;
  padding:120px 0 130px;
}
.about-wrap::before{
  content:"";
  position:absolute;
  left:50%;
  top:0;
  width:100vw;
  height:120px;
  transform:translateX(-50%);
  background:linear-gradient(to bottom,#0a0a0a 0%,rgba(10,10,10,.88) 35%,rgba(10,10,10,0) 100%);
  pointer-events:none;
}
.about-card{
  min-height:auto;
  border:0;
  border-radius:0;
  background:transparent;
  display:grid;
  grid-template-columns:170px minmax(0,640px);
  gap:34px;
  align-items:center;
  justify-content:center;
  max-width:920px;
  margin:0 auto;
  overflow:visible;
}
.about-card::before{display:none}
.about-image{
  width:170px;
  height:170px;
  min-height:0;
  border-radius:22px;
  overflow:hidden;
  background:
    url('../assets/images/site/legacy/chatgpt-image-sep-5-2026-02-32-01-pm-1.png') 76% 56%/cover no-repeat;
  border:1px solid rgba(255,255,255,.08);
}
.about-image:after{display:none}
.about-content{
  padding:0;
  background:transparent;
  display:block;
}
.about-label{
  margin-bottom:16px;
  text-align:left;
}
.about-title{
  font-size:clamp(26px,2.6vw,38px);
  line-height:1.08;
  margin:0 0 14px;
  letter-spacing:-.035em;
}
.about-text{
  font-size:15px;
  line-height:1.65;
  color:rgba(255,255,255,.58);
  max-width:620px;
}
.about-text br{display:none}
.about-tags{
  margin-top:18px;
  font-size:13px;
  color:rgba(255,255,255,.74);
}
.about-actions{
  margin-top:24px;
}

/* Motion */
.reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .78s ease, transform .78s cubic-bezier(.2,.75,.2,1);
}
.about-wrap.reveal{
  transform:translateY(34px);
  transition-duration:.95s;
}
.reveal.in-view{
  opacity:1;
  transform:translateY(0);
}
.hero-copy{
  animation:heroEnter .9s .12s both cubic-bezier(.2,.75,.2,1);
}
.hero-bg{
  animation:heroImage .95s both ease-out;
}
@keyframes heroEnter{
  from{opacity:0;transform:translateY(24px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes heroImage{
  from{transform:scale(1.035);opacity:.94}
  to{transform:scale(1);opacity:1}
}
.category-card .category-content,
.project-card .pccontent{
  transition:transform .35s ease;
}
.category-card:hover .category-content,
.project-card:hover .pccontent{
  transform:translateY(-4px);
}
.btn{
  transition:transform .28s ease, background .28s ease, border-color .28s ease;
}
.btn:hover{
  transform:translateY(-2px);
}
.nav{
  position:sticky;
  top:0;
  z-index:20;
  transition:background .3s ease, backdrop-filter .3s ease, border-color .3s ease;
}
.nav.scrolled{
  background:rgba(10,10,10,.58);
  backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.page{
  opacity:0;
  transition:opacity .28s ease;
}
.page.active{
  opacity:1;
}

@media(max-width:900px){
 .hero h1 span{white-space:normal;font-size:.92em}
 .shell{width:min(100% - 34px,1600px)}
 .navlinks{gap:14px;font-size:12px}
 .navlinks .contact{display:none}
 .hero-bg{background-position:60% center}
 .hero-content{align-items:flex-end;padding-bottom:95px}
 .category-grid,.detail-info{grid-template-columns:1fr}
 .about-card{grid-template-columns:1fr;justify-items:center;text-align:center;gap:22px}
 .about-image{width:140px;height:140px;min-height:0}
 .about-content{padding:0 12px 20px}
 .about-label{text-align:center}
 .about-wrap{padding-top:130px}
 .about-wrap::before{height:130px}
 .category-card{min-height:390px}
 .project-grid{grid-template-columns:1fr}
 .detail-top{display:block}
 .media-gallery{grid-template-columns:1fr}
 .media-slot.video{grid-column:auto;aspect-ratio:16/9;min-height:0}
}

/* Compact project detail page only */
#detailPage .nav{
  height:72px;
}
#detailPage .detail{
  padding:24px 0 84px;
}
#detailPage .detail .back{
  margin-bottom:18px;
  font-size:13px;
}
#detailPage .detail-top{
  margin-bottom:18px;
}
#detailPage .detail h1{
  font-size:clamp(34px,3.7vw,56px);
  line-height:1;
  letter-spacing:-.04em;
}
#detailPage .detail .tags{
  font-size:13px;
  margin-top:8px;
}
#detailPage .detail-hero{
  margin-top:22px;
  aspect-ratio:16/6.7;
  max-height:510px;
  border-radius:20px;
}
#detailPage .detail-hero img{
  object-fit:cover;
  object-position:center;
}
#detailPage .detail-info{
  grid-template-columns:1.35fr .65fr;
  gap:46px;
  padding:34px 0;
}
#detailPage .detail-info h4{
  margin-bottom:10px;
}
#detailPage .detail-info p,
#detailPage .rolelist{
  font-size:15px;
  line-height:1.65;
}
#detailPage .media-gallery{
  padding-top:28px;
  gap:14px;
}
#detailPage .media-slot{
  border-radius:15px;
}
#detailPage .media-slot.video{
  aspect-ratio:16/6.5;
  min-height:300px;
}

@media(max-width:900px){
  #detailPage .detail{
    padding-top:20px;
  }
  #detailPage .detail h1{
    font-size:clamp(32px,8vw,46px);
  }
  #detailPage .detail-hero{
    aspect-ratio:16/9;
    max-height:none;
  }
  #detailPage .detail-info{
    grid-template-columns:1fr;
    gap:28px;
  }
}


/* v14 — compact project detail layout */
#detailPage .detail{
  padding:22px 0 82px;
}
#detailPage .detail-top{
  margin-bottom:18px;
}
#detailPage .detail h1{
  font-size:clamp(32px,3.25vw,50px);
  line-height:1;
  letter-spacing:-.038em;
}
#detailPage .detail .tags{
  font-size:13px;
  margin-top:8px;
}

/* Main project image + project info */
#detailPage .project-intro{
  display:grid;
  grid-template-columns:minmax(0,1.65fr) minmax(300px,.75fr);
  gap:18px;
  align-items:stretch;
  margin-top:24px;
}
#detailPage .detail-hero{
  margin:0;
  aspect-ratio:auto;
  min-height:430px;
  max-height:540px;
  border-radius:20px;
  overflow:hidden;
}
#detailPage .detail-hero img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}
#detailPage .project-info{
  border:1px solid rgba(255,255,255,.09);
  border-radius:20px;
  background:#111;
  padding:28px 26px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
#detailPage .info-block + .info-block{
  margin-top:24px;
}
#detailPage .info-label{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:rgba(255,255,255,.42);
  margin-bottom:9px;
}
#detailPage .info-copy{
  margin:0;
  color:rgba(255,255,255,.72);
  font-size:14px;
  line-height:1.65;
}
#detailPage .info-list{
  color:rgba(255,255,255,.72);
  font-size:14px;
  line-height:1.75;
}

/* Project media */
#detailPage .project-media{
  padding-top:34px;
}
#detailPage .project-media-head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:20px;
  margin-bottom:14px;
}
#detailPage .project-media-title{
  margin:0;
  font-size:13px;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:rgba(255,255,255,.5);
}
#detailPage .thumb-row{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}
#detailPage .thumb{
  position:relative;
  aspect-ratio:16/10;
  overflow:hidden;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.09);
  background:#141414;
  padding:0;
  cursor:pointer;
}
#detailPage .thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .35s ease, filter .35s ease;
}
#detailPage .thumb::after{
  content:"↗";
  position:absolute;
  right:10px;
  bottom:8px;
  width:28px;
  height:28px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:rgba(0,0,0,.54);
  border:1px solid rgba(255,255,255,.14);
  color:#fff;
  font-size:12px;
  opacity:0;
  transform:translateY(5px);
  transition:.25s ease;
}
#detailPage .thumb:hover img{
  transform:scale(1.045);
  filter:brightness(.88);
}
#detailPage .thumb:hover::after{
  opacity:1;
  transform:translateY(0);
}
#detailPage .video-frame{
  margin-top:14px;
  min-height:280px;
  aspect-ratio:16/6;
  border-radius:18px;
  border:1px dashed rgba(255,255,255,.18);
  background:#111;
  display:grid;
  place-items:center;
  color:rgba(255,255,255,.36);
  font-size:13px;
  letter-spacing:.1em;
  text-transform:uppercase;
}

/* Lightbox */
.lightbox{
  position:fixed;
  inset:0;
  z-index:100;
  display:none;
  place-items:center;
  padding:34px;
  background:rgba(0,0,0,.88);
  backdrop-filter:blur(10px);
}
.lightbox.open{
  display:grid;
}
.lightbox-inner{
  position:relative;
  width:min(1200px,92vw);
  max-height:88vh;
}
.lightbox img{
  width:100%;
  max-height:88vh;
  object-fit:contain;
  display:block;
  border-radius:18px;
}
.lightbox-close{
  position:absolute;
  top:-16px;
  right:-16px;
  width:42px;
  height:42px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.16);
  background:#111;
  color:#fff;
  cursor:pointer;
  font-size:20px;
}

@media(max-width:1000px){
  #detailPage .project-intro{
    grid-template-columns:1fr;
  }
  #detailPage .detail-hero{
    min-height:0;
    aspect-ratio:16/9;
    max-height:none;
  }
}
@media(max-width:760px){
  #detailPage .thumb-row{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  #detailPage .video-frame{
    aspect-ratio:16/9;
    min-height:0;
  }
}


/* Keep About title on one line on desktop */
@media(min-width:901px){
  .about-copy h2{
    font-size:clamp(27px,2.35vw,38px) !important;
    white-space:nowrap;
    letter-spacing:-.025em;
  }
}


/* v19 — corrected About heading rule */
@media(min-width:901px){
  .about-inner{
    grid-template-columns:190px minmax(0, 1fr) !important;
    gap:42px !important;
    max-width:1040px !important;
  }
  .about-title{
    font-size:30px !important;
    line-height:1.08 !important;
    letter-spacing:-.025em !important;
    white-space:nowrap !important;
    max-width:none !important;
  }
}


.light-row{margin-bottom:16px}
}


/* v26 — flashlight interaction using the hero character */
.hero-bg{
  transition:filter .9s cubic-bezier(.2,.7,.2,1);
  filter:brightness(.46) saturate(.82);
  cursor:default;
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(0,0,0,.44) 0%,rgba(0,0,0,.31) 38%,rgba(0,0,0,.13) 66%,rgba(0,0,0,.04) 100%);
  transition:opacity .9s ease;
  opacity:.8;
}
.hero.light-on .hero-bg{
  filter:brightness(1) saturate(1);
}
.hero.light-on::before{
  opacity:.08;
}
.hero-content,
.nav{
  z-index:3;
}
.flashlight-hotspot{
  position:absolute;
  z-index:4;
  left:60.1%;
  top:47.8%;
  width:72px;
  height:72px;
  transform:translate(-50%,-50%);
  border:0;
  border-radius:50%;
  background:transparent;
  cursor:pointer;
  padding:0;
}
.flashlight-hotspot::after{
  content:"";
  position:absolute;
  inset:22px;
  border-radius:50%;
  border:1px solid rgba(255,238,205,.8);
  opacity:.72;
  transition:opacity .3s ease, transform .3s ease, box-shadow .3s ease;
}
.flashlight-pulse{
  position:absolute;
  inset:11px;
  border-radius:50%;
  border:1px solid rgba(255,232,190,.34);
  opacity:1;
  animation:flashlightPulse 1.65s ease-out infinite;
}
.hero.light-on .flashlight-pulse{
  animation:none;
  opacity:0;
}
.hero.light-on .flashlight-hotspot::after{
  opacity:.15;
  transform:scale(.7);
  box-shadow:none;
}
.flashlight-hotspot:hover::after{
  opacity:1;
  transform:scale(1.08);
  box-shadow:0 0 20px rgba(255,216,145,.28);
}
@keyframes flashlightPulse{
  0%{transform:scale(.7);opacity:.85}
  70%{transform:scale(1.35);opacity:.12}
  100%{transform:scale(1.45);opacity:0}
}
@media(max-width:900px){
  .flashlight-hotspot{
    left:60.3%;
    top:48.2%;
    width:60px;
    height:60px;
  }
}


/* v27 — refined cinematic hero interface */
.hero{
  position:relative;
  min-height:100vh;
  overflow:hidden;
}
.hero .nav{
  height:76px;
  width:min(94%,1500px);
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  position:relative;
  z-index:8;
}
.hero .brand{
  justify-self:start;
  font-size:28px;
  font-weight:420;
  letter-spacing:-.04em;
}
.hero .navlinks{
  justify-self:center;
  display:flex;
  gap:46px;
  align-items:center;
  font-size:12px;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.hero .navlinks .cv,
.hero .navlinks .contact{
  display:none !important;
}
.hero .navlinks button{
  position:relative;
  opacity:.78;
  transition:opacity .25s ease;
}
.hero .navlinks button:hover{opacity:1}
.hero .navlinks button:first-child::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-11px;
  height:1px;
  background:rgba(255,255,255,.72);
}
.hero-light-control{
  justify-self:end;
  display:flex;
  align-items:center;
  gap:10px;
  color:rgba(255,255,255,.72);
  font-size:11px;
  font-weight:650;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.hero-light-control button{
  position:relative;
  width:46px;
  height:24px;
  padding:0;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.32);
  background:rgba(255,255,255,.08);
  cursor:pointer;
  transition:background .35s ease,border-color .35s ease;
}
.hero-light-control button::before{
  content:"";
  position:absolute;
  top:4px;
  left:4px;
  width:14px;
  height:14px;
  border-radius:50%;
  background:rgba(255,255,255,.82);
  transition:transform .35s ease,box-shadow .35s ease,background .35s ease;
}
.hero.light-on .hero-light-control button{
  background:rgba(255,226,178,.16);
  border-color:rgba(255,225,178,.62);
}
.hero.light-on .hero-light-control button::before{
  transform:translateX(22px);
  background:#ffe0a6;
  box-shadow:0 0 14px rgba(255,211,133,.72);
}

.hero-content{
  position:relative;
  z-index:4;
  min-height:calc(100vh - 76px);
  display:flex;
  align-items:center;
  padding:0 0 9vh;
}
.hero-copy{
  width:min(94%,1500px);
  max-width:none;
  margin:0 auto;
  padding-left:10.5%;
  transform:translateY(-1vh);
}
.hero-copy .status{
  display:none;
}
.hero-copy h1{
  max-width:720px;
  font-size:clamp(54px,5.15vw,88px);
  line-height:.98;
  margin:0;
  letter-spacing:-.052em;
  font-weight:520;
  color:rgba(255,255,255,.96);
}
.hero-copy h1 span{
  display:block;
  margin-top:18px;
  font-size:clamp(18px,1.55vw,26px);
  line-height:1.2;
  letter-spacing:.025em;
  font-weight:540;
  color:rgba(255,255,255,.82);
  white-space:normal;
}
.hero-copy p{
  max-width:670px;
  margin:18px 0 0;
  font-size:clamp(15px,1.15vw,19px);
  line-height:1.65;
  color:rgba(255,255,255,.68);
}
.hero-copy .actions{
  margin-top:31px;
}
.hero-copy .btn{
  border-radius:0;
  min-width:225px;
  padding:15px 23px;
  background:rgba(0,0,0,.08);
  border:1px solid rgba(255,255,255,.36);
  color:#fff;
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  backdrop-filter:blur(8px);
}
.hero-copy .btn.primary{
  background:rgba(255,255,255,.06);
  color:#fff;
}
.hero-copy .actions .btn:nth-child(2){
  display:none;
}

.hero-bottom-meta{
  position:absolute;
  z-index:5;
  left:3%;
  right:3%;
  bottom:28px;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  pointer-events:none;
  font-size:10px;
  letter-spacing:.21em;
  text-transform:uppercase;
  color:rgba(255,255,255,.46);
}
.hero-scroll{
  display:flex;
  align-items:center;
  gap:12px;
}
.hero-scroll::after{
  content:"↓";
  display:inline-block;
  font-size:19px;
  line-height:1;
  color:rgba(255,255,255,.72);
}

/* flashlight hotspot aligned with the character's flashlight */
.flashlight-hotspot{
  left:60.2%;
  top:47.7%;
  width:68px;
  height:68px;
}

/* cleaner lighting transition */
.hero-bg{
  filter:brightness(.48) saturate(.84);
  transition:filter .9s cubic-bezier(.2,.7,.2,1);
}
.hero.light-on .hero-bg{
  filter:brightness(1) saturate(1);
}
.hero::before{
  opacity:.68;
}
.hero.light-on::before{
  opacity:.10;
}

@media(max-width:900px){
  .hero .nav{
    display:flex;
    justify-content:space-between;
  }
  .hero .navlinks{display:none}
  .hero-copy{
    padding-left:6%;
    padding-right:6%;
  }
  .hero-copy h1{
    font-size:clamp(42px,10vw,64px);
    max-width:88%;
  }
  .hero-copy p{
    max-width:82%;
  }
  .hero-bottom-meta{
    left:6%;
    right:6%;
  }
  .flashlight-hotspot{
    left:61%;
    top:49%;
  }
}


/* v28 — reference typography, flashlight-only interaction */
.hero .nav{
  grid-template-columns:1fr auto 1fr;
}
.hero-light-control{
  display:none !important;
}

/* Handwritten reference look for the greeting/name */
.hero-copy h1{
  max-width:760px;
  font-family:"Segoe Print","Bradley Hand","Comic Sans MS",cursive;
  font-size:clamp(50px,4.8vw,82px);
  line-height:1.02;
  letter-spacing:-.055em;
  font-weight:400;
  color:#2b2927;
  text-shadow:none;
}
.hero-copy h1 span{
  display:block;
  margin-top:20px;
  font-family:Arial,Helvetica,sans-serif;
  font-size:clamp(16px,1.25vw,21px);
  line-height:1.35;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:500;
  color:rgba(43,41,39,.82);
  white-space:normal;
}
.hero-copy p{
  max-width:660px;
  margin-top:17px;
  font-family:Arial,Helvetica,sans-serif;
  font-size:clamp(14px,1.05vw,18px);
  line-height:1.65;
  letter-spacing:.015em;
  color:rgba(43,41,39,.74);
}
.hero-copy .btn{
  color:#2b2927;
  border-color:rgba(43,41,39,.48);
  background:rgba(255,255,255,.08);
}
.hero-copy .btn.primary{
  color:#2b2927;
  background:rgba(255,255,255,.10);
}
.hero-copy .btn:hover{
  background:rgba(255,255,255,.20);
}

/* Keep nav readable over the darker top area */
.hero .brand,
.hero .navlinks button{
  color:rgba(255,255,255,.88);
}

/* When the flashlight is off, hero copy becomes subdued; when on, it reads as
   if the beam is illuminating the text. */
.hero:not(.light-on) .hero-copy{
  opacity:.42;
  transition:opacity .8s ease;
}
.hero.light-on .hero-copy{
  opacity:1;
  transition:opacity .8s ease;
}


/* v29 — static hero, no light interaction */
.flashlight-hotspot,
.flashlight-pulse,
.hero-light-control{display:none!important}

.hero-bg,
.hero.light-on .hero-bg{
  filter:brightness(1) saturate(1) !important;
  cursor:default !important;
}
.hero::before,
.hero.light-on::before{
  opacity:.08 !important;
}
.hero-copy,
.hero:not(.light-on) .hero-copy,
.hero.light-on .hero-copy{
  opacity:1 !important;
}


/* v30 — match the supplied reference hero composition */
.hero{
  min-height:100vh;
  background:#d7d8dd;
}
.hero-bg{
  inset:0;
  background-position:center center !important;
  background-size:cover !important;
  filter:none !important;
}
.hero-bg:after{
  display:none !important;
}
.hero::before{
  display:none !important;
}

/* Reference-style top navigation */
.hero .nav{
  height:76px;
  width:min(94%,1500px);
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  z-index:6;
}
.hero .brand{
  justify-self:start;
  font-size:28px;
  font-weight:420;
  letter-spacing:-.04em;
  color:rgba(255,255,255,.92);
}
.hero .navlinks{
  justify-self:center;
  display:flex;
  gap:48px;
  align-items:center;
  font-size:12px;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.hero .navlinks button{
  color:rgba(255,255,255,.82);
  opacity:1;
}
.hero .navlinks button:first-child::after{
  bottom:-11px;
  background:rgba(255,255,255,.72);
}
.hero .navlinks .cv,
.hero .navlinks .contact{
  display:none !important;
}

/* Exact text placement based on the reference image */
.hero-content{
  min-height:calc(100vh - 76px);
  display:block;
  padding:0;
  position:relative;
  z-index:4;
}
.hero-copy-reference{
  position:absolute;
  left:13.6%;
  top:18.2%;
  width:43%;
  max-width:720px;
  margin:0;
  padding:0;
  transform:none;
  opacity:1 !important;
  text-shadow:none !important;
  color:#3b3937;
}

.hero-handwritten{
  font-family:"Segoe Print","Bradley Hand","Comic Sans MS",cursive;
  color:#3a3836;
  font-weight:400;
  letter-spacing:-.055em;
  line-height:.92;
}
.hero-handwritten .hello{
  font-size:clamp(54px,5vw,82px);
  margin-left:4.8%;
}
.hero-handwritten .im{
  font-size:clamp(51px,4.8vw,78px);
  margin-left:8%;
  margin-top:2px;
}
.hero-handwritten .name{
  font-size:clamp(60px,5.6vw,94px);
  margin-top:4px;
  white-space:nowrap;
}

.hero-role{
  margin-top:20px;
  margin-left:2.5%;
  font-family:Arial,Helvetica,sans-serif;
  font-size:clamp(14px,1.18vw,19px);
  line-height:1.35;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(58,56,54,.83);
}

.hero-description{
  margin:15px 0 0 2.5% !important;
  max-width:650px !important;
  font-family:Arial,Helvetica,sans-serif;
  font-size:clamp(14px,1.03vw,17px) !important;
  line-height:1.6 !important;
  letter-spacing:.01em;
  color:rgba(58,56,54,.74) !important;
}

.hero-copy-reference .actions{
  margin:27px 0 0 2.5%;
}
.hero-copy-reference .btn{
  min-width:260px;
  padding:16px 24px;
  border-radius:0;
  border:1px solid rgba(58,56,54,.58);
  background:rgba(255,255,255,.08);
  color:#44413e;
  font-size:12px;
  letter-spacing:.17em;
  text-transform:uppercase;
  box-shadow:none;
  backdrop-filter:none;
}
.hero-copy-reference .btn:hover{
  background:rgba(255,255,255,.24);
}

.hero-bottom-meta{
  left:2.8%;
  right:2.8%;
  bottom:24px;
  color:rgba(255,255,255,.58);
  font-size:10px;
  letter-spacing:.20em;
}
.hero-scroll::after{
  color:rgba(255,255,255,.72);
}

/* No light controls / hotspots */
.flashlight-hotspot,
.flashlight-pulse,
.hero-light-control{
  display:none !important;
}

@media(max-width:1000px){
  .hero-copy-reference{
    left:7%;
    top:20%;
    width:52%;
  }
  .hero-handwritten .name{
    white-space:normal;
  }
}
@media(max-width:760px){
  .hero .nav{
    display:flex;
    justify-content:space-between;
  }
  .hero .navlinks{
    display:none;
  }
  .hero-copy-reference{
    left:7%;
    top:18%;
    width:60%;
  }
  .hero-handwritten .hello{font-size:44px}
  .hero-handwritten .im{font-size:41px}
  .hero-handwritten .name{font-size:51px}
  .hero-role{
    font-size:12px;
    letter-spacing:.12em;
  }
  .hero-description{
    font-size:13px !important;
    line-height:1.5 !important;
  }
  .hero-copy-reference .btn{
    min-width:210px;
  }
}


/* v31 — smaller/higher hero typography + light page transition */
:root{
  --bg:#d9d6d1 !important;
  --panel:rgba(255,255,255,.30) !important;
  --text:#2f2c29 !important;
  --muted:rgba(47,44,41,.62) !important;
  --line:rgba(47,44,41,.12) !important;
}
html{background:#d9d6d1}
body{
  background:
    linear-gradient(180deg,
      #d7d4cf 0%,
      #d9d6d1 18%,
      #d4d1cc 42%,
      #cbc8c3 70%,
      #c2bfba 100%) !important;
  color:var(--text) !important;
}
#homePage{
  background:transparent !important;
}

/* Hero text: slightly smaller and higher, closer to the reference crop */
.hero-copy-reference{
  left:12.9% !important;
  top:14.1% !important;
  width:39% !important;
  max-width:650px !important;
}
.hero-handwritten .hello{
  font-size:clamp(46px,4.1vw,68px) !important;
  margin-left:7% !important;
}
.hero-handwritten .im{
  font-size:clamp(44px,3.95vw,65px) !important;
  margin-left:10.5% !important;
  margin-top:-1px !important;
}
.hero-handwritten .name{
  font-size:clamp(52px,4.65vw,78px) !important;
  margin-top:2px !important;
}
.hero-role{
  margin-top:15px !important;
  font-size:clamp(12px,1vw,16px) !important;
  letter-spacing:.17em !important;
}
.hero-description{
  margin-top:12px !important;
  max-width:585px !important;
  font-size:clamp(13px,.92vw,15.5px) !important;
}
.hero-copy-reference .actions{
  margin-top:22px !important;
}
.hero-copy-reference .btn{
  min-width:235px !important;
  padding:14px 21px !important;
}

/* Smooth fade from hero into the light portfolio sections */
.hero::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-1px;
  height:190px;
  z-index:2;
  pointer-events:none;
  background:linear-gradient(
    to bottom,
    rgba(215,212,207,0) 0%,
    rgba(215,212,207,.46) 48%,
    #d7d4cf 100%
  );
}
.hero-bottom-meta{z-index:5}

/* Home sections now live in the same warm-grey palette instead of black */
#projects,
.about-wrap,
.contact-wrap{
  position:relative;
  background:transparent !important;
}
#projects{
  padding-top:82px !important;
}
.kicker{
  color:rgba(47,44,41,.50) !important;
}
.section-title{
  color:#2f2c29 !important;
}
.category-card{
  border-color:rgba(47,44,41,.14) !important;
  box-shadow:0 16px 42px rgba(49,44,39,.09);
}
.category-card::after{
  background:linear-gradient(to top,rgba(15,15,15,.48),rgba(15,15,15,.03) 58%) !important;
}

/* About card adjusted for the lighter surrounding page */
.about-card{
  background:rgba(244,242,238,.44) !important;
  border-color:rgba(47,44,41,.13) !important;
  box-shadow:0 16px 50px rgba(49,44,39,.08);
}
.about-content,
.about-copy,
.about-copy h2,
.about-title{
  color:#2f2c29 !important;
}
.about-copy p,
.about-copy .skills,
.about-copy .meta{
  color:rgba(47,44,41,.67) !important;
}
.about-copy .btn{
  color:#2f2c29 !important;
  border-color:rgba(47,44,41,.22) !important;
  background:rgba(255,255,255,.24) !important;
}

/* Contact and footer no longer form a hard black block */
.contact-card,
.contact-panel{
  background:rgba(244,242,238,.34) !important;
  border-color:rgba(47,44,41,.13) !important;
  color:#2f2c29 !important;
}
#contact,
#contact *{
  --text:#2f2c29;
}
footer{
  color:rgba(47,44,41,.52) !important;
  border-color:rgba(47,44,41,.10) !important;
}

/* Project/category pages keep readability but move from pure black to warm charcoal */
.page:not(#homePage){
  background:#242321 !important;
}
.page:not(#homePage) .topbar,
.page:not(#homePage) .detail-nav{
  background:rgba(36,35,33,.78) !important;
  backdrop-filter:blur(18px);
}

@media(max-width:900px){
  .hero-copy-reference{
    left:7% !important;
    top:16% !important;
    width:55% !important;
  }
}


/* v33 — v31 hero restored; supplied background for page 2+ */
#projects,
.about-wrap,
.contact-wrap,
.page:not(#homePage){
  background-image:
    linear-gradient(rgba(20,20,22,.10),rgba(20,20,22,.16)),
    url('../assets/images/site/legacy/chatgpt-image-sep-5-2026-07-54-53-pm-2.png') !important;
  background-size:cover !important;
  background-position:center center !important;
  background-attachment:fixed !important;
}

/* Remove the artificial gradient seams from v31 so the real background carries the transition. */
#projects::before,
.about-wrap::before,
.contact-wrap::before{
  display:none !important;
}
#projects{
  margin-top:0 !important;
}

/* Cards remain readable on the photographic background */
.category-card,
.about-card,
.contact-card,
.contact-panel,
.page:not(#homePage) .project-card,
.page:not(#homePage) .project-info,
.page:not(#homePage) .video-frame,
.page:not(#homePage) .thumb{
  backdrop-filter:blur(8px);
}

/* Gentle dark veil on inner pages, not a flat black block */
.page:not(#homePage){
  background-color:#3f3e40 !important;
}


/* v34 — softer, more natural page-2 transition */
#projects{
  position:relative;
  isolation:isolate;
  padding-top:110px !important;
  padding-bottom:110px !important;

  /* soften the supplied background and keep the hero's warm-grey mood */
  background:
    linear-gradient(
      to bottom,
      rgba(111,107,105,.92) 0%,
      rgba(103,100,101,.82) 14%,
      rgba(88,87,91,.68) 42%,
      rgba(72,72,77,.62) 72%,
      rgba(63,63,68,.72) 100%
    ),
    none !important;
}

/* restore the actual background image already assigned by v33 */
#projects{
  background-image:
    linear-gradient(
      to bottom,
      rgba(111,107,105,.90) 0%,
      rgba(101,99,100,.79) 16%,
      rgba(87,86,90,.66) 44%,
      rgba(71,71,76,.63) 74%,
      rgba(61,61,66,.72) 100%
    ),
    url('../assets/images/site/legacy/chatgpt-image-sep-5-2026-07-54-53-pm-2.png') !important;
}

/* create a seamless bridge from hero into projects */
#projects::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-150px;
  height:210px;
  pointer-events:none;
  z-index:-1;
  background:linear-gradient(
    to bottom,
    rgba(111,109,111,0) 0%,
    rgba(107,104,104,.44) 42%,
    rgba(101,99,100,.88) 100%
  );
}

/* heading colors blend better with the background */
#projects .kicker{
  color:rgba(246,239,230,.62) !important;
}
#projects .section-title{
  color:#f3eee7 !important;
  text-shadow:0 1px 18px rgba(0,0,0,.10);
}

/* cards: less grey-box feeling, more integrated */
#projects .category-card{
  border:1px solid rgba(255,255,255,.11) !important;
  background:rgba(23,23,25,.16) !important;
  box-shadow:
    0 22px 60px rgba(20,20,22,.18),
    inset 0 1px 0 rgba(255,255,255,.05) !important;
  backdrop-filter:blur(4px);
}

/* softer image treatment */
#projects .category-card .image{
  filter:saturate(.90) brightness(.94) contrast(.96);
}
#projects .category-card::after{
  background:
    linear-gradient(
      to top,
      rgba(16,16,18,.62) 0%,
      rgba(18,18,20,.24) 28%,
      rgba(18,18,20,.03) 58%,
      rgba(255,255,255,.02) 100%
    ) !important;
}

/* project card copy */
#projects .category-content h3{
  color:#f2ede6 !important;
  text-shadow:0 2px 16px rgba(0,0,0,.20);
}
#projects .category-content .meta,
#projects .index{
  color:rgba(245,240,233,.74) !important;
}

/* make the page edges feel continuous instead of boxed */
#projects.shell{
  width:min(96%,1500px) !important;
}

/* continue the same palette into About instead of another sudden shift */
.about-wrap{
  background:
    linear-gradient(
      to bottom,
      rgba(61,61,66,.72) 0%,
      rgba(70,69,73,.74) 28%,
      rgba(82,79,80,.72) 62%,
      rgba(91,86,83,.76) 100%
    ),
    url('../assets/images/site/legacy/chatgpt-image-sep-5-2026-07-54-53-pm-2.png') !important;
  background-size:cover !important;
  background-position:center center !important;
  background-attachment:fixed !important;
}

/* remove any hard seam inherited from older versions */
#projects::before,
.about-wrap::before,
.contact-wrap::before{
  display:none !important;
}


/* v35 — full-bleed Projects background + transparent mascot cutouts */
#projects{
  width:100% !important;
  max-width:none !important;
  margin-left:0 !important;
  margin-right:0 !important;
  padding-left:max(32px,calc((100vw - 1500px)/2)) !important;
  padding-right:max(32px,calc((100vw - 1500px)/2)) !important;
  box-sizing:border-box !important;
  border-radius:0 !important;
}

/* Cards use the transparent PNG characters on top of the common page background */
#projects .category-card.research .image{
  background-image:url('../assets/images/site/categories/research-character.png') !important;
  background-size:contain !important;
  background-repeat:no-repeat !important;
  background-position:center 58% !important;
  background-color:transparent !important;
}

#projects .category-card.creative .image{
  background-image:url('../assets/images/site/categories/creative-character-alt.png') !important;
  background-size:contain !important;
  background-repeat:no-repeat !important;
  background-position:center 57% !important;
  background-color:transparent !important;
}

/* Let the shared scene background show through the cards more naturally */
#projects .category-card{
  background:rgba(255,255,255,.035) !important;
  border-color:rgba(255,255,255,.12) !important;
  box-shadow:0 18px 48px rgba(15,15,18,.14) !important;
  backdrop-filter:none !important;
}
#projects .category-card::after{
  background:linear-gradient(
    to top,
    rgba(18,18,20,.52) 0%,
    rgba(18,18,20,.18) 30%,
    rgba(18,18,20,0) 62%
  ) !important;
}

/* Keep category copy readable */
#projects .category-content h3{
  color:#f3eee8 !important;
}
#projects .category-content .meta,
#projects .index{
  color:rgba(245,240,234,.76) !important;
}

@media(max-width:900px){
  #projects{
    padding-left:20px !important;
    padding-right:20px !important;
  }
}


/* v36 — exact supplied Explore My Work background + updated Creative mascot */

/* PAGE 2 ONLY: use the user's second image cleanly as the full background */
#projects{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  box-sizing:border-box !important;
  padding-left:max(34px,calc((100vw - 1500px)/2)) !important;
  padding-right:max(34px,calc((100vw - 1500px)/2)) !important;
  padding-top:96px !important;
  padding-bottom:110px !important;

  background-image:url('../assets/images/site/legacy/chatgpt-image-sep-5-2026-07-54-53-pm-2.png') !important;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
  background-attachment:scroll !important;
  background-color:#39393b !important;
}

/* Remove old overlays/gradients that were changing the supplied background */
#projects::before,
#projects::after{
  display:none !important;
}

/* Keep the background visible behind the cards */
#projects .category-card{
  background:rgba(20,20,22,.10) !important;
  border:1px solid rgba(255,255,255,.14) !important;
  box-shadow:0 20px 55px rgba(10,10,12,.16) !important;
  backdrop-filter:none !important;
}

/* UPDATED Creative & Interactive transparent PNG */
#projects .category-card.creative .image{
  background-image:url('../assets/images/site/categories/creative-character.png') !important;
  background-size:contain !important;
  background-repeat:no-repeat !important;
  background-position:center 54% !important;
  background-color:transparent !important;
  filter:none !important;
}

/* Do not wash out either mascot with previous image filters */
#projects .category-card.research .image,
#projects .category-card.creative .image{
  filter:none !important;
}

/* Soft bottom treatment only for text readability, not the whole page */
#projects .category-card::after{
  background:linear-gradient(
    to top,
    rgba(16,16,18,.54) 0%,
    rgba(16,16,18,.20) 26%,
    rgba(16,16,18,0) 58%
  ) !important;
}

/* Text harmonized with the warm spotlight background */
#projects .kicker{
  color:rgba(245,236,225,.64) !important;
}
#projects .section-title{
  color:#f3eee7 !important;
}
#projects .category-content h3{
  color:#f4efe8 !important;
}
#projects .category-content .meta,
#projects .index{
  color:rgba(245,239,231,.76) !important;
}

@media(max-width:900px){
  #projects{
    padding-left:20px !important;
    padding-right:20px !important;
    background-position:42% center !important;
  }
}


/* v37 — cleaner hero */
.hero .brand{visibility:hidden !important;}
.hero-bottom-meta{display:none !important;}


/* v39 — one continuous generated continuation background after the hero */
#homePage{
  background:#17191e !important;
}

#projects,
.about-wrap,
.contact-wrap{
  position:relative !important;
  width:100% !important;
  max-width:none !important;
  margin-left:0 !important;
  margin-right:0 !important;
  box-sizing:border-box !important;
  background-color:transparent !important;
  background-image:none !important;
}

/* The continuation image is anchored once behind Projects + About + Contact */
#projects{
  isolation:isolate;
  padding-left:max(34px,calc((100vw - 1500px)/2)) !important;
  padding-right:max(34px,calc((100vw - 1500px)/2)) !important;
}

#projects::before{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  z-index:-2 !important;
  left:0 !important;
  top:-2px !important;
  width:100% !important;
  height:calc(100% + 100vh + 900px) !important;
  background-image:url('../assets/images/site/legacy/a-minimal-moody-cinematic-empty-scene-abstract-b.png') !important;
  background-size:100% 100% !important;
  background-position:center top !important;
  background-repeat:no-repeat !important;
  pointer-events:none !important;
}

/* Very subtle veil only to smooth the join; no separate second background */
#projects::after{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  z-index:-1 !important;
  inset:0 !important;
  background:linear-gradient(to bottom,
    rgba(27,29,34,0) 0%,
    rgba(27,29,34,.03) 45%,
    rgba(18,20,25,.12) 100%) !important;
  pointer-events:none !important;
}

#projects > *{
  position:relative;
  z-index:1;
}

/* Remove old section seams and inherited background layers */
.about-wrap::before,
.about-wrap::after,
.contact-wrap::before,
.contact-wrap::after{
  display:none !important;
}

.about-wrap,
.contact-wrap{
  background:transparent !important;
}

/* Cards sit directly in the scene */
#projects .category-card{
  background:rgba(17,18,22,.08) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  box-shadow:0 20px 55px rgba(0,0,0,.15) !important;
  backdrop-filter:none !important;
}

@media(max-width:900px){
  #projects{
    padding-left:20px !important;
    padding-right:20px !important;
  }
  #projects::before{
    background-size:auto 100% !important;
    background-position:center top !important;
  }
}


/* v46 — based strictly on v39 */

/* PAGE 1: exact user supplied hero */
.hero {
    background-image: url('../assets/images/site/legacy/chatgpt-image-sep-5-2026-07-39-01-pm-1.png') !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-color: #5b5b61 !important;
}
.hero-bg {
    background: transparent !important;
    background-image: none !important;
}

/* PAGE 2: handmade continuation of page 1's lighting atmosphere */
#projects {
    width: 100vw !important;
    max-width: none !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    box-sizing: border-box !important;
    background:
      radial-gradient(ellipse 58% 35% at 25% 3%,
        rgba(255,224,174,.56) 0%,
        rgba(211,178,139,.29) 28%,
        rgba(116,105,103,.12) 56%,
        rgba(0,0,0,0) 76%),
      radial-gradient(ellipse 54% 27% at 31% 94%,
        rgba(220,170,112,.20) 0%,
        rgba(106,91,88,.10) 47%,
        rgba(0,0,0,0) 74%),
      linear-gradient(112deg,
        #6d6868 0%,
        #5d5b60 30%,
        #44464f 61%,
        #30343e 100%) !important;
    background-attachment: scroll !important;
}
#projects::before {
    content:"" !important;
    display:block !important;
    position:absolute !important;
    inset:0 !important;
    pointer-events:none !important;
    background:
      linear-gradient(to bottom,
        rgba(79,77,81,.08) 0%,
        rgba(56,57,64,.12) 35%,
        rgba(34,37,45,.28) 100%) !important;
    z-index:0 !important;
}
#projects > * {
    position:relative !important;
    z-index:1 !important;
}


/* v50 — clearer hero copy + page-2 palette matched to hero */

/* Hero secondary copy: white for readability over the warm flashlight beam */
.hero-role,
.hero-description{
  color:rgba(255,255,255,.94) !important;
  text-shadow:0 2px 14px rgba(20,22,28,.28) !important;
}
.hero-description{
  color:rgba(255,255,255,.88) !important;
}

/* Explore button: white text + subtle translucent dark glass */
.hero-copy-reference .btn,
.hero-copy-reference .btn.primary{
  color:#fff !important;
  border-color:rgba(255,255,255,.58) !important;
  background:rgba(27,30,37,.22) !important;
  text-shadow:0 1px 10px rgba(0,0,0,.18) !important;
  backdrop-filter:blur(5px) !important;
}
.hero-copy-reference .btn:hover{
  background:rgba(255,255,255,.13) !important;
  border-color:rgba(255,255,255,.82) !important;
}

/* PAGE 2: no separate image — build directly from page-1 color palette */
#projects{
  background-image:none !important;
  background:
    radial-gradient(ellipse 66% 40% at 18% 0%,
      rgba(246,205,151,.48) 0%,
      rgba(200,160,122,.28) 28%,
      rgba(119,105,102,.11) 58%,
      transparent 78%),
    radial-gradient(ellipse 46% 30% at 30% 95%,
      rgba(185,133,87,.15) 0%,
      rgba(79,71,72,.08) 54%,
      transparent 80%),
    linear-gradient(112deg,
      #81746d 0%,
      #6c6667 26%,
      #555761 57%,
      #39404d 82%,
      #2e3542 100%) !important;
  background-color:#3e424c !important;
}

/* Soft continuation at the very top; no visible cut line */
#projects::before{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  inset:0 0 auto 0 !important;
  height:250px !important;
  z-index:0 !important;
  pointer-events:none !important;
  background:
    linear-gradient(to bottom,
      rgba(151,137,128,.38) 0%,
      rgba(119,111,111,.19) 38%,
      rgba(85,86,94,.06) 74%,
      rgba(0,0,0,0) 100%) !important;
}
#projects::after{
  display:none !important;
}
#projects > *{
  position:relative !important;
  z-index:1 !important;
}

/* Keep Projects typography coherent with the first page */
#projects .kicker{
  color:rgba(255,255,255,.66) !important;
}
#projects .section-title{
  color:#fff !important;
}
#projects .category-content h3{
  color:#fff !important;
}
#projects .category-content .meta,
#projects .index{
  color:rgba(255,255,255,.76) !important;
}


/* v51 — hero title slightly upper-left + page 2 redesigned without any image */

/* Move the handwritten identity block a little more to the upper-left */
.hero-copy-reference{
  left:10.6% !important;
  top:12.8% !important;
  width:44% !important;
  max-width:760px !important;
}
.hero-handwritten .hello{
  margin-left:4.5% !important;
}
.hero-handwritten .im{
  margin-left:7.5% !important;
}

/* PAGE 2 — completely image-free.
   It is intentionally darker than page 1 so the visitor clearly feels a new section,
   while keeping the same warm-light / blue-charcoal palette. */
#projects{
  background-image:none !important;
  background-color:#343943 !important;
  background:
    radial-gradient(
      ellipse 62% 42% at 12% 0%,
      rgba(235,190,137,.32) 0%,
      rgba(170,139,114,.19) 29%,
      rgba(96,87,88,.08) 57%,
      rgba(0,0,0,0) 78%
    ),
    radial-gradient(
      ellipse 42% 28% at 82% 82%,
      rgba(76,83,101,.20) 0%,
      rgba(52,59,73,.08) 56%,
      rgba(0,0,0,0) 82%
    ),
    linear-gradient(
      118deg,
      #746965 0%,
      #625e61 25%,
      #51535c 49%,
      #414650 70%,
      #313845 100%
    ) !important;
}

/* A very subtle soft haze at the top instead of a second image */
#projects::before{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  top:0 !important;
  height:210px !important;
  pointer-events:none !important;
  z-index:0 !important;
  background:
    linear-gradient(
      to bottom,
      rgba(218,186,156,.17) 0%,
      rgba(138,123,119,.09) 42%,
      rgba(0,0,0,0) 100%
    ) !important;
}
#projects::after{
  display:none !important;
}
#projects > *{
  position:relative !important;
  z-index:1 !important;
}

/* Slightly cleaner cards so page 2 reads as its own section */
#projects .category-card{
  background:rgba(19,21,26,.14) !important;
  border:1px solid rgba(255,255,255,.13) !important;
  box-shadow:0 18px 46px rgba(10,12,16,.15) !important;
}


/* v52 — ONLY handwritten Hi / I'm / Revsen Özdemir moves upper-left.
   Role, description and button stay exactly where they were in v51. */

/* Undo movement of the whole copy wrapper */
.hero-copy-reference{
  left:10.6% !important;
  top:12.8% !important;
}

/* Counter-move everything except the handwritten title back to its prior visual position */
.hero-role,
.hero-description,
.hero-copy-reference .btn,
.hero-copy-reference .hero-actions{
  position:relative !important;
  left:0 !important;
  top:0 !important;
}

/* Move only the handwritten title slightly farther left/up */
.hero-handwritten{
  position:relative !important;
  transform:translate(-34px,-24px) !important;
}


/* v54 — EXACT uploaded image as PAGE 2 background */
#projects {
    position: relative !important;
    width: 100vw !important;
    max-width: none !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    background: url('../assets/images/site/legacy/chatgpt-image-sep-5-2026-09-35-11-pm-1.png') center center / cover no-repeat !important;
    background-color: #111722 !important;
}
#projects::before,
#projects::after {
    display: none !important;
    content: none !important;
}
#projects > * {
    position: relative !important;
    z-index: 1 !important;
}


/* v55 — new user-provided image used exactly for PAGE 2 */
#projects {
    position: relative !important;
    width: 100vw !important;
    max-width: none !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    background: url('../assets/images/site/legacy/chatgpt-image-sep-5-2026-09-42-04-pm-1.png') center center / cover no-repeat !important;
    background-color: #10141d !important;
}
#projects::before,
#projects::after {
    display:none !important;
    content:none !important;
}


/* v56 — confirmed exact image for page 2 / Explore My Work */
#projects {
    position:relative !important;
    width:100vw !important;
    max-width:none !important;
    margin-left:calc(50% - 50vw) !important;
    margin-right:calc(50% - 50vw) !important;
    background-image:url('../assets/images/site/legacy/chatgpt-image-sep-5-2026-09-42-04-pm-1.png') !important;
    background-size:cover !important;
    background-position:center center !important;
    background-repeat:no-repeat !important;
    background-color:#10141d !important;
}
#projects::before,
#projects::after {
    display:none !important;
    content:none !important;
}
#projects > * {
    position:relative !important;
    z-index:1 !important;
}


/* v83 — smaller project information text */
#detailPage .project-info .info-copy{
  font-size:13px !important;
  line-height:1.58 !important;
}
#detailPage .project-info .info-list{
  font-size:13px !important;
  line-height:1.68 !important;
}


/* --- v49-exact-sequence --- */
/* Exact image order requested: 1 = hero, 2 = continuation/projects. */
html,body,#homePage{margin:0!important;padding:0!important;width:100%!important;max-width:none!important;overflow-x:hidden!important;background:#10141d!important;}
.hero{min-height:100vh!important;background:#10141d!important;}
.hero-bg{inset:0!important;background-image:url("../assets/images/site/legacy/chatgpt-image-sep-5-2026-09-17-57-pm.png")!important;background-size:cover!important;background-position:center center!important;background-repeat:no-repeat!important;}
.hero::after{display:none!important;}
#projects{position:relative!important;width:100%!important;max-width:none!important;margin:0!important;padding:92px 34px 105px!important;background-image:url("../assets/images/site/legacy/adsz-tasarm-3.png")!important;background-size:cover!important;background-position:center top!important;background-repeat:no-repeat!important;}
#projects::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to bottom,rgba(16,20,29,.05),rgba(16,20,29,.10) 28%,rgba(16,20,29,.16));z-index:0;}
#projects>*{position:relative;z-index:1;}
@media(max-width:900px){#projects{padding:72px 20px 84px!important;background-size:cover!important;}}


/* --- v61-structural-fullbleed-fix --- */
html, body {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  overflow-x: hidden !important;
  background: #10141d !important;
}

#projects {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 100vh !important;
  margin: 0 !important;
  padding: 82px 0 100px !important;
  box-sizing: border-box !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

#projects .projects-inner {
  width: min(1600px, calc(100% - 72px)) !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}

#projects::before,
#projects::after {
  display: none !important;
  content: none !important;
}

/* Page 3 also gets a true full-width section while preserving centered content */
.about-wrap {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

@media (max-width: 700px) {
  #projects .projects-inner {
    width: calc(100% - 32px) !important;
  }
}


/* --- v67-page3-background --- */
#about, .about-section, section.about, [data-section="about"] {
  background-image: url("../assets/images/site/legacy/arka-plan-koyu-16x9-1.png") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  width: 100% !important;
  max-width: none !important;
}


/* --- v68-remove-sticky-black-nav --- */
/* Remove the black sticky bar that appears while scrolling.
   Navigation stays only in its normal position at the top of the hero. */
.hero .nav,
.nav {
  position: relative !important;
  top: auto !important;
  z-index: 20 !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

.hero .nav.scrolled,
.nav.scrolled {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}


/* --- v73-page2-background --- */
#projects {
  background-image: url("../assets/images/site/legacy/adsz-tasarm-6.png") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  width: 100% !important;
  max-width: none !important;
}


/* --- v74-about-contact-redesign --- */
/* Page 3: same background language as page 2 */
#about,
#contact {
  position: relative !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  background-image:
    linear-gradient(rgba(9,12,17,.18), rgba(9,12,17,.32)),
    url("../assets/images/site/legacy/adsz-tasarm-6.png") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

/* Keep the content aligned with the rest of the site */
#about {
  padding: 88px clamp(28px,6vw,110px) 54px !important;
}
#contact {
  padding: 26px clamp(28px,6vw,110px) 88px !important;
}

/* Remove the flat grey blocks and turn them into subtle glass panels */
#about .about-card,
#contact .contact-card {
  width: min(1180px, 100%) !important;
  margin: 0 auto !important;
  background: rgba(10,13,19,.42) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: 0 24px 70px rgba(0,0,0,.22) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

#about .about-card {
  padding: 42px 46px !important;
  border-radius: 28px !important;
  gap: 42px !important;
}

#contact .contact-card {
  padding: 30px 38px !important;
  border-radius: 24px !important;
}

/* Typography: readable on the dark background */
#about .about-label {
  color: rgba(255,255,255,.62) !important;
  letter-spacing: .20em !important;
}
#about .about-title,
#contact h2 {
  color: #fff !important;
}
#about .about-text,
#about .about-tags,
#contact p {
  color: rgba(255,255,255,.72) !important;
}
#about .about-tags {
  border-top-color: rgba(255,255,255,.12) !important;
}

/* Buttons */
#about .btn,
#contact a {
  border-color: rgba(255,255,255,.22) !important;
}
#about .btn:first-child {
  background: #fff !important;
  color: #11151b !important;
}
#about .btn:not(:first-child),
#contact a {
  background: rgba(255,255,255,.07) !important;
  color: #fff !important;
}

/* Portrait integrates better with the new panel */
#about .about-image {
  border: 1px solid rgba(255,255,255,.16) !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.28) !important;
}

/* Remove any visual seam between About and Contact */
#about + #contact {
  border-top: 0 !important;
}

@media (max-width: 900px) {
  #about { padding: 64px 20px 28px !important; }
  #contact { padding: 20px 20px 64px !important; }
  #about .about-card { padding: 28px 24px !important; border-radius: 22px !important; }
  #contact .contact-card { padding: 26px 24px !important; border-radius: 20px !important; }
}


/* --- v75-category-project-backgrounds --- */
/* Research & Academic + Creative & Interactive pages */
#researchPage,
#creativePage {
  min-height:100vh !important;
  background-image:
    linear-gradient(rgba(8,11,16,.18), rgba(8,11,16,.34)),
    url("../assets/images/site/backgrounds/creative-resume-background.png") !important;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
  background-attachment:fixed !important;
}

/* Headings and copy stay readable on the new dark background */
#researchPage .inner-head,
#creativePage .inner-head {
  border-bottom-color:rgba(255,255,255,.12) !important;
}
#researchPage .inner-head h1,
#creativePage .inner-head h1 {
  color:#fff !important;
}
#researchPage .inner-head p,
#creativePage .inner-head p,
#researchPage .back,
#creativePage .back {
  color:rgba(255,255,255,.72) !important;
}

/* Small project cards use the same background language */
#researchPage .project-card,
#creativePage .project-card {
  background-image:
    linear-gradient(rgba(14,17,22,.20), rgba(14,17,22,.42)),
    url("../assets/images/site/backgrounds/creative-resume-background.png") !important;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
  border:1px solid rgba(255,255,255,.14) !important;
  box-shadow:0 18px 48px rgba(0,0,0,.20) !important;
}

/* Existing per-card gradient art becomes a subtle tint instead of replacing the background */
#researchPage .project-card .pcbg,
#creativePage .project-card .pcbg {
  opacity:.20 !important;
  mix-blend-mode:soft-light !important;
}

#researchPage .project-card .pcoverlay,
#creativePage .project-card .pcoverlay {
  background:linear-gradient(
    to top,
    rgba(5,7,10,.76) 0%,
    rgba(5,7,10,.28) 38%,
    rgba(5,7,10,.04) 70%
  ) !important;
}

#researchPage .pccontent h3,
#creativePage .pccontent h3 {
  color:#fff !important;
}
#researchPage .pccontent p,
#creativePage .pccontent p,
#researchPage .pcno,
#creativePage .pcno,
#researchPage .pctag,
#creativePage .pctag {
  color:rgba(255,255,255,.72) !important;
}

@media(max-width:900px){
  #researchPage,
  #creativePage {
    background-attachment:scroll !important;
  }
}


/* --- v76-project-heading-nav-white --- */
/* HOME / Projects hierarchy: PROJECTS is now the dominant heading */
#homePage #projects .kicker{
  font-size:clamp(38px,4.5vw,68px) !important;
  line-height:.95 !important;
  font-weight:700 !important;
  letter-spacing:-.045em !important;
  text-transform:none !important;
  color:#fff !important;
  margin-bottom:10px !important;
}
#homePage #projects .kicker::first-letter{
  text-transform:uppercase;
}
#homePage #projects .section-title{
  font-size:clamp(18px,1.7vw,27px) !important;
  line-height:1.1 !important;
  font-weight:500 !important;
  letter-spacing:-.02em !important;
  color:rgba(255,255,255,.72) !important;
  margin-top:0 !important;
  margin-bottom:30px !important;
}

/* Inner Research / Creative / project-detail navigation must stay white */
#researchPage .nav button,
#creativePage .nav button,
#detailPage .nav button,
#researchPage .navlinks button,
#creativePage .navlinks button,
#detailPage .navlinks button{
  color:#fff !important;
  opacity:.86 !important;
}
#researchPage .nav button:hover,
#creativePage .nav button:hover,
#detailPage .nav button:hover,
#researchPage .navlinks button:hover,
#creativePage .navlinks button:hover,
#detailPage .navlinks button:hover{
  color:#fff !important;
  opacity:1 !important;
}


/* --- v78-only-requested-inner-edits --- */
/* Remove only the Revsen Özdemir name/brand on Research, Creative and small project pages */
#researchPage .brand,
#creativePage .brand,
#detailPage .brand{
  display:none !important;
}

/* Small project card titles: white */
#researchPage .project-card h3,
#creativePage .project-card h3{
  color:#fff !important;
}

/* CV text in the upper-right navigation on inner pages: white */
#researchPage .navlinks button,
#creativePage .navlinks button,
#detailPage .navlinks button,
#researchPage .navlinks a,
#creativePage .navlinks a,
#detailPage .navlinks a{
  color:#fff !important;
}


/* --- v79-detail-fix --- */
/* Project detail pages: keep the top navigation on the RIGHT */
#detailPage .navlinks{
  margin-left:auto !important;
  justify-content:flex-end !important;
}

/* All headings/titles inside the small project detail pages are white */
#detailPage #detailTitle,
#detailPage .project-media-title,
#detailPage .info-label,
#detailPage h1,
#detailPage h2,
#detailPage h3,
#detailPage h4{
  color:#fff !important;
}

/* Keep detail-page top navigation including CV white */
#detailPage .navlinks button,
#detailPage .navlinks a,
#detailPage .cv{
  color:#fff !important;
}


/* --- v80-category-nav-consistency --- */
/* Category + detail pages: one consistent top-right navigation */
#researchPage .nav,
#creativePage .nav,
#detailPage .nav{
  justify-content:flex-end !important;
}

#researchPage .navlinks,
#creativePage .navlinks,
#detailPage .navlinks{
  margin-left:auto !important;
  justify-content:flex-end !important;
  width:auto !important;
}

/* Make navigation readable and consistent on dark project backgrounds */
#researchPage .navlinks button,
#researchPage .navlinks a,
#creativePage .navlinks button,
#creativePage .navlinks a,
#detailPage .navlinks button,
#detailPage .navlinks a{
  color:#fff !important;
}

/* Category headings and small-project titles stay white */
#researchPage .inner-head h1,
#creativePage .inner-head h1,
#researchPage .project-card h2,
#researchPage .project-card h3,
#creativePage .project-card h2,
#creativePage .project-card h3,
#detailPage #detailTitle{
  color:#fff !important;
}


/* --- v84-project-copy-more-compact --- */
/* False-Colour/detail information panel: more compact typography */
#detailPage .project-info .info-copy,
#detailPage .project-info .info-list{
  font-size:11.5px !important;
  line-height:1.48 !important;
}
#detailPage .project-info .info-label{
  font-size:10px !important;
  margin-bottom:7px !important;
}


/* --- v86-project-copy-hero-role-match --- */
#detailPage .project-info .info-copy{
  font-size:12px !important;
  line-height:1.55 !important;
  color:rgba(255,255,255,.94) !important;
  font-weight:400 !important;
}


/* --- v90-urban-heat-exact-main-image --- */
#researchPage .project-grid .project-card:first-child .pcbg{
  background-image:url("../assets/images/projects/urban-heat/hero.png") !important;
  background-size:cover !important;
  background-position:center center !important;
}


/* --- v91-all-project-card-image-hover --- */
.page:not(#homePage) .project-card .pcbg{
  opacity:.58 !important;
  filter:grayscale(.70) saturate(.48) brightness(.64) contrast(1.04) !important;
  mix-blend-mode:normal !important;
  background-size:cover !important;
  background-position:center !important;
  transition:transform .55s cubic-bezier(.2,.8,.2,1), opacity .45s ease, filter .45s ease !important;
}
.page:not(#homePage) .project-card .pcoverlay{
  background:linear-gradient(to top,rgba(4,6,9,.82) 0%,rgba(4,6,9,.34) 42%,rgba(4,6,9,.12) 72%,rgba(4,6,9,.08) 100%) !important;
  transition:background .45s ease !important;
}
.page:not(#homePage) .project-card:hover .pcbg{
  opacity:1 !important;
  filter:grayscale(0) saturate(1) brightness(.90) contrast(1.02) !important;
  transform:scale(1.055) !important;
}
.page:not(#homePage) .project-card:hover .pcoverlay{
  background:linear-gradient(to top,rgba(4,6,9,.70) 0%,rgba(4,6,9,.18) 42%,rgba(4,6,9,.03) 72%,rgba(4,6,9,.01) 100%) !important;
}


/* --- v95-historical-istanbul-hero --- */
#creativePage .project-grid .project-card:nth-child(2) .pcbg{
  background-image:url("../assets/images/projects/historical-istanbul/hero.png") !important;
  background-size:cover !important;
  background-position:center center !important;
}


/* --- v100-custom-game-hero --- */
#creativePage .project-grid .project-card:first-child .pcbg{background-image:url("../assets/images/projects/custom-game/hero.png") !important;background-size:cover !important;background-position:center center !important;}


/* --- v102-simulation-cover --- */
#researchPage .project-grid .project-card:nth-child(2) .pcbg{
  background-image:url("../assets/images/projects/immersive-simulation/media-01.png") !important;
  background-size:cover !important;
  background-position:center center !important;
}


/* --- v103-simulation-cover-update --- */
#researchPage .project-grid .project-card:nth-child(2) .pcbg{
  background-image:url("../assets/images/projects/immersive-simulation/media-02.png") !important;
  background-size:cover !important;
  background-position:center center !important;
}


/* --- v104-simulation-cover --- */
#researchPage .project-grid .project-card:nth-child(2) .pcbg {
  background-image:url("../assets/images/projects/immersive-simulation/hero.png") !important;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
}


/* --- v107-simulation-exact-image --- */
#researchPage .project-grid .project-card:nth-child(2) .pcbg {
  background-image: url("../assets/images/projects/immersive-simulation/hero.png") !important;
  background-size: cover !important;
  background-position: center center !important;
}


/* --- v71-correct-page1-image --- */
.hero .hero-bg {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    background: url("../assets/images/site/home/hero.png") center center / cover no-repeat !important;
    background-image: url("../assets/images/site/home/hero.png") !important;
    background-position: center center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    opacity: 1 !important;
    filter: none !important;
}

/* v111 — Resume page */
#resumePage{
  min-height:100vh;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
  background-attachment:scroll !important;
  color:#fff;
}
#resumePage::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(6,9,14,.42),rgba(6,9,14,.64));
  z-index:0;
}
#resumePage > .shell{position:relative;z-index:1}
.resume-wrap{padding:36px 0 90px}
.resume-hero{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:40px;
  align-items:end;
  padding:55px 0 52px;
  border-bottom:1px solid rgba(255,255,255,.16);
}
.resume-kicker{
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(255,255,255,.58);
  margin-bottom:18px;
}
.resume-name{
  margin:0 0 10px;
  font-size:clamp(42px,6vw,82px);
  line-height:.95;
  letter-spacing:-.045em;
  font-weight:650;
}
.resume-role{
  font-size:21px;
  font-weight:600;
  margin-bottom:8px;
}
.resume-focus{
  font-size:15px;
  color:rgba(255,255,255,.72);
  margin-bottom:22px;
}
.resume-summary{
  max-width:730px;
  font-size:15px;
  line-height:1.7;
  color:rgba(255,255,255,.78);
}
.resume-download{
  align-self:end;
  white-space:nowrap;
  border:1px solid rgba(255,255,255,.28);
  background:rgba(10,12,17,.25);
  color:#fff;
  padding:13px 18px;
  border-radius:999px;
  font:inherit;
  cursor:pointer;
  text-decoration:none;
  transition:.2s ease;
}
.resume-download:hover{background:rgba(255,255,255,.1);transform:translateY(-2px)}
.resume-section{
  padding:50px 0;
  border-bottom:1px solid rgba(255,255,255,.14);
}
.resume-section-title{
  margin:0 0 32px;
  font-size:13px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(255,255,255,.62);
}
.resume-entry{
  display:grid;
  grid-template-columns:170px minmax(0,1fr);
  gap:34px;
  padding:0 0 34px;
}
.resume-entry:last-child{padding-bottom:0}
.resume-date{
  font-size:12px;
  letter-spacing:.08em;
  color:rgba(255,255,255,.5);
  padding-top:4px;
}
.resume-entry h3{
  margin:0 0 7px;
  color:#fff;
  font-size:18px;
  line-height:1.3;
}
.resume-place{
  font-size:14px;
  color:rgba(255,255,255,.68);
  margin-bottom:11px;
}
.resume-desc{
  max-width:760px;
  font-size:14px;
  line-height:1.65;
  color:rgba(255,255,255,.7);
}
.resume-work{
  display:grid;
  grid-template-columns:170px minmax(0,1fr);
  gap:34px;
  padding:0 0 31px;
}
.resume-work:last-child{padding-bottom:0}
.resume-work h3{margin:0 0 6px;font-size:18px;color:#fff}
.resume-work-meta{font-size:13px;color:rgba(255,255,255,.62);margin-bottom:11px}
.resume-project-link{
  border:0;
  padding:0;
  background:none;
  color:#fff;
  font:inherit;
  font-size:13px;
  cursor:pointer;
  opacity:.82;
}
.resume-project-link:hover{opacity:1}
.resume-skills{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:13px 34px;
  max-width:920px;
}
.resume-skill{
  padding-bottom:10px;
  border-bottom:1px solid rgba(255,255,255,.1);
  font-size:14px;
  color:rgba(255,255,255,.82);
}
.resume-bottom{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:70px;
}
.resume-mini-title{
  margin:0 0 22px;
  font-size:13px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(255,255,255,.62);
}
.resume-line{
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:10px 0;
  border-bottom:1px solid rgba(255,255,255,.1);
  font-size:14px;
}
.resume-line span:last-child{color:rgba(255,255,255,.62);text-align:right}
.resume-contact a{color:#fff;text-decoration:none}
.resume-contact a:hover{text-decoration:underline}
#resumePage .navlinks{margin-left:auto !important;justify-content:flex-end !important;width:auto !important}
#resumePage .navlinks button,#resumePage .navlinks a{color:#fff !important}

@media(max-width:760px){
  .resume-hero{grid-template-columns:1fr;gap:25px;padding-top:35px}
  .resume-download{justify-self:start}
  .resume-entry,.resume-work{grid-template-columns:1fr;gap:8px}
  .resume-skills{grid-template-columns:1fr 1fr}
  .resume-bottom{grid-template-columns:1fr;gap:44px}
}


.video-frame video{
  width:100%;
  height:100%;
  aspect-ratio:16/9;
  display:block;
  object-fit:contain;
  border-radius:18px;
  background:#000;
}