:root{
  --ink:#111;
  --soft:#6b7280;           /* muted gray */
  --accent:#0b2942;
  --bg:#ffffff;
  --max:980px;              /* content width cap */
    --content-max: 980px;            /* matches About page width */
  --hero-radius: 14px;             /* nice rounded hero frame */
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font:16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}

/* Top banner */
.site-header{
  position:sticky; top:0; z-index:1000;
  background:#fff; border-bottom:1px solid #e5e7eb;
}
.header-inner{
  max-width:var(--max); margin:0 auto; padding:14px 18px;
  display:flex; align-items:center; gap:24px;
}
.brand a{
  color:var(--ink); text-decoration:none; text-transform: uppercase ; font-weight:800; letter-spacing:9px;
  font-size:clamp(22px, 3.8vw, 34px);
}

/* ================================
   NAVIGATION + QUICK LINKS
   Consistent look & feel
================================= */

/* Main nav (header) */
.nav {
  margin-left: auto;
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

.nav a,
.quick-links a {
  font-size: 13px;                /* slightly larger for readability */
  color: var(--ink, #111);        /* fall back to dark text if --ink not defined */
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 8px;
  transition: background .15s ease, color .15s ease;
}

.nav a:hover,
.quick-links a:hover {
  background: #e0f0ff;  /* light blue background */
  color: #0b2942;       /* your accent dark blue */
}

.nav a.active {
  outline: 2px solid #e5e7eb;
  color: var(--accent, #0b2942);
}

/* Quick links bar (below hero) */
.quick-links {
  max-width: 980px;
  margin: 14px auto 26px;
  padding: 0 18px;
  display: flex;
  justify-content: flex-end;
  gap: 18px;
}


/* Generic page wrapper (white pages) */
.page-wrap{
  max-width:var(--max); margin:28px auto 64px; padding:0 18px;
}
.page-wrap h1{ margin:0 0 10px; font-size:clamp(22px, 3.4vw, 32px) }
.page-wrap .lede{ color:var(--soft); margin:0 0 24px; }


  /* Page container */
  .page-wrap{
    padding: 16px 14px 28px;
    max-width: 720px;               /* keeps line-length sane */
  }

  /* About page layout: single column */
  .about-grid{
    display:block;                  /* kill the 2-col grid on phones */
  }
  .about-photo{
    margin: 0 0 14px 0;             /* image above copy */
  }
  .about-photo img{
    width: 100%;
    height: auto;
    display: block;
    border-radius: 14px;
    box-shadow: 0 10px 26px rgba(0,0,0,.08);
  }

  /* About copy */
  .about-copy{
    font-size: 15px;
    line-height: 1.6;
  }
  .about-copy p{
    margin: 0 0 12px 0;             /* tighten vertical rhythm */
  }

  /* Optional: reduce oversized h1 on small screens */
  h1{ font-size: 26px; line-height: 1.15; margin: 0 0 10px; }

  /* Quick-links (if present under hero on the splash page) */
  .quick-links{
    padding: 0 14px;
    gap: 10px;
    justify-content: flex-start;
  }
  .quick-links a{
    font-size: 14px;
    padding: 8px 12px;
  }
}