/* Base / utilities */
:root{
	--bg:#050506; /* deep black */
	--card:#0b0b0b; /* card background */
	--muted:#9ea6ad; /* gray */
	--accent:#ff6a1a; /* orange accent */
	--glass: rgba(255,255,255,0.02);
	--text: #f7f8fa; /* white */
	--radius:12px;
	--bg-black:#000000;
	--orange-600:#ff6a1a;
	--orange-400:rgba(255,106,26,0.18);
	--orange-200:rgba(255,106,26,0.08);
	font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
	margin:0;
	background:linear-gradient(120deg,#041021,#071827,#08131c);
	background-size:300% 300%;
	animation:bgShift 22s ease-in-out infinite;
	color:var(--text);
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
	font-family:Inter, system-ui, sans-serif;
	background:var(--bg-black);
	background-attachment:fixed;
}
.container{max-width:1100px;margin:0 auto;padding:0 24px}
.header-inner, .hero-inner, .footer-inner{display:flex;align-items:center;justify-content:space-between}

/* Header */
.site-header{position:sticky;top:0;background:var(--card);padding:18px 0;border-bottom:1px solid rgba(255,255,255,0.03);box-shadow:0 6px 18px rgba(2,6,23,0.6);z-index:60}
.brand{color:var(--text);font-weight:700;text-decoration:none;font-size:18px}
.nav{display:flex;gap:24px}
.nav a{color:var(--muted);text-decoration:none;font-weight:600;font-size:15px;padding:6px 8px}
.nav-toggle{display:none;background:none;border:0;color:var(--text);width:44px;height:44px;padding:8px}
.nav-toggle span{display:block;width:22px;height:3px;background:var(--text);margin:4px 0}

/* Hero */
.hero{position:relative;padding:80px 0 20px}
.bg-blobs{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0;will-change:transform,opacity}
.blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.9;transform:translate3d(0,0,0);will-change:transform,background,opacity}
.blob.b1,.blob.b2,.blob.b3{transition:background 400ms linear, opacity 400ms linear}
.blob.b1{width:420px;height:420px;left:-80px;top:-80px;background:linear-gradient(135deg,rgba(255,255,255,0.08),rgba(255,255,255,0.02));}
.blob.b2{width:300px;height:300px;right:-60px;top:40px;background:linear-gradient(135deg, rgba(255,106,26,0.16), rgba(255,106,26,0.06));}
.blob.b3{width:260px;height:260px;left:40%;top:120px;background:linear-gradient(135deg, rgba(255,255,255,0.04), rgba(158,166,173,0.04));}

.hero-inner{gap:8px;align-items:flex-start;padding-top:40px;justify-content:flex-start;} /* keep left-aligned */
.hero-content{
	max-width:640px;
	display:flex;
	flex-direction:column;
	align-items:flex-start;
}
/* push the aside to the far right */
.hero-aside{ margin-left:auto; }

.hero-content{max-width:640px}
.eyebrow{color:var(--muted);margin:0 0 6px}
.name{font-size:48px;margin:0 0 8px;line-height:1;font-weight:800;color:var(--text)}
.role{color:var(--muted);margin:0 0 18px}
#type{font-family:'JetBrains Mono', monospace;color:var(--text);font-weight:600}
.hero-ctas{display:flex;gap:12px;margin-bottom:16px}
.btn{background:var(--accent);color:#0b0b0b;padding:10px 14px;border-radius:10px;text-decoration:none;font-weight:700;box-shadow:0 6px 18px rgba(255,106,26,0.12)}
.btn-ghost{background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--text)}

/* decorative portrait / hero image on the left of the hero content */
.hero-image{
	width:160px;
	height:160px;
	border-radius:50%;    /* make circular */
	overflow:hidden;      /* ensure content is clipped to the circle */
	object-fit:contain;   /* changed: show whole image without cropping */
	object-position:center;
	box-shadow:0 10px 30px rgba(2,6,23,0.55);
	background:var(--card);
	flex:0 0 auto;
	margin-right:8px;
	align-self:flex-start; /* align to top of hero content */
	/* new: orange outline */
	border:2px solid var(--accent);
	/* subtle inner contrast so the border reads well on dark backgrounds */
	box-shadow:0 10px 30px rgba(2,6,23,0.55), 0 0 0 3px rgba(0,0,0,0.12) inset;
}

/* logo variant for project pages (no orange border, larger, subtle rounded rect) */
.hero-logo{
	border: none;                /* remove global orange outline */
	border-radius: 8px;          /* softer corners for rectangular logos */
	width: 220px;                /* logo-friendly width */
	height: auto;                /* preserve aspect ratio */
	object-fit: contain;         /* show full logo without cropping */
	object-position: center;
	align-self: flex-start;      /* keep aligned with content */
	box-shadow: 0 8px 28px rgba(2,6,23,0.45); /* gentler shadow than avatar */
	/* new: spacing between logo and hero content */
	margin-right: 20px;
}

/* smaller on narrow screens, or hide if you prefer */
@media (max-width:900px){
	.hero-image{
		width:96px;
		height:96px;
		margin-right:12px;
		border-width:3px; /* slightly thinner border on small screens */
	}
	/* reduce logo spacing on medium screens */
	.hero-logo{ margin-right:12px; width:180px; }
}
@media (max-width:640px){
	.hero-image{ display:none; }
	/* stack layout: remove horizontal spacing when logo_hidden or stacked */
	.hero-logo{ margin-right:0; width:160px; }
}

/* small icon inside primary buttons */
/* changed: force external favicon image to appear solid black */
.btn .icon{
	width:16px;
	height:16px;
	display:inline-block;
	vertical-align:middle;
	margin-right:8px;
	fill:currentColor;
	/* render image as pure black */
	filter: brightness(0) saturate(100%);
	/* ensure img doesn't get distorted */
	object-fit:contain;
}

/* vibrant animated background layers */
body{background:linear-gradient(120deg,#041021,#071827,#08131c);background-size:300% 300%;animation:bgShift 22s ease-in-out infinite;}

/* soft color wash behind content */
body::before{content:'';position:fixed;inset:0;z-index:-2;pointer-events:none;mix-blend-mode:screen;background:
  radial-gradient(circle at 10% 20%, rgba(255,106,26,0.10), transparent 12%),
  radial-gradient(circle at 80% 80%, rgba(14,165,233,0.08), transparent 18%),
  linear-gradient(135deg, rgba(2,6,23,0.65), rgba(6,8,15,0.35));animation:bgHue 14s linear infinite}

/* faint star / noise layer */
body::after{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:0.05;background-image:radial-gradient(circle, rgba(255,255,255,0.9) 0.8px, transparent 0.9px);background-size:220px 220px;filter:blur(0.6px)}

@keyframes bgShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes bgHue{0%{filter:hue-rotate(0deg)}50%{filter:hue-rotate(20deg)}100%{filter:hue-rotate(0deg)}}

/* enhance blob visuals */
.bg-blobs{z-index:0}
.blob{mix-blend-mode:screen;filter:blur(90px) saturate(1.05);opacity:0.95;transition:transform 420ms cubic-bezier(.2,.9,.2,1),background 420ms linear}
.blob.b1,.blob.b2,.blob.b3{animation:blobHue 12s linear infinite}
@keyframes blobHue{0%{filter:hue-rotate(0deg) blur(90px)}50%{filter:hue-rotate(35deg) blur(110px)}100%{filter:hue-rotate(0deg) blur(90px)}}

/* Black & Orange themed animated background (overrides) */
/* deep black base */
body{background:var(--bg-black);background-attachment:fixed}

/* slow rotating conic wash for dramatic orange glow */
body::before{display:none !important;background:none !important;animation:none !important;transform:none !important}

/* radial hotspots for depth */
body::after{content:'';position:fixed;inset:0;z-index:-2;pointer-events:none;background:
  radial-gradient(circle at 10% 20%, var(--orange-200), transparent 12%),
  radial-gradient(circle at 85% 75%, var(--orange-400), transparent 18%);filter:blur(30px);opacity:0.95}

@keyframes rotateWash{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}

/* subtle grain/noise layer (orange-tinted) */
.noise-layer{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:0.04;background-image:radial-gradient(circle, rgba(255,106,26,0.95) 0.6px, transparent 0.7px);background-size:260px 260px;mix-blend-mode:overlay}

/* tint blobs to orange and add a soft pulse */
.blob{mix-blend-mode:screen;opacity:0.95;filter:blur(80px) saturate(1.2)}
.blob.b1{background:linear-gradient(135deg, rgba(255,106,26,0.20), rgba(255,106,26,0.06));}
.blob.b2{background:linear-gradient(135deg, rgba(255,106,26,0.28), rgba(255,106,26,0.08));}
.blob.b3{background:linear-gradient(135deg, rgba(255,106,26,0.16), rgba(255,106,26,0.04));}
.blob{animation:blobPulse 8s ease-in-out infinite}
@keyframes blobPulse{0%{transform:scale(1)}50%{transform:scale(1.06)}100%{transform:scale(1)}}

/* subtle card styling */
.card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:18px;border-radius:var(--radius);backdrop-filter: blur(6px);border:1px solid rgba(255,255,255,0.02);}

.socials a{color:var(--muted);display:inline-flex}
.socials a:hover{color:var(--text)}

/* project accents */
.project-link{color:var(--accent);text-decoration:none;font-weight:700}
.project-meta{font-size:12px;color:var(--muted);margin-bottom:8px}
.project-meta{position:relative}
.members{position:absolute;left:0;top:28px;min-width:180px;background:var(--card);color:var(--muted);padding:10px;border-radius:10px;border:1px solid rgba(255,255,255,0.03);box-shadow:0 8px 30px rgba(2,6,23,0.6);opacity:0;transform:translateY(6px);pointer-events:none;transition:200ms ease;z-index:40}
.members ul{list-style:none;margin:0;padding:0}
.members li{font-size:13px;padding:6px 0;color:var(--muted)}

/* make names/links inside the team popup bold and accent-colored */
.members a{
	color: var(--accent);
	font-weight: 700;
	text-decoration: none;
}

/* subtle hover state to reinforce interactivity */
.members a:hover,
.members a:focus{
	text-decoration: underline;
}

/* show on hover of tag OR when hovering/focusing the members panel itself,
   and also when any child inside .project-meta has focus (keyboard users) */
.project-tag:hover + .members,
.project-tag:focus + .members,
.project-meta:hover .members,
.project-meta:focus-within .members,
.members:hover,
.members:focus-within {
	opacity:1;
	transform:none;
	pointer-events:auto;
}

/* small caret */
.members::before{content:'';position:absolute;left:12px;top:-6px;width:10px;height:10px;background:var(--card);transform:rotate(45deg);border-left:1px solid rgba(255,255,255,0.02);border-top:1px solid rgba(255,255,255,0.02)}

/* project tags */
.project-tag.solo{background:rgba(255,255,255,0.04);color:var(--text);border:1px solid rgba(255,255,255,0.03)}
.project-tag.team{background:rgba(255,106,26,0.12);color:var(--accent);border:1px solid rgba(255,106,26,0.14)}
.project-tag{display:inline-block;padding:4px 8px;border-radius:999px;font-size:12px;font-weight:700;margin-right:10px;	position:relative;}
/* invisible hit-area that extends the tag's hover target downward */
.project-tag::after{
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	height: 14px;        /* increase this value to widen the hover corridor */
	pointer-events: auto;/* keep pseudo-element interactive so :hover remains active */
	background: transparent;
}

/* skills */
.skills-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.skill-category strong{display:flex;align-items:center;gap:8px;color:var(--text);margin-bottom:10px;font-size:14px}
.skill-chips{display:flex;flex-wrap:wrap;gap:10px}
.skill-chip{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,0.02);padding:8px 12px;border-radius:999px;font-size:13px;color:var(--text);border:1px solid rgba(255,255,255,0.03)}

/* make skill cards look like project cards */
.skill-card{padding:18px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border-radius:12px;border:1px solid rgba(255,255,255,0.02)}
.skill-card strong{display:block;margin-bottom:10px;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:0.06em}
.skill-card .skill-chips{margin-top:6px;gap:8px}

/* skill list styling */
.skill-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.skill-item{display:flex;align-items:center;gap:12px;color:var(--text);font-size:14px}
.skill-icon{width:16px;height:16px;flex:0 0 16px;opacity:0.95}
.skill-name{display:inline-block}

/* subtle icon color adjustments */
.skill-item .skill-icon{color:var(--accent);fill:var(--accent)}

/* muted adjustments */
.muted{color:var(--muted)}

/* footer and borders */
.site-footer{border-top:1px solid rgba(255,255,255,0.03);padding:22px 0;margin-top:40px}
.footer-nav a{color:var(--muted);text-decoration:none}
.footer-nav a:hover{color:var(--text)}

/* Sections */
.section{padding:60px 0}
.section-title{font-size:20px;margin:0 0 18px}
.projects-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.project-card{padding:18px;position:relative}
.project-meta{font-size:12px;color:var(--muted);margin-bottom:8px}
.muted{color:var(--muted)}
.project-link{color:var(--accent);text-decoration:none;font-weight:700}

.about-grid{display:grid;grid-template-columns:2fr 1fr;gap:16px}
.skills{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,auto);gap:8px}
.contact-grid{display:grid;grid-template-columns:1fr 320px;gap:16px}
.contact-form label{display:block;margin-bottom:10px;color:var(--muted)}
.contact-form input,.contact-form textarea{width:100%;padding:10px;border-radius:8px;border:1px solid rgba(255,255,255,0.03);background:transparent;color:var(--text)}

/* refine project card spacing */
.project-card h3{margin:6px 0 8px}
.project-card p{margin:0 0 12px}

/* remove carousel styles (carousel removed) and add thumbnail styling */
.carousel{display:none !important}
.carousel-track{display:none !important}
.carousel-slide{display:none !important}
.carousel-dots{display:none !important}
.carousel-nav{display:none !important}

.thumb-wrap{
	position:relative;
	display:block;
	padding:12px;
	box-sizing:border-box;
	/* canonical visible thumbnail height (keeps card height consistent) */
	--thumb-height: 170px;
	overflow: hidden;
}

/* thumbnails: fixed visual height, preserve whole image (no crop).
   Taller-than-16/9 images will shrink width-wise to fit the fixed height */
.thumb-wrap .project-thumb{
	display:block;
	/* fix the visual height; width adjusts to preserve aspect */
	height: var(--thumb-height);
	width: auto;
	max-width: 100%;
	margin: 0 auto;
	border-radius:8px;
	box-shadow:0 8px 24px rgba(2,6,23,0.45);
	object-fit: contain;        /* show whole image; letterbox if needed */
	background:var(--card);     /* fill behind letterboxed areas */
	transition: transform 260ms ease, opacity 260ms ease;
	opacity: 1;
	z-index: 0; /* ensure image sits below the controls stacking layer */
}

/* thumbnail controls — hidden by default, revealed on hover/focus of the thumb container
   NOTE: keep pointer-events disabled on the container so it does not block clicks on the image.
   Only the .thumb-controls button elements accept pointer-events. */
.thumb-wrap .thumb-controls{
	position:absolute;
	left:0;
	right:0;
	top:50%;
	transform:translateY(-50%);
	display:flex;
	justify-content:space-between;
	align-items:center;
	padding:0 8px;
	/* raised above the image (higher than project-thumb) */
	z-index: 60;
	/* hide by default */
	opacity: 0;
	/* container must not block clicks on the thumbnail image */
	pointer-events: none;
	transition: opacity 180ms ease;
}

/* reveal only the visual layer on hover/focus; do not enable pointer-events on the container */
.thumb-wrap:hover .thumb-controls,
.thumb-wrap:focus-within .thumb-controls{
	opacity: 1;
	/* keep pointer-events disabled on the container so image clicks pass through */
}

/* keep controls visible on small screens (touch) for usability (visual only) */
@media (max-width:640px){
	.thumb-wrap .thumb-controls{
		opacity: 1;
		/* still avoid making the whole container intercept clicks */
	}
}

/* ensure the buttons themselves receive pointer events (they will be clickable) */
.thumb-wrap .thumb-controls button{
	/* restored original size/appearance */
	width:44px;
	height:44px;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	background:rgba(0,0,0,0.55);
	border:1px solid rgba(255,255,255,0.06);
	color:var(--text);
	border-radius:999px;
	cursor:pointer;
	font-size:20px;
	z-index:61; /* ensure each button is above the image and the controls container */
	pointer-events: auto;
}

@media(max-width:900px){
	.nav{position:fixed;inset:auto 0 0 0;background:rgba(6,7,10,0.92);flex-direction:column;padding:12px 20px;display:none}
	.nav.open{display:flex}
	.nav-toggle{display:block}
	.projects-grid{grid-template-columns:1fr}
	.name{font-size:36px}
	.members{position:static;transform:none;opacity:1;padding:8px 0;background:transparent;border:0;box-shadow:none}
	.project-meta{display:flex;flex-direction:column;gap:6px}
	.project-tag{margin-bottom:6px}
	.carousel{aspect-ratio:4/3}
}
@media(min-width:720px){
	.skills-grid{grid-template-columns:repeat(3,1fr)}
	.about-grid{grid-template-columns:1fr 360px}
}

/* Simple reveal */
[data-reveal]{opacity:0;transform:translateY(8px);transition:all 500ms cubic-bezier(.2,.9,.2,1)}
[data-reveal].revealed{opacity:1;transform:none}

/* Typewriter caret */
#type{position:relative}
#type::after{
	content: '';
	display: inline-block;
	width: 1px;
	height: 20px;
	background: var(--text);
	margin-left: 6px;
	animation: blink 1s steps(2) infinite;
}
@keyframes blink{50%{opacity:0}}

/* lightbox styles */
.lightbox{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(2,6,23,0.8);z-index:1000}
.lightbox[aria-hidden="false"]{display:flex}
.lb-image{max-width:90%;max-height:80%;border-radius:8px;box-shadow:0 20px 60px rgba(2,6,23,0.8)}
.lb-close,.lb-prev,.lb-next{position:fixed;background:transparent;border:0;color:var(--text);font-size:28px;cursor:pointer}
.lb-close{top:20px;right:20px}
.lb-prev{left:20px;top:50%;transform:translateY(-50%)}
.lb-next{right:20px;top:50%;transform:translateY(-50%)}

/* viewer / lightbox UI improvements
   - centered image with scale/opacity animation
   - larger visible prev/next controls overlaid on the sides
   - semi-opaque backdrop */
.lightbox{
	/* ...existing code... */
	/* ensure overlay covers everything and allows smooth fade */
	display:none;
	opacity:0;
	transition:opacity 220ms ease;
	align-items:center;
	justify-content:center;
	background:rgba(2,6,23,0.85); /* slightly stronger backdrop */
	z-index:1200;
}

/* visible state */
.lightbox[aria-hidden="false"]{
	display:flex;
	opacity:1;
}

/* large image in viewer: animate scale + fade for each swap */
.lb-image{
	max-width:90%;
	max-height:85%;
	border-radius:10px;
	box-shadow:0 30px 90px rgba(2,6,23,0.85);
	transition: transform 320ms cubic-bezier(.2,.9,.2,1), opacity 220ms ease;
	transform: scale(0.98);
	opacity: 0;
	/* ensure image is on top of controls */
	z-index:1210;
	cursor:zoom-out;
}

/* when the lightbox is visible, animate image in */
.lightbox[aria-hidden="false"] .lb-image{
	transform: scale(1);
	opacity:1;
}

/* navigation buttons (prev/next) — large, visible, positioned over the sides */
.lb-prev,
.lb-next{
	position:fixed;
	top:50%;
	transform:translateY(-50%);
	width:56px;
	height:56px;
	border-radius:999px;
	background:rgba(0,0,0,0.55);
	color:var(--text);
	border:1px solid rgba(255,255,255,0.06);
	display:inline-flex;
	align-items:center;
	justify-content:center;
	font-size:28px;
	cursor:pointer;
	z-index:1220;
	transition:background 140ms ease, transform 120ms ease;
}

/* positions */
.lb-prev{left:20px}
.lb-next{right:20px}

/* hover feedback */
.lb-prev:hover, .lb-next:hover{background:rgba(0,0,0,0.75);transform:translateY(-50%) scale(1.04)}

/* close button refinement */
.lb-close{
	position:fixed;
	right:22px;
	top:18px;
	width:44px;
	height:44px;
	border-radius:8px;
	background:transparent;
	color:var(--text);
	font-size:28px;
	z-index:1220;
}

/* ensure clone-animation helper (if used) sits above everything */
.clone-lightbox{
	position:fixed;
	z-index:1250;
	pointer-events:none;
	border-radius:8px;
	object-fit:contain;
	box-shadow:0 30px 120px rgba(2,6,23,0.9);
	transition: transform 320ms ease, opacity 220ms ease;
}

/* small screens: reduce button size and spacing */
@media (max-width:640px){
	.lb-prev, .lb-next{ width:44px; height:44px; font-size:20px; left:10px; right:10px }
	.lb-prev{left:10px}
	.lb-next{right:10px}
}

/* Cleaned background: single canonical definition and particle layer */
body{
	background:linear-gradient(180deg,var(--bg) 0%, #0a0a0b 100%);
	background-attachment:fixed;
	color:var(--text);
}

/* keep any decorative wash in ::before disabled (optional) */
body::before{display:none}

/* canonical drifting particle layer (white dust + warm specks) */
body::after{
	content: '';
	display: block;
	position: fixed;
	inset: 0;
	z-index: -3;
	pointer-events: none;
	background-image:
		radial-gradient(circle, rgba(255,255,255,0.9) 0.6px, transparent 0.8px),
		radial-gradient(circle, rgba(255,140,50,0.08) 0.9px, transparent 1px);
	background-size: 24px 24px, 110px 110px;
	opacity: 0.06;
	mix-blend-mode: screen;
	filter: blur(0.6px) saturate(0.95);
	animation: particlesDrift 40s linear infinite;
}

@keyframes particlesDrift{
	0%{background-position:0 0, 0 0}
	50%{background-position:-700px 360px, 520px -220px}
	100%{background-position:0 0, 0 0}
}

@media (prefers-reduced-motion: reduce){
	body::after{animation:none !important;opacity:0.04}
}

/* FINAL CLEANUP OVERRIDES
   - disable any legacy/hidden background layers that may conflict
   - enforce canonical background + particle layer visibility
   - keep reduced-motion support
*/
/* ensure the main background stays the canonical cave wash */
body{background:linear-gradient(180deg,var(--bg) 0%, #0a0a0b 100%) !important;background-attachment:fixed !important;color:var(--text) !important}

/* hide any previously-inserted decorative pseudo-elements we don't want */
body::before, .parallax-layers, .parallax-layer, .tunnel, .noise-layer{display:none !important;visibility:hidden !important}

/* enforce canonical particle layer and make it slightly more visible */
body::after{
	content: '' !important;
	display: block !important;
	position: fixed !important;
	inset: 0 !important;
	z-index: -3 !important;
	pointer-events: none !important;
	background-image: radial-gradient(circle, rgba(255,255,255,0.9) 0.6px, transparent 0.8px), radial-gradient(circle, rgba(255,140,50,0.09) 0.9px, transparent 1px) !important;
	background-size: 24px 24px, 110px 110px !important;
	opacity: 0.08 !important;
	mix-blend-mode: screen !important;
	filter: blur(0.6px) saturate(0.95) !important;
	animation: particlesDrift 40s linear infinite !important;
}

/* reduced motion: remove particle animation */
@media (prefers-reduced-motion: reduce){
	body::after{animation:none !important;opacity:0.04 !important}
}

/* visible particle canvas */
body::after{display:none !important} /* hide older pseudo-element */
.particles{position:fixed;inset:0;z-index:-3;pointer-events:none;overflow:hidden}
.particles .dot{position:absolute;width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,0.21);filter:blur(0.6px);opacity:1;mix-blend-mode:screen}
.particles .dot.warm{background:rgba(255,140,50,1);width:4px;height:4px;opacity:1}

/* responsive sizing */
@media(max-width:900px){
	.particles .dot{width:4px;height:4px}
	.particles .dot.warm{width:3px;height:3px}
}

/* GitHub icon (external SVG via <img>) — tint to accent orange */
.icon-github{
	width:16px;
	height:16px;
	display:inline-block;
	vertical-align:middle;
	margin-right:8px;
	/* apply filter to approximate the accent color and override the global black filter */
	filter: invert(38%) sepia(86%) saturate(600%) hue-rotate(335deg) brightness(95%) contrast(95%) !important;
	/* ensure SVG preserves aspect */
	object-fit:contain;
}

/* tint the social GitHub SVG link */
.socials a[aria-label="GitHub"]{
	color: var(--accent);
}

/* ensure project links that also have .btn match the hero Itch button */
/* changed: make project Itch buttons smaller */
.project-link.btn{
	display:inline-flex;
	align-items:center;
	gap:6px;                /* smaller gap */
	background:var(--accent);
	color:#0b0b0b !important;
	padding:6px 10px;       /* reduced padding */
	border-radius:8px;      /* slightly smaller radius */
	text-decoration:none;
	font-weight:700;
	font-size:13px;         /* smaller text */
	box-shadow:0 6px 18px rgba(255,106,26,0.12);
	border:0;
}

/* ensure the small icon inside project-link buttons lines up like the hero button */
/* changed: smaller icon for compact buttons */
.project-link.btn .icon{
	width:12px;
	height:12px;
	display:inline-block;
	vertical-align:middle;
	margin-right:6px;       /* match smaller gap */
	filter: brightness(0) saturate(100%); /* black icon like hero */
	object-fit:contain;
}

/* simple responsive gallery grid used on project pages (vertical list) */
.gallery-grid{
	/* single-column vertical layout */
	display: grid;
	grid-template-columns: 1fr;
	gap:22px;
	align-items:start; /* allow each item to size to its own height */
}
/* show each thumbnail at its intrinsic (preferred) height while keeping it responsive */
.gallery-thumb{
	display:block;
	max-width:100%;   /* never overflow the container width */
	width:auto;       /* allow natural width */
	height:auto;      /* use intrinsic height (preferred height) */
	object-fit:contain;  /* preserve whole image if the element is constrained */
	object-position:center;
	border-radius:10px;
	cursor:pointer;
	border:2px solid rgba(255,255,255,0.03);
	box-shadow:0 8px 24px rgba(2,6,23,0.45);
	transition: transform 180ms ease, box-shadow 180ms ease, opacity 160ms ease;
}

/* responsive: keep single column but don't force a height */
@media (max-width:900px){
	.gallery-grid{grid-template-columns:1fr}
	/* no fixed height — natural image height is preserved */
}
@media (max-width:640px){
	.gallery-grid{grid-template-columns:1fr}
	/* no fixed height — natural image height is preserved */
}

/* make entire project card background clickable via an absolute link */
.project-card{
	position:relative; /* ensure positioned context for .card-bg-link */
	/* ...existing styles... */
}
/* full-size transparent link that covers the card background */
.project-card .card-bg-link{
	position:absolute;
	inset:0;
	z-index:1;
	display:block;
	background:transparent;
	/* keep link accessible but visually invisible */
	color:transparent;
	text-decoration:none;
}
/* ensure visible card content appears above the background link */
.project-card > *{
	position:relative;
	z-index:2;
}