@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=DM+Mono:wght@300;400&display=swap');

:root {
--bg:       #0e0e0e;
--surface:  #161616;
--border:   #2a2a2a;
--accent:   #c8a96e;
--accent2:  #6e9ec8;
--accent3:  #9ec86e;
--accent4:  #c86e6e;
--text:     #e8e4dc;
--muted:    #666;
--radius: 4px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
background: var(--bg);
color: var(--text);
font-family: 'DM Mono', monospace;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
padding: 0 24px 80px;
}

.topnav {
width: 100%;
max-width: 720px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 28px 0 40px;
gap: 16px;
}

.topnav-brand {
font-family: 'Playfair Display', serif;
font-size: 1.5rem;
font-weight: 400;
letter-spacing: -0.02em;
background: linear-gradient(135deg, var(--accent) 0%, var(--accent2) 50%, var(--accent3) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-decoration: none;
white-space: nowrap;
}

.topnav-links { display: flex; align-items: center; gap: 6px; }

.topnav-links a {
font-size: 0.65rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--muted);
text-decoration: none;
padding: 5px 10px;
border-radius: var(--radius);
border: 1px solid transparent;
transition: all 0.15s;
}
.topnav-links a:hover  { color: var(--text); border-color: var(--border); }
.topnav-links a.active { color: var(--accent); border-color: var(--border); background: rgba(255,255,255,0.03); }
.topnav-links .sep     { color: #2a2a2a; font-size: 0.6rem; }

@media (max-width: 600px) {
.topnav { flex-direction: column; align-items: stretch; padding-bottom: 28px; gap: 14px; }
.topnav-links { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0; }
.topnav-links .sep { display: none; }
.topnav-links a { text-align: center; padding: 8px 4px; border: 1px solid var(--border); border-radius: 0; }
.topnav-links a:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.topnav-links a:last-child  { border-radius: 0 var(--radius) var(--radius) 0; }
}