:root {
	--bg: #0b1020;
	--card: #101733;
	--text: #e6ecff;
	--muted: #a9b4d8;
	--brand: #1C64F2;
	--brand-2: #18b66e;
	--ring: #7fa6ff33;
	--ok: #18b66e;
	--err: #ff5a5a;
	--shadow: 0 14px 40px rgba(0,0,0,.45);
	--radius: 18px;
	--maxw: 760px;
}

html, body { height: 100%; margin: 0; }
body {
	font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
	color: var(--text);
	background: radial-gradient(1200px 800px at 10% -10%, #16305e 0%, transparent 60%),
	            radial-gradient(1000px 600px at 110% 10%, #0b3b28 0%, transparent 55%),
	            var(--bg);
}

a, a:visited {
	color: white;
}

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 32px 20px; text-align: center; }

.brand {
	font-weight: 900;
	font-size: clamp(2.5rem, 5vw, 3.5rem);
	background: linear-gradient(90deg, var(--brand), var(--brand-2));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	margin-bottom: 12px;
}

.eyebrow { color: var(--brand-2); font-weight: 600; letter-spacing: .3px; text-transform: uppercase; font-size: .85rem; margin-bottom: 6px; }
h1 { font-size: clamp(2rem, 4vw, 2.6rem); margin: 6px 0; }
.lead { color: var(--muted); font-size: 1.05rem; margin: 6px 0; }
.fineprint { font-size: .85rem; color: var(--muted); margin-top: 10px; }

.card {
	background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
	border: 1px solid #2a375f; border-radius: var(--radius); box-shadow: var(--shadow);
	padding: 24px; margin: 32px auto; max-width: 600px;
}

form.email { display: grid; grid-template-columns: 1fr auto; gap: 12px; margin-top: 12px; }
input[type="email"] {
	background: #0e1530; color: var(--text); border: 1px solid #2a375f; border-radius: 16px;
	padding: 22px 20px; font-size: 1.15rem; outline: none; box-shadow: 0 14px 36px rgba(0,0,0,.28);
}
input[type="email"]:focus { border-color: var(--brand); box-shadow: 0 0 0 6px var(--ring); }

button {
	border: 1px solid #0f3ea1; background: linear-gradient(180deg, var(--brand), #184cbc);
	color: white; border-radius: 16px; padding: 18px 26px; font-weight: 900; font-size: 1.1rem;
	cursor: pointer; box-shadow: 0 14px 36px rgba(0,0,0,.28);
}
button:hover { filter: brightness(1.05); }
button:disabled { opacity: .6; cursor: not-allowed; }

.status { margin-top: 10px; font-size: .95rem; }
.status.ok { color: var(--ok); }
.status.err { color: var(--err); }

footer { margin-top: 60px; color: var(--muted); font-size: .9rem; }

@media (max-width: 640px) {
	form.email { grid-template-columns: 1fr; }
	button { width: 100%; }
}

.main-nav ul {
    list-style: none; /* Remove bullet points */
    padding: 0;
    margin: 0;
    display: flex; /* Arrange links horizontally */
    justify-content: center; /* Center the links */
    gap: 20px; /* Space between links */
    font-size: 1.05rem;
    margin-bottom: 24px; /* Space below the menu */
}

.main-nav a {
    color: var(--muted); /* Link color */
    text-decoration: none; /* Remove underline */
    font-weight: 500;
    transition: color 0.3s;
}

.main-nav a:hover {
    color: var(--text); /* Highlight on hover */
}



.card {
        background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
        border: 1px solid #2a375f;
        border-radius: var(--radius);
        box-shadow: var(--shadow);
        padding: 24px;
        margin: 24px auto;
        text-align: left;
}






/* --- TEAM PAGE STYLES --- */

/* Grid to contain team members. It centers the members and provides a nice flow. */
.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Responsive grid */
    gap: 32px;
    margin-top: 40px;
}

/* Individual member card styling */
.team-member {
    text-align: center; /* Center content inside the card */
    max-width: none; /* Override the max-width: 600px set on the general .card class */
    padding: 30px 20px;
    display: flex; /* Use flex for internal layout flow */
    flex-direction: column;
    align-items: center;
}


/* Name and Title */
.team-name {
    margin: 0;
    font-size: 1.6rem;
}

.team-title {
    color: var(--brand-2); /* Use a brand color for the job title */
    font-weight: 600;
    margin-top: 6px;
    margin-bottom: 18px;
    font-size: 1rem;
}

/* Bio Container for Columns */
.team-bio-columns {
    column-count: 1; /* Two columns for the bio */
    column-gap: 20px; /* Space between columns */
    text-align: left; /* Keep bio readable */
    width: 100%; /* Ensure it takes full width of the card for columns */
    flex-grow: 1; /* Pushes the Mastodon link to the bottom */
    margin-bottom: 24px;
    max-width: 400px; /* Optional: Constrain bio width within the card for better column flow */
}

/* Bio Text - Remove flex-grow and margin-bottom from here as it's now on the wrapper */
.team-bio {
    color: var(--muted);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-top: 0; /* Remove default paragraph margins to control spacing with columns */
    margin-bottom: 0;
    -webkit-column-break-inside: avoid; /* Keep paragraphs from breaking across columns (for Webkit) */
    page-break-inside: avoid; /* Standard property for column breaks */
    break-inside: avoid-column; /* New standard property for column breaks */
}

/* Mastodon Link Styling */
.mastodon-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--text);
    padding: 8px 16px;
    background-color: var(--brand);
    border-radius: 10px;
    font-weight: 700;
    transition: background-color 0.3s, transform 0.1s;
    margin-top: auto; /* Ensures it stays at the bottom */
}

.mastodon-link:hover {
    background-color: #1254d3; /* Slightly darker hover */
    transform: translateY(-1px);
}

/* Media query for smaller screens: revert bio to single column */
@media (max-width: 768px) {
    .team-bio-columns {
        column-count: 1; /* Single column on smaller screens */
    }
}