:root {
--text: #1f2937;
--muted: #6b7280;
--accent: #2c6e73;
--border: #e5e7eb;
--background: #fcfcfb;
}

* {
  box-sizing: border-box;
  }

html {
scroll-behavior: smooth;
}

body {
margin: 0;
background: var(--background);
color: var(--text);

font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;

line-height: 1.8;

}

.container {
max-width: 760px;
margin: 0 auto;
padding: 4rem 2rem;
}

header {
margin-bottom: 4rem;
}


header::before {
    content: "";
    display: block;
    width: 60px;
    height: 4px;

    background: var(--accent);

    margin-bottom: 1.5rem;
    border-radius: 2px;
}

h1 {
margin: 0;


font-size: clamp(1.8rem, 4vw, 2.6rem);
font-weight: 600;
letter-spacing: -0.03em;


}

.tagline {
color: var(--muted);
margin-top: 0.5rem;
margin-bottom: 2rem;
}

nav {
display: flex;
gap: 1.5rem;
flex-wrap: wrap;


padding-top: 1rem;
border-top: 1px solid var(--border);


}

nav a {
text-decoration: none;
color: var(--accent);
font-weight: 500;
}

nav a:hover {
text-decoration: underline;
}

nav a.active {
    display: inline-block;
    font-weight: 700;
}

section {
margin-bottom: 3rem;
}

h2 {
color: var(--accent);
font-size: 1.2rem;
margin-bottom: 1rem;
}

p {
margin-bottom: 1.25rem;
}

a {
color: var(--accent);
}

.social {
list-style: none;
padding: 0;
}

.social li {
margin-bottom: 0.5rem;
}

footer {
margin-top: 5rem;
padding-top: 2rem;


border-top: 1px solid var(--border);

color: var(--muted);
font-size: 0.9rem;


}

@media (max-width: 640px) {


.container {
    padding: 2rem 1.25rem;
}

nav {
    gap: 1rem;
}


}