/* VARIABLES & BASE */
:root{
	--bg: linear-gradient(135deg, #ffffff 0%, #fffafc 30%, #fff8ff 65%, #f8ffff 100%);
	--bg-solid: #ffffff;
	--surface: #ffffff;
	--text: #0f172a;
	--muted: #6b7280;
	--brand: #f3a6c3; /* soft pink */
	--brand-600: #e58aa8;
	--accent: #f59e0b;
	--radius: 10px;
	--gap: 1.25rem;
	--container: 1100px;
	--page-padding: 1rem;
	--shadow-1: 0 6px 18px rgba(15,23,42,0.06);
	--shadow-2: 0 2px 8px rgba(15,23,42,0.04);
	--ease: cubic-bezier(.2,.9,.2,1);
	font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
	font-size: 16px;
}

/* DARK MODE */
html.dark-mode {
	--bg: linear-gradient(135deg, #0b1020 0%, #2b0f3a 35%, #1a0f2e 65%, #031124 100%);
	--bg-solid: #071025;
	--surface: #1e293b;
	--text: #f1f5f9;
	--muted: #94a3b8;
	--shadow-1: 0 6px 18px rgba(0,0,0,0.3);
	--shadow-2: 0 2px 8px rgba(0,0,0,0.2);
}

html.dark-mode body {
	color: var(--text);
	transition: background 0.4s, color 0.4s;
}

/* RESET & LAYOUT */
*{box-sizing:border-box}
html,body{height:100%}
body{
	margin:0;
	background: var(--bg);
	background-attachment: fixed;
	color:var(--text);
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
	line-height:1.6;
	padding:0;
	min-height: 100vh;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--brand);text-decoration:none}
a:focus{outline:3px solid color-mix(in srgb, var(--brand) 18%, transparent);outline-offset:3px}
.container{
	width:calc(100% - (var(--page-padding) * 2));
	max-width:var(--container);
	margin:0 auto;
	padding:0 var(--page-padding);
}

/* TYPOGRAPHY */
h1,h2,h3,h4{margin:0 0 0.5rem 0;font-weight:700;color:var(--text)}
p{margin:0 0 1rem 0;color:var(--muted)}
.lead{color:var(--muted);font-size:1.0625rem}
.brand{font-weight:800;letter-spacing:-0.02em}

/* HEADER */
.site-header{
	background:var(--surface);
	border-bottom:1px solid rgba(15,23,42,0.04);
	position:sticky;top:0;z-index:40;
	backdrop-filter:saturate(120%) blur(4px);
}
.header-inner{
	display:flex;align-items:center;justify-content:space-between;
	gap:1rem;padding:0.75rem 0;
}
.main-nav{display:flex;gap:0.75rem;align-items:center}
.main-nav a{
	color:var(--muted);padding:0.4rem 0.6rem;border-radius:8px;font-weight:600;
}
.main-nav a:hover,.main-nav a:focus{color:var(--text);background:transparent}
.nav-toggle{
	display:none;border:0;background:transparent;padding:0.5rem;border-radius:8px;font-weight:700;
}

/* HERO */
.hero{
	padding:3.25rem 0 2rem;
	background:linear-gradient(180deg, rgba(243,166,195,0.04), transparent 60%);
}
.hero-inner{max-width:820px}
.hero h1{font-size:clamp(1.6rem, 3vw, 2.5rem);line-height:1.05}
.hero .lead{margin-top:0.5rem}

/* Highlighted phrase style: subtle underline for readability, stronger pill on hover */
.highlight{
	font-weight:700;
	text-decoration: underline;
	text-decoration-color: var(--brand);
	text-decoration-thickness: 0.12em;
	text-underline-offset: 0.12em;
	transition: color 160ms var(--ease), background-color 220ms var(--ease), text-decoration-color 220ms var(--ease);
}
.highlight:hover{
	text-decoration-color: transparent;
	color: #fff;
	background-color: var(--brand-600);
	padding: 0 0.18rem;
	border-radius: 4px;
}

/* Hero avatar + heading layout */
.hero-head{display:flex;align-items:center;gap:0.9rem;margin-bottom:0.5rem}
.hero-avatar{width:120px;height:120px;border-radius:14px;object-fit:cover;flex-shrink:0;border:1px solid rgba(243,166,195,0.12);box-shadow:var(--shadow-2)}
@media (min-width:980px){.hero-avatar{width:160px;height:160px}}

/* BUTTONS */
.btn{
	display:inline-block;padding:0.6rem 1rem;border-radius:10px;border:2px solid var(--brand);
	background:transparent;color:var(--brand);font-weight:600;transition:transform .18s var(--ease),box-shadow .18s var(--ease),background 0.3s var(--ease),color 0.3s var(--ease);
}
.btn:hover{transform:translateY(-3px);background:var(--brand);color:#fff;box-shadow: 0 8px 24px rgba(243, 166, 195, 0.3);}
.btn.primary{background:var(--brand);color:#fff;border-color:var(--brand);box-shadow: 0 4px 16px rgba(243, 166, 195, 0.2);}
.btn.primary:hover{box-shadow: 0 8px 32px rgba(243, 166, 195, 0.4);}
.btn.ghost{background:transparent;border-color:transparent;color:var(--text)}

/* PROJECTS GRID */
.projects-grid{
	display:grid;grid-template-columns:repeat(1,1fr);gap:var(--gap);margin-top:1rem;
}
.project-card{
	background: rgba(255, 255, 255, 0.85);
	backdrop-filter: blur(15px);
	border-radius:var(--radius);overflow:hidden;border:1px solid rgba(243, 166, 195, 0.15);
	box-shadow: 0 10px 40px rgba(15,23,42,0.12);
	display:flex;flex-direction:column;transition:transform .18s var(--ease),box-shadow .18s var(--ease),background 0.4s var(--ease),border-color 0.4s var(--ease);
}
.project-card:hover{transform:translateY(-8px);box-shadow: 0 15px 60px rgba(243, 166, 195, 0.2);border-color: rgba(243, 166, 195, 0.4);} 
.project-card img{width:100%;height:200px;object-fit:cover}
.card-body{padding:1rem;display:flex;flex-direction:column;gap:0.5rem}
.project-card h3{font-size:1.3rem;font-weight:700}
.card-links{margin-top:auto;display:flex;gap:0.75rem;align-items:center}
.card-links a{color:var(--brand);font-weight:700}

/* ABOUT PREVIEW */
.about-preview{padding:2rem 0}
.about-preview-inner{max-width:760px}

/* PROJECTS PAGE CONTROLS */
.projects-controls{margin:0.75rem 0}
.filters{display:flex;gap:0.5rem;flex-wrap:wrap}
.filter-btn{
	padding:0.4rem 0.6rem;border-radius:999px;border:2px solid var(--brand);background:transparent;color:var(--brand);font-weight:600;transition:all 0.3s var(--ease);
}
.filter-btn.active{background:var(--brand);color:#fff;border-color:var(--brand);box-shadow: 0 4px 12px rgba(243, 166, 195, 0.3);}

/* ABOUT GRID */
.about-grid{display:grid;grid-template-columns:1fr;gap:var(--gap);align-items:center;padding:1rem 0}
.about-photo img{width:240px;height:240px;object-fit:cover;border-radius:12px}

/* About sections: ensure good contrast and spacing in dark mode */
.background, .personal-characteristics, .volunteering, .hobbies{
	color: var(--muted);
	padding: 0.6rem 0;
}
.background h2, .personal-characteristics h2, .volunteering h2, .hobbies h2{
	color: var(--text);
}
html.dark-mode .background,
html.dark-mode .personal-characteristics,
html.dark-mode .volunteering,
html.dark-mode .hobbies{
	background: rgba(255,255,255,0.02);
	border: 1px solid rgba(255,255,255,0.04);
	padding: 1rem;
	border-radius: 10px;
	color: var(--text);
}
html.dark-mode .background p,
html.dark-mode .personal-characteristics li,
html.dark-mode .volunteering li,
html.dark-mode .hobbies p{
	color: var(--text);
}

/* FOOTER */
.site-footer{border-top:2px solid rgba(243, 166, 195, 0.2);padding:1.25rem 0;margin-top:2rem;background:transparent}
.footer-inner{display:flex;flex-direction:column;gap:0.5rem;align-items:center;justify-content:center}
.footer-inner p{margin:0;color:var(--muted)}
.footer-inner a{font-weight:700;color:var(--brand);transition: color 0.3s var(--ease);}
.footer-inner a:hover{color:var(--brand-600)}

/* CONTACT ICONS */
.contact-icons{display:flex;gap:0.6rem;align-items:center}
.icon-link{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:12px;background:transparent;border:2px solid rgba(243,166,195,0.12);color:var(--brand);text-decoration:none;transition:all 0.25s var(--ease)}
.icon-link svg{width:22px;height:22px;display:block;fill:none;stroke:currentColor;stroke-width:1.8}
.icon-link:focus{outline:3px solid rgba(243,166,195,0.18);outline-offset:3px}
.icon-link:hover{transform:translateY(-3px);background:linear-gradient(135deg, rgba(243,166,195,0.08), rgba(243,166,195,0.03));box-shadow:0 8px 24px rgba(243,166,195,0.12)}

/* dark mode tweaks for icons */
html.dark-mode .icon-link{color: #f7b2c9;border-color: rgba(229,138,168,0.12);}

html.dark-mode .icon-link:hover{background:linear-gradient(135deg, rgba(229,138,168,0.06), rgba(229,138,168,0.02));box-shadow:0 10px 30px rgba(229,138,168,0.08)}

/* Center contact containers and make icons centered */
.contact{display:flex;flex-direction:column;align-items:center;text-align:center;gap:0.5rem}
.contact h3{margin:0 0 0.4rem 0}
.contact .contact-icons{justify-content:center}

/* UTILITIES */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* THEME TOGGLE */
.theme-toggle-wrapper {
	position: relative;
	display: flex;
	align-items: center;
}

.label {
	height: 60px;
	width: 120px;
	background-color: #ffffff;
	border-radius: 30px;
	-webkit-box-shadow: inset 0 0 5px 4px rgba(255, 255, 255, 1),
		inset 0 0 20px 1px rgba(0, 0, 0, 0.488), 10px 20px 30px rgba(0, 0, 0, 0.096),
		inset 0 0 0 3px rgba(0, 0, 0, 0.3);
	box-shadow: inset 0 0 5px 4px rgba(255, 255, 255, 1),
		inset 0 0 20px 1px rgba(0, 0, 0, 0.488), 10px 20px 30px rgba(0, 0, 0, 0.096),
		inset 0 0 0 3px rgba(0, 0, 0, 0.3);
	display: flex;
	align-items: center;
	cursor: pointer;
	position: relative;
	transition: transform 0.4s;
}

html.dark-mode .label {
	background-color: #1e293b;
	box-shadow: inset 0 0 5px 4px rgba(30, 41, 59, 1),
		inset 0 0 20px 1px rgba(255, 255, 255, 0.2), 10px 20px 30px rgba(0, 0, 0, 0.3),
		inset 0 0 0 3px rgba(255, 255, 255, 0.1);
	-webkit-box-shadow: inset 0 0 5px 4px rgba(30, 41, 59, 1),
		inset 0 0 20px 1px rgba(255, 255, 255, 0.2), 10px 20px 30px rgba(0, 0, 0, 0.3),
		inset 0 0 0 3px rgba(255, 255, 255, 0.1);
}

html.dark-mode .project-card {
	background: rgba(30, 41, 59, 0.65);
	border-color: rgba(45, 212, 191, 0.2);
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}

html.dark-mode .project-card:hover {
	border-color: rgba(45, 212, 191, 0.4);
	box-shadow: 0 15px 60px rgba(45, 212, 191, 0.15);
}

.label:hover {
	transform: perspective(100px) rotateX(5deg) rotateY(-5deg);
}

#checkbox:checked ~ .label:hover {
	transform: perspective(100px) rotateX(-5deg) rotateY(5deg);
}

#checkbox {
	display: none;
}

#checkbox:checked ~ .label::before {
	left: 70px;
	background-color: #000000;
	background-image: linear-gradient(315deg, #000000 0%, #414141 70%);
	transition: 0.4s;
}

.label::before {
	position: absolute;
	content: "";
	height: 40px;
	width: 40px;
	border-radius: 50%;
	background-color: #000000;
	background-image: linear-gradient(
		130deg,
		#757272 10%,
		#ffffff 11%,
		#726f6f 62%
	);
	left: 10px;
	box-shadow: 0 2px 1px rgba(0, 0, 0, 0.3),
		10px 10px 10px rgba(0, 0, 0, 0.3);
	transition: 0.4s;
}

.label .icon {
	position: absolute;
	right: 10px;
	font-size: 18px;
	pointer-events: none;
	transition: transform 0.4s;
	user-select: none;
}

html.dark-mode .label .icon {
	left: 10px;
	right: auto;
}

/* RESPONSIVE BREAKPOINTS */
@media (min-width:640px){
	.projects-grid{grid-template-columns:repeat(2,1fr)}
	.footer-inner{flex-direction:row;justify-content:center;align-items:center;gap:1.25rem}
}
@media (min-width:980px){
	.projects-grid{grid-template-columns:repeat(3,1fr)}
	.header-inner{padding:1rem 0}
	.nav-toggle{display:none}
}

/* MOBILE NAV */
@media (max-width:640px){
	.main-nav{display:none}
	.nav-toggle{display:inline-block}
	.main-nav.open{
		display:flex;flex-direction:column;position:absolute;left:1rem;right:1rem;top:64px;background:#fff;padding:1rem;border-radius:10px;box-shadow:0 10px 30px rgba(2,6,23,0.12)
	}
}

/* SMALL POLISH */
button, .nav-toggle{cursor:pointer}
code{background:rgba(2,6,23,0.04);padding:0.12rem 0.28rem;border-radius:6px;font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, 'Roboto Mono', monospace;font-size:0.9rem}