/* Layout */
:root{
  --bg:#ffffff;
  --fg:#0f172a;
  --muted:#64748b;
  --border:#e5e7eb;
  --link:#1f2937;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--fg);
  font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
}

/* Containers */
.container{max-width:1100px;margin:0 auto}
.px{padding-left:16px;padding-right:16px}

/* Header */
header{border-bottom:1px solid var(--border);background:#fff}
header .row{
  display:flex;align-items:center;justify-content:space-between;
  height:72px;
}
.brand{font-weight:700;font-size:28px;color:var(--fg)}
/* Desktop nav default */
#site-nav{
  display:flex;
  gap:24px;
}
#site-nav a{
  text-decoration:none;
  color:var(--muted);
  font-weight:600;
}
#site-nav a:hover{color:var(--fg)}

/* Hamburger button */
.hamburger{
  display:none;
  background:none;
  border:0;
  padding:0;
  margin-left:16px;
  width:28px;
  height:20px;
  cursor:pointer;
  line-height:0;
  font-size:0;
  outline:0;
  box-shadow:none;
  -webkit-appearance:none;
  appearance:none;
  position:relative;
  z-index:60;
}

/* Three bars - all same colour */
.hamburger span{
  position:absolute;
  left:0;
  right:0;
  height:2px;
  background:#000000;
  border-radius:2px;
  transition:transform .22s ease,opacity .22s ease;
}

/* Top, middle, bottom positions */
.hamburger span:nth-child(1){
  top:0;
}
.hamburger span:nth-child(2){
  top:50%;
  transform:translateY(-50%);
}
.hamburger span:nth-child(3){
  bottom:0;
}

/* Open state -> clean, centred X */
.hamburger.active span:nth-child(1){
  top:50%;
  transform:translateY(-50%) rotate(45deg);
}
.hamburger.active span:nth-child(2){
  opacity:0;
}
.hamburger.active span:nth-child(3){
  bottom:auto;
  top:50%;
  transform:translateY(-50%) rotate(-45deg);
}

/* Tablet & smaller */
@media (max-width:900px){
  header .row,
  .row.header{
    position:relative;
  }

  /* show hamburger, hide links until opened */
  .hamburger{
    display:flex;
  }

  #site-nav{
    display:none !important;
    position:absolute;
    top:72px;
    right:16px;
    background:#fff;
    border:1px solid var(--border);
    border-radius:8px;
    padding:12px;
    box-shadow:0 8px 20px rgba(0,0,0,.08);
    flex-direction:column;
    gap:8px;
    min-width:220px;
    z-index:1000;
  }

  #site-nav a{
    margin:0;
    color:var(--fg);
  }

  #site-nav.active{
    display:flex !important;
  }
}