:root{--bg-gradient-onyx:linear-gradient(
  to bottom right, 
  hsl(240, 1%, 25%) 3%, 
  hsl(0, 0%, 19%) 97%
);
--bg-gradient-jet:linear-gradient(
  to bottom right, 
  hsla(240, 1%, 18%, 0.251) 0%, 
  hsla(240, 2%, 11%, 0) 100%
), hsl(240, 2%, 13%);
--bg-gradient-yellow-1:linear-gradient(
  to bottom right, 
  hsl(45, 100%, 71%) 0%, 
  hsla(36, 100%, 69%, 0) 50%
);
--bg-gradient-yellow-2:linear-gradient(
  135deg, 
  hsla(45, 100%, 71%, 0.251) 0%, 
  hsla(35, 100%, 68%, 0) 59.86%
), hsl(240, 2%, 13%);
--border-gradient-onyx:linear-gradient(
  to bottom right, 
  hsl(0, 0%, 25%) 0%, 
  hsla(0, 0%, 25%, 0) 50%
);
--text-gradient-yellow:linear-gradient(
  to right, 
  hsl(45, 100%, 72%), 
  hsl(35, 100%, 68%)
);
--jet:hsl(0, 0%, 22%);
--onyx:hsl(240, 1%, 17%);
--eerie-black-1:hsl(240, 2%, 13%);
--eerie-black-2:hsl(240, 2%, 12%);
--smoky-black:hsl(0, 0%, 7%);
--white-1:hsl(0, 0%, 100%);
--white-2:hsl(0, 0%, 98%);
--orange-yellow-crayola:hsl(45, 100%, 72%);
--vegas-gold:hsl(45, 54%, 58%);
--light-gray:hsl(0, 0%, 84%);
--light-gray-70:hsla(0, 0%, 84%, 0.7);
--bittersweet-shimmer:hsl(0, 43%, 51%);
--visited-link:hsl(275, 90%, 51%);
--ff-poppins:'Poppins', sans-serif;
--fs-1:24px;
--fs-2:18px;
--fs-3:17px;
--fs-4:16px;
--fs-5:15px;
--fs-6:14px;
--fs-7:13px;
--fs-8:11px;
--fw-300:300;
--fw-400:400;
--fw-500:500;
--fw-600:600;
--shadow-1:-4px 8px 24px hsla(0, 0%, 0%, 0.25);
--shadow-2:0 16px 30px hsla(0, 0%, 0%, 0.25);
--shadow-3:0 16px 40px hsla(0, 0%, 0%, 0.25);
--shadow-4:0 25px 50px hsla(0, 0%, 0%, 0.15);
--shadow-5:0 24px 80px hsla(0, 0%, 0%, 0.25);
--transition-1:0.25s ease;
--transition-2:0.5s ease-in-out}

*,*::before,*::after{margin:0;
padding:0;
box-sizing:border-box}

a{text-decoration:none}

li{list-style:none}

img,ion-icon,a,button,time,span{display:block}

button{font:inherit;
background:none;
border:none;
text-align:left;
cursor:pointer}

input,textarea{display:block;
width:100%;
background:none;
font:inherit}

::selection{background:var(--orange-yellow-crayola);
color:var(--smoky-black)}

:focus{outline-color:var(--orange-yellow-crayola)}

html{font-family:var(--ff-poppins)}

body{background:var(--smoky-black)}

.hidden{display:none}

.visible{display:block}

.sidebar,article{background:var(--eerie-black-2);
border:1px solid var(--jet);
border-radius:20px;
padding:15px;
box-shadow:var(--shadow-1);
z-index:1}

.separator-A,.separator-B,.separator-mid{width:100%;
height:1px;
background:var(--jet);
margin:16px 0}

.icon-box{position:relative;
background:var(--border-gradient-onyx);
width:30px;
height:30px;
border-radius:8px;
display:flex;
justify-content:center;
align-items:center;
font-size:16px;
color:var(--orange-yellow-crayola);
box-shadow:var(--shadow-1);
z-index:1}

.icon-box::before{content:"";
position:absolute;
inset:1px;
background:var(--eerie-black-1);
border-radius:inherit;
z-index:-1}

.icon-box ion-icon{--ionicon-stroke-width:35px}

article{display:none}

article.active{display:block;
animation:fade 0.5s ease backwards}

@keyframes fade{0%{opacity:0}

100%{opacity:1}

}

.h2,.h3,.h4,.h5{color:var(--white-2);
text-transform:capitalize}

.h2{font-size:var(--fs-1)}

.h3{font-size:var(--fs-2)}

.h4{font-size:var(--fs-4)}

.h5{font-size:var(--fs-7);
font-weight:var(--fw-500)}

.article-title{position:relative;
padding-bottom:7px}

.article-title::after{content:"";
position:absolute;
bottom:0;
left:0;
width:30px;
height:3px;
background:var(--text-gradient-yellow);
border-radius:3px}

body::-webkit-scrollbar { width: 20px; }
body::-webkit-scrollbar-track { background: var(--smoky-black); }
body::-webkit-scrollbar-thumb {
  border: 5px solid var(--smoky-black);
  background: hsl(0 0% 100% / .1);
  border-radius: 20px;
  box-shadow:
    inset  1px  1px 0 hsl(0 0% 100% / .11),
    inset -1px -1px 0 hsl(0 0% 100% / .11);
}
body::-webkit-scrollbar-thumb:hover { background: hsl(0 0% 100% / .15); }
body::-webkit-scrollbar-button { height: 60px; }

.has-scrollbar::-webkit-scrollbar{width:5px;
height:5px}

.has-scrollbar::-webkit-scrollbar-track{background:var(--onyx);
border-radius:5px}

.has-scrollbar::-webkit-scrollbar-thumb{background:var(--orange-yellow-crayola);
border-radius:5px}

.has-scrollbar::-webkit-scrollbar-button{width:20px}

.content-card{position:relative;
background:var(--border-gradient-onyx);
padding:15px;
padding-top:45px;
border-radius:14px;
box-shadow:var(--shadow-2);
cursor:pointer;
z-index:1}

.content-card::before{content:"";
position:absolute;
inset:1px;
background:var(--bg-gradient-jet);
border-radius:inherit;
z-index:-1}

.thank-you-container{padding-bottom:30px}

.thank-you{border-radius:14px}

.thank-you-message{align-content:center;
text-align:center;
padding-bottom:30px}

.return-home-btn{display:flex;
justify-content:center}

.return-home-btn button{display:flex;
justify-content:center;
align-items:center;
gap:10px;
padding:10px 20px;
border-radius:8px;
background:var(--bg-gradient-jet);
color:var(--orange-yellow-crayola);
font-size:var(--fs-6);
font-weight:var(--fw-300);
cursor:pointer;
transition:var(--transition-1);
border:2px solid var(--orange-yellow-crayola)}

main{margin:15px 12px;
margin-bottom:75px;
min-width:259px}

main-content{transition:var(--transition-2)}

.sidebar{margin-bottom:15px;
max-height:112px;
overflow:hidden;
transition:var(--transition-2)}

.sidebar.active{max-height:fit-content}

.sidebar-info{position:relative;
display:flex;
justify-content:flex-start;
align-items:center;
gap:15px}

.avatar-box{border-radius:20px}

.info-content .name{color:var(--white-2);
font-size:var(--fs-3);
font-weight:var(--fw-500);
letter-spacing:-.25px;
margin-bottom:10px}

.info-content .title{color:var(--white-1);
background:var(--onyx);
font-size:var(--fs-8);
font-weight:var(--fw-300);
width:max-content;
padding:3px 12px;
border-radius:8px}

.info_more-btn{position:absolute;
top:-15px;
right:-15px;
border-radius:0 15px;
font-size:13px;
color:var(--orange-yellow-crayola);
background:var(--border-gradient-onyx);
padding:10px;
box-shadow:var(--shadow-2);
transition:var(--transition-1);
z-index:1}

.info_more-btn::before{content:"";
position:absolute;
inset:1px;
border-radius:inherit;
background:var(--bg-gradient-jet);
transition:var(--transition-1);
z-index:-1}

.info_more-btn:hover,.info_more-btn:focus{background:var(--bg-gradient-yellow-1)}

.info_more-btn:hover::before,.info_more-btn:focus::before{background:var(--bg-gradient-yellow-2)}

.info_more-btn span{display:none}

.sidebar-info_more{opacity:0;
visibility:hidden;
transition:var(--transition-2)}

.sidebar.active .sidebar-info_more{opacity:1;
visibility:visible}

.contacts-list{display:grid;
grid-template-columns:1fr;
gap:16px}

.contact-item{min-width:100%;
display:flex;
align-items:center;
gap:16px}

.contact-info{max-width:calc(100% - 46px);
width:calc(100% - 46px)}

.contact-title{color:var(--light-gray-70);
font-size:var(--fs-8);
text-transform:uppercase;
margin-bottom:2px}

.contact-info :is(.contact-link,time,address){color:var(--white-2);
font-size:var(--fs-7)}

.contact-info address{font-style:normal}

.social-list{display:flex;
justify-content:flex-start;
align-items:center;
gap:15px;
padding-bottom:4px;
padding-left:7px}

.social-item .social-link{color:var(--light-gray-70);
font-size:18px}

.social-item .social-link:hover{color:var(--light-gray)}

.navbar{position:fixed;
bottom:0;
left:0;
width:100%;
background:hsl(240 1% 17% / .75);
backdrop-filter:blur(10px);
border:1px solid var(--jet);
border-radius:12px 12px 0 0;
box-shadow:var(--shadow-2);
z-index:5}

.navbar-list{display:flex;
flex-wrap:wrap;
justify-content:center;
align-items:center;
padding:0 10px}

.navbar-link{color:var(--light-gray);
font-size:var(--fs-8);
padding:20px 7px;
transition:color var(--transition-1)}

.navbar-link:hover,.navbar-link:focus{color:var(--light-gray-70)}

.navbar-link.active{color:var(--orange-yellow-crayola)}

.about .article-title{margin-bottom:15px}

.about-text{color:var(--light-gray);
font-size:var(--fs-6);
font-weight:var(--fw-300);
line-height:1.6;
margin-bottom:15px}

.about-text p{margin-bottom:8px}

.about-more{display:none}

.read-more-btn{color:var(--orange-yellow-crayola);
border:none;
cursor:pointer;
font-size:--fs-5;
border-radius:5px}

.read-more-btn:hover{background-color:var(--eerie-black-1)}

.service{margin-bottom:35px}

.service-title{margin-bottom:20px}

.service-list{display:grid;
grid-template-columns:1fr;
gap:20px}

.service-item{position:relative;
background:var(--border-gradient-onyx);
padding:20px;
border-radius:14px;
box-shadow:var(--shadow-2);
z-index:1}

.service-item::before{content:"";
position:absolute;
inset:1px;
background:var(--bg-gradient-jet);
border-radius:inherit;
z-index:-1}

.service-icon-box{margin-bottom:10px}

.service-icon-box img{margin:auto}

.service-content-box{text-align:center}

.service-item-title{margin-bottom:7px}

.service-item-text{color:var(--light-gray);
font-size:var(--fs-6);
font-weight:var(--fw-3);
line-height:1.6}

.testimonials{margin-bottom:30px}

.testimonials-title{margin-bottom:20px}

.testimonials-list{display:flex;
justify-content:flex-start;
align-items:flex-start;
gap:15px;
margin:0 -15px;
padding:25px 15px;
padding-bottom:35px;
overflow-x:auto;
scroll-behavior:smooth;
overscroll-behavior-inline:contain;
scroll-snap-type:inline mandatory}

.testimonials-item{min-width:100%;
scroll-snap-align:center}

.testimonials-avatar-box{position:absolute;
top:0;
left:0;
transform:translate(15px,-25px);
background:var(--bg-gradient-onyx);
border-radius:14px;
box-shadow:var(--shadow-1)}

.testimonials-item-title{margin-bottom:7px}

.testimonials-text{color:var(--light-gray);
font-size:var(--fs-6);
font-weight:var(--fw-300);
line-height:1.6;
display:-webkit-box;
line-clamp:4;
-webkit-line-clamp:4;
-webkit-box-orient:vertical;
overflow:hidden}

.testimonials-date{display:none}

.modal-container{position:fixed;
top:0;
left:0;
width:100%;
height:100%;
display:flex;
justify-content:center;
align-items:center;
overflow-y:auto;
overscroll-behavior:contain;
z-index:20;
pointer-events:none;
opacity:0}

.modal-container::-webkit-scrollbar{display:none}

.modal-container.active{pointer-events:all;
visibility:visible;
opacity:1}

.overlay{position:fixed;
top:0;
left:0;
width:100%;
height:100vh;
background:hsl(0 0% 5%);
opacity:0;
visibility:hidden;
pointer-events:none;
z-index:1;
transition:var(--transition-1)}

.overlay.active{opacity:.8;
visibility:visible;
pointer-events:all}

.testimonials-modal{background:var(--eerie-black-2);
position:relative;
padding:15px;
margin:15px 12px;
border:1px solid var(--jet);
border-radius:14px;
box-shadow:var(--shadow-5);
transform:scale(1.2);
opacity:0;
transition:var(--transition-1);
z-index:2}

.modal-container.active .testimonials-modal{transform:scale(1);
opacity:1}

.apps-modal{background:var(--eerie-black-2);
position:relative;
padding:15px;
margin:15px 12px;
border:1px solid var(--jet);
border-radius:14px;
box-shadow:var(--shadow-5);
transform:scale(1.2);
opacity:0;
transition:var(--transition-1);
z-index:2}

.modal-container.active .apps-modal{transform:scale(1);
opacity:1}

.modal-close-btn{position:absolute;
top:15px;
right:15px;
background:var(--onyx);
border-radius:8px;
width:32px;
height:32px;
display:flex;
justify-content:center;
align-items:center;
color:var(--white-2);
font-size:18px;
cursor:pointer;
opacity:.7;
z-index:1002}

.modal-close-btn:hover,.modal-close-btn:focus{opacity:1}

.modal-close-btn ion-icon{--ionicon-stroke-width:50px}

.modal-avatar-box{background:var(--bg-gradient-onyx);
width:max-content;
border-radius:14px;
margin-bottom:15px;
box-shadow:var(--shadow-2)}

.modal-avatar-box img{transform:scale(.8)}

.modal-img-wrapper>img{display:none}

.modal-title{margin-bottom:4px}

.modal-content time{font-size:var(--fs-6);
color:var(--light-gray-70);
font-weight:var(--fw-300);
margin-bottom:10px}

.modal-content p{color:var(--light-gray);

font-size:var(--fs-6);
font-weight:var(--fw-300);
line-height:1.6}

.clients{margin-bottom:15px}

.clients-list{display:flex;
justify-content:flex-start;
align-items:flex-start;
gap:15px;
margin:0 -15px;
padding:25px;
padding-bottom:25px;
overflow-x:auto;
scroll-behavior:smooth;
overscroll-behavior-inline:contain;
scroll-snap-type:inline mandatory;
scroll-padding-inline:25px}

.clients-item{min-width:50%;
scroll-snap-align:start}

.clients-item img{width:50%;
filter:grayscale(1);
transition:var(--transition-1);
padding-bottom:8px;
display:block;
margin:10px}

.clients-item img:hover{filter:grayscale(0)}

li.clients-item:hover{cursor:pointer}

.article-title{margin-bottom:15px}

.resume-header{display:flex;
align-items:center;
gap:10px;
margin-bottom:15px}

.resume-header .article-title{margin:0;
display:flex;
align-items:center}

.resume-header button{margin-left:10px}

.timeline{margin-bottom:30px}

.timeline .title-wrapper{display:flex;
align-items:center;
gap:15px;
margin-bottom:25px}

.timeline-list{font-size:var(--fs-6);
margin-left:45px}

.timeline-item{position:relative}

.timeline-item:not(:last-child){margin-bottom:20px}

.timeline-item-title{font-size:var(--fs-6);
line-height:1.3;
margin-bottom:7px}

.timeline-list span{color:var(--vegas-gold);
font-weight:var(--fw-400);
line-height:1.6}

.timeline-item:not(:last-child)::before{content:"";
position:absolute;
top:-25px;
left:-30px;
width:1px;
height:calc(100% + 50px);
background:var(--jet)}

.timeline-item::after{content:"";
position:absolute;
top:5px;
left:-33px;
height:6px;
width:6px;
background:var(--text-gradient-yellow);
border-radius:50%;
box-shadow:0 0 0 4px var(--jet)}

.timeline-text{color:var(--light-gray);
font-weight:var(--fw-300);
line-height:1.6}

.skills-title{margin-bottom:20px}

.skills-list{padding:20px}

.skills-item:not(:last-child){margin-bottom:15px}

ul.skills-list.content-card {
  cursor: default;
}

ul.honors-list.content-card {
  cursor: default;
}

.skill .title-wrapper{display:flex;
align-items:center;
gap:5px;
margin-bottom:8px}

.skill .title-wrapper data{color:var(--light-gray);
font-size:var(--fs-7);
font-weight:var(--fw-300)}

.skill-progress-bg{background:var(--jet);
width:100%;
height:8px;
border-radius:10px}

.skill-progress-fill{background:var(--text-gradient-yellow);
height:100%;
border-radius:inherit}

.honors-title{margin-top:20px;
margin-right:20px;
margin-bottom:20px}

.honors-text{color:var(--light-gray);
font-size:var(--fs-6);
font-weight:var(--fw-300);
line-height:1.6}

.honors-gpa{color:var(--orange-yellow-crayola)}

/* === Polaroid Instagram */

.polaroid-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
}

.polaroid-container{
  position:relative;
    width:100%;
    margin:0 auto;
    overflow:hidden;
    border-radius:10px;
    margin-bottom:30px;
  }
    
.polaroid-frame {
  position: relative;
  background: var(--eerie-black-2);
  border: 1px solid var(--jet);
  border-radius: 14px;
  box-shadow: var(--shadow-2);
  transform: rotate(-0.4deg);
  padding: 10px;
  width: 100%;
  max-width: 100%;
}

.polaroid-frame .polaroid-nav {
  opacity: 0;
  transition: opacity 200ms ease;
}

.polaroid-media {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  height: 200px;
  aspect-ratio: 16 / 9;
  box-sizing: border-box;
}

.polaroid-media .slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--transition-1);
  cursor:pointer;
}

/* .polaroid-media:hover .polaroid-nav {
  opacity: 1;
} */

@media (hover: hover) and (pointer: fine) {
  .polaroid-media:hover .polaroid-nav { opacity: 1; }
}

.polaroid-media .slide.active { opacity: 1; }

.polaroid-media img,
.polaroid-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.polaroid-nav {
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  color:var(--orange-yellow-crayola);
  border:none;
  padding:10px 15px;
  cursor:pointer;
  font-size:18px;
  height:100%;
  width:40px;
  z-index:1;
  opacity:0;
  transition:opacity 0.3s ease,background-color 0.3s ease;
}

.polaroid-nav:hover { 
  background:rgb(0 0 0 / .4);
  opacity: 1;
}

.polaroid-frame.nav-visible .polaroid-nav {
  opacity: 1;
}

.polaroid-nav.prev { left: 0 }
.polaroid-nav.next { right: 0 }

.polaroid-caption {
  color: var(--light-gray);
  font-size: var(--fs-7);
  margin: 8px 4px 0;
  line-height: 1.4;
}

/* Hide arrows when single image */
#insta-polaroid[data-slides="1"] .polaroid-nav { display: none; }

.filter-list{display:none}

.filter-select-box{position:relative;
margin-bottom:25px}

.filter-select{background:var(--eerie-black-2);
color:var(--light-gray);
display:flex;
justify-content:space-between;
align-items:center;
width:100%;
padding:12px 16px;
border:1px solid var(--jet);
border-radius:14px;
font-size:var(--fs-6);
font-weight:var(--fw-300)}

.filter-select.active .select-icon{transform:rotate(0.5turn)}

.select-list{background:var(--eerie-black-2);
position:absolute;
top:calc(100% + 6px);
width:100%;
padding:6px;
border:1px solid var(--jet);
border-radius:14px;
z-index:2;
opacity:0;
visibility:hidden;
pointer-events:none;
transition:0.15s ease-in-out}

.filter-select.active+.select-list{opacity:1;
visibility:visible;
pointer-events:all}

.select-item button{background:var(--eerie-black-2);
color:var(--light-gray);
font-size:var(--fs-6);
font-weight:var(--fw-300);
text-transform:capitalize;
width:100%;
padding:8px 10px;
border-radius:8px}

.select-item button:hover{--eerie-black-2:hsl(240, 2%, 20%)}

.project-list{display:grid;
grid-template-columns:1fr;
gap:30px;
margin-bottom:10px;
position:relative}

.project-item{position:relative;
display:none}

.project-item.active{display:block;
animation:scaleUp 0.25s ease forwards}

.project-item.expanded{grid-column:1 / -1;
grid-row:1 / -1;
z-index:1;
width:100%;
height:auto}

@keyframes scaleUp{0%{transform:scale(.5)}

100%{transform:scale(1)}

}

.project-img{position:relative;
width:100%;
height:200px;
border-radius:16px;
overflow:hidden;
margin-bottom:15px}

.project-img:hover{cursor:pointer}

.project-img::before{content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:#fff0;
z-index:1;
transition:var(--transition-1)}

.project-item>:hover .project-img::before{background:hsl(0 0% 0% / .5)}

.project-item-icon-box{--scale:0.8;
background:var(--jet);
color:var(--orange-yellow-crayola);
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%) scale(var(--scale));
font-size:20px;
padding:18px;
border-radius:12px;
opacity:0;
z-index:1;
transition:var(--transition-1)}

.project-item>:hover .project-item-icon-box{--scale:1;
opacity:1}

.project-item-icon-box ion-icon{--ionicon-stroke-width:50px}

.project-img img{width:100%;
height:100%;
object-fit:cover;
transition:var(--transition-1)}

.project-item>.project-img:hover img{transform:scale(1.1)}

.project-title,.project-category{margin-left:10px}

.project-title{color:var(--white-2);
font-size:var(--fs-5);
font-weight:var(--fw-400);
text-transform:capitalize;
line-height:1.3}

.project-category{color:var(--light-gray-70);
font-size:var(--fs-6);
font-weight:var(--fw-300)}

.project-details{display:none;
position:relative;
opacity:0;
transition:opacity 0.3s ease,transform 0.3s ease;
top:0;
left:0;
color:var(--white-2);
font-size:var(--fs-6);
width:100%;
background-color:var(--eerie-black-2);
box-sizing:border-box}

.project-details-title{color:var(--white-2);
font-size:var(--fs-3);
font-weight:var(--fw-400);
text-transform:capitalize;
line-height:1.3}

.project-details.visible{display:block;
opacity:1}

.project-list.details-active .project-item{position:absolute;
visibility:hidden}

.project-details h2{color:var(--vegas-gold);
margin-bottom:10px}

.project-details p{margin-bottom:15px}

.project-details ul{list-style-type:disc;
margin-left:20px}

.project-details ul li{margin-bottom:10px}

.project-details-category{font-size:1.2em;
color:var(--orange-yellow-crayola);
margin-bottom:15px}

.features,.improvements,.benefits{margin-top:20px}

.features h3,.improvements h3,.benefits h3{text-transform:uppercase;
font-size:1.4em;
margin-bottom:10px}

.conclusion{margin-top:30px;
font-style:italic}

.project-details ul li{list-style:none;
position:relative;
padding-left:20px}

.project-details ul li::before{content:"•";
position:absolute;
left:0;
color:var(--orange-yellow-crayola);
font-size:18px}

.gallery-container{position:relative;
width:100%;
margin:0 auto;
overflow:hidden;
border-radius:10px;
margin-bottom:30px}

.gallery-wrapper{display:flex;
transition:transform 0.5s ease-in-out}

.gallery-slide{min-width:100%;
box-sizing:border-box}

.gallery-slide img{width:100%;
height:auto;
display:block;
border-radius:0;
transform:scale(1)}

.gallery-slide:hover{cursor:pointer}

.gallery-button{position:absolute;
top:50%;
transform:translateY(-50%);
color:var(--orange-yellow-crayola);
border:none;
padding:10px 15px;
cursor:pointer;
font-size:18px;
height:100%;
width:40px;
z-index:1;
opacity:0;
transition:opacity 0.3s ease,background-color 0.3s ease}

.gallery-button:hover{background:rgb(0 0 0 / .6);
opacity:1}

.gallery-button.prev{left:0}

.gallery-button.next{right:0}

.modal{display:none;
position:fixed;
z-index:1000;
left:0;
top:0;
width:100%;
height:100%;
background-color:rgb(0 0 0 / .8);
justify-content:center;
align-items:center}

.modal-content{max-width:90%;
max-height:80%;
display:block;
border-radius:10px;
animation:zoomIn 0.3s}

.modal-close{position:absolute;
top:15px;
right:35px;
border-radius:10px;
color:#fff;
font-size:40px;
font-weight:700;
cursor:pointer;
z-index:1001}

.modal-caption{display:none}

.modal-button{position:absolute;
top:0;
height:100%;
width:10%;
color:var(--orange-yellow-crayola);
border:none;
cursor:pointer;
font-size:24px;
z-index:1001;
transition:background-color 0.3s ease,opacity 0.3s ease;
display:flex;
justify-content:center;
align-items:center}

.modal-button.prev{left:0;
border-top-left-radius:8px;
border-bottom-left-radius:8px;
padding:0 20px 0 0}

.modal-button.next{right:0;
border-top-right-radius:8px;
border-bottom-right-radius:8px;
padding:0 0 0 20px}

@keyframes zoomIn{from{transform:scale(.8);
opacity:0}

to{transform:scale(1);
opacity:1}

}

.blog-posts{margin-bottom:10px}

.blog-post-item{display:none}

.blog-post-item.active{display:block;}

.blog-post-item.expanded{cursor:default}

.blog-posts-list{display:grid;
grid-template-columns:1fr;
gap:20px}

.blog-post-item{
position:relative;
background:var(--eerie-black-2);
height:100%;
border-radius:16px;
z-index:1}

.blog-post-item::before{
content:"";
position:absolute;
inset:1px;
border-radius:inherit;
background:var(--eerie-black-2);
z-index:-1}

.blog-banner-box{
width:100%;
height:200px;
animation:scaleUp 0.25s ease forwards;
border-radius:12px;
overflow:hidden}

.blog-banner-box img{width:100%;
height:100%;
object-fit:cover;
transition:var(--transition-1)}

.blog-post-item:hover .blog-banner-box img{transform:scale(1.1)}

.blog-post-item.expanded{grid-column:1 / -1;
grid-row:1 / -1;
z-index:1;
width:100%;
height:auto}

.blog-content{padding-top:15px}

.blog-meta{display:flex;
justify-content:flex-start;
align-items:center;
gap:7px;
margin-bottom:10px}

.blog-meta :is(.blog-category,time){color:var(--light-gray-70);
font-size:var(--fs-6);
font-weight:var(--fw-300)}

.blog-meta .dot{background:var(--light-gray-70);
width:4px;
height:4px;
border-radius:4px}

.blog-item-title{margin-bottom:10px;
line-height:1.3;
transition:var(--transition-1)}

.blog-post-item:hover .blog-item-title{color:var(--orange-yellow-crayola)}

.blog-text{color:var(--light-gray);
font-size:var(--fs-6);
font-weight:var(--fw-300);
line-height:1.6}

.blog-details-title{color:var(--orange-yellow-crayola);
font-size:var(--fs-3);
font-weight:var(--fw-400);
text-transform:capitalize;
line-height:1.3}

.blog-details a{color:var(--orange-yellow-crayola);
display:inline}

.blog-details a:hover{color:var(--vegas-gold)}

.blog-details a:visited{color:var(--visited-link)}

.blog-details h2{color:var(--orange-yellow-crayola);
margin-bottom:10px}

.blog-details p{margin-bottom:15px;
color:var(--white-2);
font-size:var(--fs-6)}

.blog-details ul{list-style-type:disc;
margin-left:20px}

.blog-details ul li{margin-bottom:10px;
color:var(--white-2);
font-size:var(--fs-6);
list-style:none;
position:relative;
padding-left:20px}

.blog-details-category{font-size:1.2em;
color:var(--orange-yellow-crayola);
margin-bottom:15px}

.features,.improvements,.benefits{margin-top:20px}

.features h3,.improvements h3,.benefits h3{text-transform:uppercase;
font-size:1.4em;
margin-bottom:10px}

.conclusion{margin-top:30px;
font-style:italic}

.blog-details ul li::before{content:"•";
position:absolute;
left:0;
color:var(--orange-yellow-crayola);
font-size:18px}

.blog-back-container{display:none;
height:auto}

.blog-back-container.active{display:block;
margin-bottom:15px}

.blog-back-btn{color:var(--orange-yellow-crayola);
padding-left:5px;
opacity:0}

.blog-back-btn.active{opacity:1}

.blog-section {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin: 1.5rem 0;
  padding: 0 1rem; 
  overflow-wrap: break-word;
  word-break: break-word;
  min-width: 0;      
}

/* Wrap each code block */
.code-block {
  position: relative;
  margin: 1.25rem 0;
}

/* Make only the <pre> scroll, not the container */
.code-block pre {
  margin: 0;                 /* container handles outer spacing */
  max-height: 520px;         /* or whatever you prefer */
  overflow: auto;            /* scroll inside the pre */
  box-sizing: border-box;
}

/* Pin the copy button to the container, not the <pre> */
.code-block .code-copy-btn {
  position: absolute;
  top: 8px;
  right: 14px;
  z-index: 2;                /* above code */
  padding: 6px 10px;
  font-size: 12px;
  line-height: 1;
  border-radius: 6px;
  background: var(--onyx);
  color: var(--white-2);
  border: 1px solid var(--jet);
  opacity: 0.9;
  transition: opacity var(--transition-1);
}
.code-block .code-copy-btn:hover { opacity: 1; }

/* Optional: keep button from blocking code at the very top */
.code-block pre { padding-top: 36px; }


@media (max-width: 480px) {
  /* Override Prism defaults on tiny screens */
  pre[class*="language-"],
  code[class*="language-"],
  pre,
  pre code,
  code { font-size: 0.6rem !important; }
}

/* Medium phones / small tablets */
@media (min-width: 481px) and (max-width: 768px) {
  pre[class*="language-"],
  code[class*="language-"],
  pre,
  pre code,
  code { font-size: 0.75rem !important; }
}

/* Tablets / small laptops */
@media (min-width: 769px) and (max-width: 1249px) {
  pre[class*="language-"],
  code[class*="language-"],
  pre,
  pre code,
  code { font-size: 0.85rem !important; }
}

/* Base code block styling (dark theme) */
pre {
  background: #1b1b1b;          /* deep charcoal */
  color: #d7d7d7;               /* soft light gray */
  border: 1px solid #2a2a2a;
  border-radius: 10px;
  padding: 16px 18px;
  font-family: "Fira Code", Consolas, Menlo, Monaco, monospace;
  line-height: 1.55;
  margin: 1.25rem 0;
  overflow: auto;  
  box-shadow: 0 8px 22px rgba(0,0,0,.35);
}

/* Inline code (keeps it tidy in paragraphs) */
code {
  color: #e7e7e7;
  padding: 0.15em 0.35em;
  border-radius: 6px;
}

/* Selection color inside code blocks */
pre::selection,
code::selection {
  background: #2f3a45;
  color: #fff;
}

/* ===== Scrollbars: Chrome/Edge/Safari (WebKit) ===== */
pre::-webkit-scrollbar {
  height: 10px;                 /* horizontal bar height */
  width: 10px;                  /* vertical bar width */
}

pre::-webkit-scrollbar-track {
  background: var(--onyx);          /* track color */
  border-radius: 10px;
  border: 1px solid var(--smoky-black);
}

pre::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #3a3a3a, #2e2e2e);
  border-radius: 10px;
  border: 1px solid #424242;    /* crisp edge on dark bg */
}

pre::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #4a4a4a, #3a3a3a);
}

pre::-webkit-scrollbar-corner {
  background: #141414;          /* bottom-right corner (both axes) */
}

/* Optional: subtle fade-in of scrollbars on hover (WebKit) */
pre::-webkit-scrollbar-thumb { opacity: .85; }
pre:hover::-webkit-scrollbar-thumb { opacity: 1; }

/* ===== Scrollbars: Firefox ===== */
/* Uses the element’s background; the second color is the thumb */
pre {
  scrollbar-width: thin;                         /* thin | auto */
  scrollbar-color: #3a3a3a #141414;              /* thumb track */
}

/* ===== Nice-to-have: keep long tokens from bursting layout ===== */
pre, code {
  word-break: normal;
  overflow-wrap: anywhere;       /* modern browsers */
}

/* Optional max-height if you want vertical scroll for long blocks */
@media (min-width: 900px) {
  pre {
    max-height: 520px; 
  }
}

/* On wide screens, wrap code to avoid horizontal scrolling */
@media (min-width: 1250px) {
  pre,
  pre code,
  .blog-section pre,
  .blog-section pre code {
    white-space: pre-wrap;   /* preserve newlines but allow wrapping */
    word-wrap: break-word;
    word-break: break-word;
    overflow-x: visible;     /* no horizontal scroll needed */
  }
}

/* Copy button in code blocks */
pre { position: relative; }
.code-copy-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 6px 10px;
  font-size: 12px;
  line-height: 1;
  border-radius: 6px;
  background: var(--onyx);
  color: var(--white-2);
  border: 1px solid var(--jet);
  opacity: 0.85;
  transition: opacity var(--transition-1);
}
.code-copy-btn:hover { opacity: 1; }

/* Preserve exact spacing in code content to avoid odd wraps */
pre code {
  white-space: pre;
  word-break: normal;
  overflow-wrap: normal;
}

/* Ensure token spans (from Prism/HLJS) remain inline to prevent per-token line breaks */
pre code span {
  display: inline;
}

/* VS Code-like styling for JavaScript code blocks */
pre code.language-js {
  font-family: "Cascadia Code", "Fira Code", Consolas, Menlo, Monaco, monospace;
  color: #d4d4d4; /* VS Code Dark default foreground */
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* If a syntax highlighter is present (Prism/HLJS), map colors to VS Code palette */
pre code.language-js .token.comment,
pre code.language-js .hljs-comment { color: #6a9955; }
pre code.language-js .token.keyword,
pre code.language-js .hljs-keyword { color: #569cd6; }
pre code.language-js .token.string,
pre code.language-js .hljs-string { color: #ce9178; }
pre code.language-js .token.number,
pre code.language-js .hljs-number { color: #b5cea8; }
pre code.language-js .token.function,
pre code.language-js .hljs-function .hljs-title { color: #dcdcaa; }
pre code.language-js .token.property,
pre code.language-js .hljs-attr,
pre code.language-js .hljs-property { color: #9cdcfe; }
pre code.language-js .token.operator,
pre code.language-js .hljs-operator { color: #d4d4d4; }

pre code.language-css {
  font-family: "Cascadia Code", "Fira Code", Consolas, Menlo, Monaco, monospace;
  color: #c5d9f7; /* soft blue for CSS base text */
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

pre code.language-css .token.selector { color: #f5c2e7; }  
pre code.language-css .token.property { color: #c5a5c5; }  
pre code.language-css .token.value { color: #a8e1a0; }      
pre code.language-css .token.punctuation { color: #d4d4d4; } 
pre code.language-css .token.comment { color: #6a9955; }  

pre code.language-yaml {
  font-family: "Cascadia Code", "Fira Code", Consolas, Menlo, Monaco, monospace;
  color: #d7d7d7; /* neutral base */
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

pre code.language-yaml .token.key { color: #f5c2e7; }       /* pink for keys */
pre code.language-yaml .token.string { color: #a8e1a0; }   /* green for strings */
pre code.language-yaml .token.number { color: #f38ba8; }   /* soft red for numbers */
pre code.language-yaml .token.boolean { color: #c5a5c5; }  /* purple for booleans */
pre code.language-yaml .token.comment { color: #6a9955; }  /* muted green */

pre code.language-bash {
  font-family: "Cascadia Code", "Fira Code", Consolas, Menlo, Monaco, monospace;
  color: #d7d7d7; /* neutral base */
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

pre code.language-bash .token.command { color: #89b4fa; }   /* blue for commands */
pre code.language-bash .token.option { color: #f5c2e7; }    /* pink for flags/options */
pre code.language-bash .token.string { color: #a8e1a0; }    /* green for strings */
pre code.language-bash .token.variable { color: #f38ba8; }  /* soft red for $vars */
pre code.language-bash .token.comment { color: #6a9955; }   /* muted green */

pre code.language-html {
  font-family: "Cascadia Code", "Fira Code", Consolas, Menlo, Monaco, monospace;
  color: #d7d7d7; /* neutral base */
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

pre code.language-html .token.tag { color: #89b4fa; }        /* blue for tags */
pre code.language-html .token.attr-name { color: #f5c2e7; } /* pink for attributes */
pre code.language-html .token.attr-value { color: #a8e1a0; }/* green for values */
pre code.language-html .token.string { color: #a8e1a0; }    /* green fallback */
pre code.language-html .token.punctuation { color: #d4d4d4; } /* neutral for < > / = */
pre code.language-html .token.comment { color: #6a9955; }   /* muted green */


.contact-container{display:grid;
grid-template-columns:1fr;
gap:30px}

.contact-img-box{position:relative;
height:450px;
border-radius:16px;
overflow:hidden;
margin-bottom:30px}

.contact-img-box img{width:100%;
height:100%;
object-fit:cover}

.mapbox{position:relative;
height:250px;
width:100%;
border-radius:16px;
margin-bottom:30px;
border:1px solid var(--jet);
overflow:hidden}

.mapbox figure{height:100%}

.mapbox iframe{width:100%;
height:100%;
border:none;
filter:grayscale(1) invert(1)}

.contact-form{margin-bottom:10px}

.form-title{margin-bottom:20px}

.input-wrapper{display:grid;
grid-template-columns:1fr;
gap:25px;
margin-bottom:25px}

.form-input{color:var(--white-2);
font-size:var(--fs-6);
font-weight:var(--fw-400);
padding:13px 20px;
border:1px solid var(--jet);
border-radius:14px;
outline:none}

.form-input::placeholder{font-weight:var(--fw-500)}

.form-input:focus{border-color:var(--orange-yellow-crayola)}

textarea.form-input{min-height:100px;
height:120px;
max-height:200px;
resize:vertical;
margin-bottom:25px}

textarea.form-input::-webkit-resizer{display:none}

.form-input:focus:invalid{border-color:var(--bittersweet-shimmer)}

.form-btn{position:relative;
width:100%;
background:var(--border-gradient-onyx);
color:var(--orange-yellow-crayola);
display:flex;
justify-content:center;
align-items:center;
gap:10px;
padding:13px 20px;
border-radius:14px;
font-size:var(--fs-6);
text-transform:capitalize;
box-shadow:var(--shadow-3);
z-index:1;
transition:var(--transition-1)}

.form-btn::before{content:"";
position:absolute;
inset:1px;
background:var(--bg-gradient-jet);
border-radius:inherit;
z-index:-1;
transition:var(--transition-1)}

.form-btn ion-icon{font-size:16px}

.form-btn:hover{background:var(--bg-gradient-yellow-1)}

.form-btn:hover::before{background:var(--bg-gradient-yellow-2)}

.form-btn:disabled{opacity:.7;
cursor:not-allowed}

.form-btn:disabled:hover{background:var(--border-gradient-onyx)}

.form-btn:disabled:hover::before{background:var(--bg-gradient-jet)}

@media (min-width:450px){.clients-item{min-width:calc(33.33% - 10px)}

.project-img,.blog-banner-box{height:auto}

.avatar-box img{width:80px}

}

@media (min-width:580px){:root{--fs-1:32px;
--fs-2:24px;
--fs-3:26px;
--fs-4:18px;
--fs-6:15px;
--fs-7:15px;
--fs-8:12px}

.polaroid-media { aspect-ratio: 4 / 3; }

.sidebar,article{
width:560px;
margin-inline:auto;
padding:30px}

.article-title{font-weight:var(--fw-600);
padding-bottom:15px}

.article-title::after{width:40px;
height:5px}

.icon-box{width:48px;
height:48px;
border-radius:12px;
font-size:18px}

main{margin-top:60px;
margin-bottom:100px}

.sidebar{max-height:180px;
margin-bottom:30px}

/* .sidebar.active{max-height:none} */

.sidebar-info{gap:25px}

.avatar-box{border-radius:30px}

.avatar-box img{width:120px}

.info-content .name{margin-bottom:15px}

.info-content .title{padding:5px 18px}

.info_more-btn{top:-30px;
right:-30px;
padding:10px 15px}

.info_more-btn span{display:block;
font-size:var(--fs-8)}

.info_more-btn ion-icon{display:none}

.separator-A,.separator-B{margin:32px 0}

.contacts-list{gap:20px}

.contact-info{max-width:calc(100% - 64px);
width:calc(100% - 64px)}

.navbar{border-radius:20px 20px 0 0}

.navbar-list{gap:20px}

.navbar-link{--fs-8:14px}

.about .article-title{margin-bottom:15px}

.about-text{margin-bottom:35px}

.service-item{display:flex;
justify-content:flex-start;
align-items:flex-start;
gap:18px;
padding:30px}

.service-icon-box{margin-bottom:0;
margin-top:5px}

.service-content-box{text-align:left}

.testimonials-title{margin-bottom:25px}

.testimonials-list{gap:30px;
margin:0 -30px;
padding:30px;
padding-bottom:35px}

.content-card{padding:30px;
padding-top:25px}

.testimonials-avatar-box{transform:translate(30px,-30px);
border-radius:20px}

.testimonials-avatar-box img{width:80px}

.testimonials-item-title{margin-bottom:10px;
margin-left:95px}

.testimonials-text{line-clamp:2;
-webkit-line-clamp:2}

.modal-container{padding:20px}

.testimonials-modal{display:flex;
justify-content:flex-start;
align-items:stretch;
gap:25px;
padding:30px;
border-radius:20px}

.apps-modal{display:flex;
justify-content:flex-start;
align-items:stretch;
gap:25px;
padding:30px;
border-radius:20px}

.modal-img-wrapper{display:flex;
flex-direction:column;
align-items:center}

.modal-avatar-box{border-radius:18px;
margin-bottom:0}

.modal-img-wrapper>img{display:block;
flex-grow:1;
width:35px}

.clients-list{gap:50px;
margin:0 -30px;
padding:45px;
scroll-padding-inline:45px}

.clients-item{min-width:calc(33.33% - 35px)}

.timeline-list{margin-left:65px}

.timeline-item:not(:last-child)::before{left:-40px}

.timeline-item::after{height:8px;
width:8px;
left:-43px}

.skills-item:not(:last-child){margin-bottom:25px}

.project-img,.blog-banner-box{border-radius:16px}

.blog-posts-list{gap:30px}

.blog-content{padding-top:25px}

.mapbox{height:380px;
border-radius:18px}

.input-wrapper{gap:30px;
margin-bottom:30px}

.form-input{padding:15px 20px}

textarea.form-input{margin-bottom:30px}

.form-btn{--fs-6:16px;
padding:16px 20px}

.form-btn ion-icon{font-size:18px}

}

/* Mobile fixes: keep long code blocks from blowing out the layout */
@media (max-width: 767px) {
  /* Any flex/grid parents in the blog stack must allow shrinking */
  .blog-posts-list,
  .blog-posts-list > li,
  .blog-post-item,
  .blog-content,
  .blog-section,
  .timeline-text {
    min-width: 0;             /* critical for flex/grid children */
  }

  /* Make sure the post item itself isn't forcing a flex row layout */
  .blog-post-item {
    display: block;           /* if it was flex before, this neutralizes it */
  }

  /* The banner container and image should never exceed the viewport */
  .blog-banner-box {
    display: block;
    width: 100%;
    max-width: 100%;
  }

  /* Code blocks: fill parent, scroll horizontally if needed */
  .blog-section pre {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: auto;         /* horizontal scroll instead of expanding */
    overflow-y: auto;
    white-space: pre;         /* preserve formatting (no wrapping) */
  }
}

@media (min-width:768px){
  .sidebar, article { width:auto; max-width:100%; }
  .has-scrollbar::-webkit-scrollbar-button{width:100px}

  /* 2-col layout with left stack order:
     sepA (under .sidebar-info) → contacts → head → sepB → social  */
  .sidebar-info_more{
    display:grid;
    grid-template-columns: 1fr minmax(300px, 1fr);
    grid-template-areas:
      "sepA     sepA"   
      "contacts polaroid"
      "head polaroid"
      "sepB     sepB"
      "social   social";
    gap:20px;
    align-items:start;
    justify-items:stretch;
  }

  /* Left column pieces in order */
  .contacts-list{
    grid-area: contacts;
    display:flex !important;
    flex-direction:column;
    gap:15px;
    min-width:0;
    align-content: center;
  }

  .separator-A{  
    grid-area: sepA;
    display:block;
    grid-column: 1 / -1;
  }

  .polaroid-head{
    grid-area: head;
    justify-self:start;
    margin:0;
  }

  .separator-B{ 
    grid-area: sepB;
    display:block;
    grid-column: 1 / -1; /* span across*/
  }

  .separator-mid{ display:none; }

  .social-list{
    grid-area: social;
    justify-content:flex-start;
    gap:16px;
  }


  .polaroid-container{
    grid-area: polaroid;
  }

  .polaroid-frame{
    /* grid-area: polaroid; */
    width:100%;
    max-width:100%;
    padding:12px;
    margin:0;
    justify-self:center;
    align-self:start;
  }

  .polaroid-media { aspect-ratio: 3 / 2; }
  .polaroid-caption { font-size: var(--fs-6); }


  /* keep your other existing rules */
  .navbar-link{--fs-8:15px}
  .testimonials-modal{gap:35px;max-width:680px}
  .apps-modal{gap:35px;max-width:680px}
  .modal-avatar-box img{width:100px}
  .article-title{padding-bottom:15px}
  .filter-select-box{display:none}
  .filter-list{display:flex;justify-content:flex-start;align-items:center;gap:25px;padding-left:5px;margin-bottom:15px}
  .filter-item button{color:var(--light-gray);font-size:var(--fs-5);transition:var(--transition-1)}
  .filter-item button:hover{color:var(--light-gray-70)}
  .filter-item button.active{color:var(--orange-yellow-crayola)}
  .project-list,.blog-posts-list{grid-template-columns:1fr 1fr}
  .input-wrapper{grid-template-columns:1fr 1fr}
  .form-btn{width:max-content;margin-left:auto}
}


@media (min-width:1024px){:root{--shadow-1:-4px 8px 24px hsla(0, 0%, 0%, 0.125);
--shadow-2:0 16px 30px hsla(0, 0%, 0%, 0.125);
--shadow-3:0 16px 40px hsla(0, 0%, 0%, 0.125)}

.sidebar,article{width:950px;
box-shadow:var(--shadow-5)}

.blog .article-title{margin-bottom:20px}

.contact .article-title{margin-bottom:20px}

main{margin-bottom:60px}

.main-content{position:relative;
width:max-content;
margin:auto}

.navbar{position:absolute;
bottom:auto;
top:0;
left:auto;
right:0;
width:max-content;
border-radius:0 20px;
padding:0 20px;
box-shadow:none}

.navbar-list{gap:30px;
padding:0 20px}

.navbar-link{font-weight:var(--fw-500)}

.resume-header{margin-bottom:20px}

.service-list{grid-template-columns:1fr 1fr;
gap:20px 25px}

.testimonials-item{min-width:calc(50% - 15px)}

.clients-item{min-width:calc(25% - 38px)}

.project-list{grid-template-columns:repeat(3,1fr)}

.blog-banner-box{height:230px}

/* .polaroid-media { aspect-ratio: 16 / 10; } */
/* .polaroid-nav { width: 36px; height: 36px; } */

}

@media (min-width:1250px) {

  /* Scrollbar cosmetics */
  body::-webkit-scrollbar { width: 20px; }
  body::-webkit-scrollbar-track { background: var(--smoky-black); }
  body::-webkit-scrollbar-thumb {
    border: 5px solid var(--smoky-black);
    background: hsl(0 0% 100% / .1);
    border-radius: 20px;
    box-shadow:
      inset  1px  1px 0 hsl(0 0% 100% / .11),
      inset -1px -1px 0 hsl(0 0% 100% / .11);
  }
  body::-webkit-scrollbar-thumb:hover { background: hsl(0 0% 100% / .15); }
  body::-webkit-scrollbar-button { height: 60px; }

  .sidebar, article { width: auto; }
  article {
    min-height: 100%;
    animation:scaleUp 0.25s ease forwards;
  }

  main {
    max-width: 1300px;
    margin-inline: auto;
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 25px;
  }

  .main-content { min-width: 75%; width: 75%; margin: 0; }

  .sidebar {
    position: sticky;
    top: 60px;
    max-height: none;
    height: 100%;
    margin-bottom: 0;
    padding-top: 60px;
    z-index: 1;
  }

  .sidebar-info { flex-direction: column; }
  .avatar-box img { width: 150px; }

  .info-content .name { white-space: nowrap; text-align: center; }
  .info-content .title { margin: auto; }

  .info_more-btn { display: none; }

  /* Reset: stop using the grid layout at desktop */
  .sidebar-info_more {
    display: block;
    opacity: 1;
    visibility: visible;
    justify-items: start;
    align-items: start;
  }

  /* === CONTACTS (ellipsis works) === */
  .contacts-list { grid-template-columns: 1fr; justify-self:start;}
  .contacts-list > * { min-width: 0; }

  .contacts-list > .contact-item {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
  }

  .contact-item .icon-box { flex: 0 0 auto; }
  .contact-item .contact-info {
    flex: 1 1 auto;
    min-width: 0;
  }

  .contact-info .contact-link {
    display: block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .contact-info :is(.contact-link, time, address) {
    --fs-7: 14px;
    font-weight: var(--fw-300);
  }

  /* Reset header placement */
  .polaroid-head {
    grid-column: auto;
    margin: 0 5 12px;
    justify-self: start;
  }

  .separator-A,.separator-B:last-of-type { margin: 15px 0;}

  .social-list { justify-content: center; }
  .timeline-text { max-width: 700px; }

  /* === POLAROID (desktop) === */
  .polaroid-frame {
    position: relative;
    background: var(--eerie-black-2);
    border: 1px solid var(--jet);
    border-radius: 14px;
    box-shadow: var(--shadow-2);
    transform: rotate(-0.4deg);
    padding: 10px;
    justify-self: start;
    align-self: start;
    grid-column: auto;
    margin-top: 16px;
    width: 100%;
    max-width: 100%;
  }

  .polaroid-media {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    aspect-ratio: auto; /* fixed height handled by content */
  }

  .polaroid-media .slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity var(--transition-1);
  }
  .polaroid-media .slide.active { opacity: 1; }

  .polaroid-media img,
  .polaroid-media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* .polaroid-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: var(--onyx);
    color: var(--white-2);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    box-shadow: var(--shadow-1);
    display: grid;
    place-items: center;
    opacity: 0.85;
    transition: var(--transition-1);
  }
  .polaroid-nav:hover { opacity: 1; }
  .polaroid-nav.prev { left: 10px; }
  .polaroid-nav.next { right: 10px; } */

  /* Clamp caption to 2 lines */
  .polaroid-caption {
    color: var(--light-gray);
    font-size: var(--fs-7);
    margin: 10px 6px 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Hide arrows when single image */
  #insta-polaroid[data-slides="1"] .polaroid-nav { display: none; }

  .separator-A,
  .separator-B,
  .separator-mid {
    grid-column: auto;
    display: block;
  }
}