/* Shared layout and structure rules */
.site-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:40px;
}
.site-logo{
  display:flex;
  align-items:center;
  gap:8px;
  text-decoration:none;
  font-family:'Barlow Condensed', sans-serif;
  font-weight:800;
  font-size:20px;
  letter-spacing:0.01em;
  color:var(--ink);
  text-transform:uppercase;
}
.site-logo-img{height:38px;width:auto;display:block;}
/* The logo is wrapped in <picture> for WebP support; keep it a clean block box
   so the flex layout (.site-logo) is unchanged vs. the bare <img>. */
.site-logo picture{display:block;}
.site-logo-mark{
  width:22px;height:22px;
  border-radius:6px;
  background:var(--teal);
  position:relative;
  flex-shrink:0;
}
.site-logo-mark::after{
  content:"";
  position:absolute;
  width:8px;height:8px;
  border-radius:50%;
  background:var(--ochre);
  right:-3px; bottom:-3px;
}
.site-header nav a{
  font-family:'IBM Plex Mono', monospace;
  font-size:12.5px;
  font-weight:600;
  letter-spacing:0.04em;
  color:var(--ink-soft);
  text-decoration:none;
  border-bottom:1px solid transparent;
}
.site-header nav a:hover{
  color:var(--teal-dark);
  border-bottom-color:var(--teal-dark);
}

.eyebrow{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:'IBM Plex Mono', monospace;
  font-size:12px;
  font-weight:600;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--teal-dark);
  margin-bottom:14px;
}
.eyebrow::before{
  content:"";
  width:9px;height:9px;
  border-radius:50%;
  background:var(--ochre);
  flex-shrink:0;
}

.crumbs{font-size:12.5px;color:var(--ink-soft);margin:0 0 18px;}
.crumbs a{color:var(--ink-soft);text-decoration:none;}
.crumbs a:hover{text-decoration:underline;}

footer{
  margin-top:36px;
  font-size:12.5px;
  color:var(--ink-soft);
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
}
footer a{color:var(--ink-soft);}