/* ---------- Base ---------- */
	:root{
		--bg-light:#f5f5f5;
		--bg-dark:#ffffff;
		--accent:#05191a;
	}
	*{box-sizing:border-box;margin:0;padding:0;}
	body{
		font-family:Arial,Helvetica,sans-serif;
		background:var(--bg-light);
		color:#333;
		line-height:1.55;
	}
	a{text-decoration:none;color:inherit;}

	/* ---------- Header ---------- */
	header{
		background:var(--accent);
		color:#fff;
		padding:3rem 1rem 2rem;
		text-align:center;
	}
    .header-links {
        margin-top: 0.5rem;
    }
    .header-links a {
        display: inline-block;
        margin: 0 .75rem;
        padding: 0.4rem 1rem;
        font-weight: bold;
        color: #fff;
        background-color: #333;
        border-radius: 4px;
        transition: background 0.3s ease;
    }
    .header-links a:hover {
        background-color: var(--accent);
    }

    .invitation {
        margin-top: 0.75rem;
        font-size: 1.05rem;
        opacity: 0.8;
        text-align: center;
    }
    /* logo image */
    .site-logo{
        width:500px;
        max-width:90%;
        height:auto;
        display:block;                /* keeps it on its own line        */
        clip-path: inset(0 0 30% 0);  /* trims 30 % from the bottom      */
        margin:0.25rem auto;          /* ↑  centers the logo horizontally */
        
    }
	header p{opacity:.8;}

	/* ---------- Sticky nav ---------- */
	nav{
		position:sticky;
		top:0;
		z-index:900;
		display:flex;
		flex-wrap:wrap;
		justify-content:center;
		gap:.5rem;
		background:var(--bg-dark);
		border-bottom:1px solid #ddd;
		padding:.75rem .5rem;
	}
	nav a{
		font-weight:600;
		padding:.35rem .75rem;
		border-radius:4px;
		transition:background .2s,color .2s;
	}
	nav a:hover,
	nav a:focus{background:var(--accent);color:#fff;}

	/* ---------- Sections ---------- */
	section{
		padding:3rem 1rem;
		max-width:1100px;
		margin-inline:auto;
	}
	section h2{
		font-size:1.9rem;
		margin-bottom:1.25rem;
		color:var(--accent);
	}

	/* ---------- Gallery grid ---------- */
	.gallery{
		display:grid;
		grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
		gap:1rem;
	}
	.gallery a{display:block;}
	.gallery img{
		width:100%;
		height:180px;
		object-fit:cover;
		border-radius:6px;
		box-shadow:0 3px 12px rgba(0,0,0,.15);
		transition:transform .3s;
	}
	.gallery img:hover{transform:scale(1.05);}

	/* ---------- Light-box overlay ---------- */
	.overlay{
		position:fixed;inset:0;
		background:rgba(0,0,0,.85);
		backdrop-filter:blur(2px);
		display:flex;
		align-items:center;
		justify-content:center;
		padding:2rem;
		z-index:1000;
		cursor:zoom-out;
	}
	.overlay.hidden{display:none;}
	.overlay img{
		max-width:90%;
		max-height:90%;
		border-radius:8px;
		box-shadow:0 4px 20px rgba(0,0,0,.4);
	}
    /* social icons under logo */
    .social{
        margin:.8rem 0;              /* space above & below icons       */
    }
    .social a{
        display:inline-block;
        margin:0 .4rem;
    }
    .social img{
        width:36px;                  /* icon size                       */
        height:auto;
        filter:drop-shadow(0 1px 3px rgba(0,0,0,.35));
        transition:transform .25s;
    }
    .social img:hover{transform:scale(1.1);}


	/* ---------- Footer ---------- */
	.site-footer {
		background-color: var(--accent); /* matches header/logo background */
		color: #fff;
		text-align: center;
		padding: 10px;
		font-size: 0.9em;
	}

	.footer-link {
		color: #fff;
		text-decoration: none;
	}

	.footer-link:hover {
		text-decoration: underline;
	}