:root{--bg:#1f1f1f;--fg:#f1f1f1;--muted:#bfbfbf;--line:#2a2a2a;--maxw:980px;--pad:clamp(16px,4vw,48px)}
*{box-sizing:border-box} html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:Manrope,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
.site-pad{padding:var(--pad)} header,main,footer{max-width:var(--maxw);margin-inline:auto}
.header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding-top:18px;padding-bottom:18px; flex-wrap: nowrap}
.brand{font-weight:800;letter-spacing:.02em;text-decoration:none;color:var(--fg); font-size: clamp(18px, 5vw, 24px)}
.tm{font-size:.6em;margin-left:.12em;opacity:.85}
.nav a{margin-left:18px;opacity:.9;text-decoration:none;color:var(--fg); margin-left: 14px}
.hero{margin:10vh 0 6vh}
.logo{font-size:clamp(36px,7vw,84px);margin:.1rem 0 1rem;font-weight:800;letter-spacing:.01em}
.tag{font-size:clamp(16px,2.3vw,22px);opacity:.95;max-width:62ch}
.about{margin:1rem 0 2.25rem;color:var(--fg);opacity:.9;max-width:62ch}
.contact h2{font-size:1rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:0 0 .5rem}
.contact ul{list-style:none;margin:0;padding:0}
.contact li{margin:.25rem 0}
.contact a{border-bottom:1px solid transparent}
.contact a:hover{border-bottom-color:var(--fg)}
.footer{border-top:1px solid var(--line);color:var(--muted);padding-top:14px;padding-bottom:40px}

/* keep links same color as text */
a, a:visited, a:active { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }

/* optional: nav stays clean until hover */
.nav a { text-decoration: none; }
.nav a:hover { text-decoration: underline; }

/* optional: contact list same behavior */
.contact a { text-decoration: none; }



/* 1) Keep header on one line */
.header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:nowrap;
}
.brand, .nav { white-space: nowrap; }
.nav a { margin-left:16px; }

/* 2) Make BEGLOO match blog weight */
.brand{
  font-family: "Manrope", system-ui, sans-serif;
  font-weight: 800;                 /* heavy, like blog */
  font-size: clamp(18px, 6vw, 28px);
  letter-spacing: .02em;
}
.tm{
  font-weight: 500;
  opacity:.7;
  margin-left:.25ch;
  position: relative; top:-1px;
  font-size:.75em;
}

/* 3) Keep nav readable on small screens */
.nav{ font-size: clamp(14px, 3.8vw, 16px); }