/* =========================================
   ABOUT NAVIGATION
========================================= */

.about-header {
position: sticky;
top: 0;
z-index: 1000;

display: flex;
justify-content: space-between;
align-items: center;

padding: 1.25rem 2rem;

background: rgba(244,241,234,.92);
backdrop-filter: blur(14px);

border-bottom: 1px solid rgba(0,0,0,.08);
}

.about-logo {
display: flex;
flex-direction: column;

font-family: var(--font-display, sans-serif);
font-size: 1.25rem;
font-weight: 700;
line-height: .85;
letter-spacing: -.05em;

color: #111;
text-decoration: none;
text-transform: uppercase;
}

.about-nav {
display: flex;
align-items: center;
gap: 2rem;
}

.about-nav a {
position: relative;

font-family: var(--font-mono, 'Courier New', monospace);
font-size: .8rem;
letter-spacing: .12em;
text-transform: uppercase;

color: rgba(0,0,0,.65);
text-decoration: none;

transition: color .25s ease;
}

.about-nav a:hover {
color: #111;
}

.about-nav a::after {
content: "";

position: absolute;
left: 0;
bottom: -8px;

width: 0;
height: 1px;

background: #111;

transition: width .25s ease;
}

.about-nav a:hover::after,
.about-nav a.active::after {
width: 100%;
}

.about-nav a.active {
color: #111;
}

@media (max-width: 900px) {

.about-header {
flex-direction: column;
gap: 1.25rem;
padding: 1rem;
}

.about-nav {
flex-wrap: wrap;
justify-content: center;
gap: 1rem 1.5rem;
}

}

@media (max-width: 600px) {

.about-logo {
font-size: 1rem;
}

.about-nav a {
font-size: .7rem;
}

}