/* Shared nav + typography — navy + gold, Cormorant Garamond + Inter.
   Loaded on every page after styles.css; selectors reuse some class names
   (e.g. .nav-links) but win via higher specificity or load order. */

:root{
  --brand-navy:#1c2f42;
  --brand-gold:#c9a15c;
}

body{
  font-family:'Inter', -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}

h1, h2, h3{
  font-family:'Cormorant Garamond', ui-serif, Georgia, serif;
  font-weight:600;
}

/* NAV — plain white bar.
   Sizes fluidly scale between 900px and 1320px viewport width so the nav
   shrinks continuously instead of staying fixed-size and crowding until the
   900px breakpoint snaps it into the stacked mobile layout. */
.site-nav{
  display:flex; align-items:center; justify-content:space-between;
  height:clamp(90px, calc(90px + 60 * (100vw - 900px) / 420), 150px);
  padding:0 clamp(22px, calc(22px + 22 * (100vw - 900px) / 420), 44px);
  max-width:1320px; margin:0 auto;
}
.nav-brand{display:flex; align-items:center; gap:20px; height:100%;}
.nav-brand img{
  height:clamp(64px, calc(64px + 48 * (100vw - 900px) / 420), 112px);
  width:auto; display:block;
}
.brand-divider{width:1px; height:34px; background:var(--brand-gold); flex-shrink:0;}
.brand-name{
  font-family:'Cormorant Garamond', serif; font-weight:600;
  font-size:clamp(1.25rem, calc(1.25rem + 0.5 * (100vw - 900px) / 420), 1.75rem);
  color:var(--brand-navy); white-space:nowrap;
}
.site-nav .nav-links{
  display:flex;
  gap:clamp(16px, calc(16px + 18 * (100vw - 900px) / 420), 34px);
  list-style:none; margin:0; padding:0;
}
.site-nav .nav-links a{
  font-family:'Inter', sans-serif; font-weight:500;
  font-size:clamp(0.95rem, calc(0.95rem + 0.24 * (100vw - 900px) / 420), 1.19rem);
  color:var(--brand-navy);
  padding:0 0 6px; border-bottom:2px solid transparent; white-space:nowrap;
}
.site-nav .nav-links a.current,
.site-nav .nav-links a[aria-current="page"],
.site-nav .nav-links a:hover{border-bottom-color:var(--brand-gold);}

@media (max-width:900px){
  .site-nav{height:auto; padding:18px 22px; flex-wrap:wrap; gap:14px;}
  .nav-brand{height:auto; width:100%;}
  .nav-brand img{height:56px;}
  .brand-name{font-size:1.05rem; white-space:normal; line-height:1.3; flex:1; min-width:0;}
  .site-nav .nav-links{
    position:static; max-height:none; overflow:visible;
    flex-direction:row; flex-wrap:wrap; gap:16px; border-bottom:none;
  }
  .site-nav .nav-links a{font-size:0.95rem; display:inline; padding:0 0 4px;}
  .site-nav .nav-links li{border-top:none;}
}

/* Off-white content ground, full-width, sitting directly under the white
   nav bar. Applied via class="page-content" on <main> — currently only
   services.html and projects.html opt into it. */
.page-content{
  background-color:#F9F8F4;
}

/* Shared light page-heading — large serif title + thin gold rule, no colored
   band. Used by Services and Projects (About has its own bespoke top block,
   Contact has its own split layout). */
.page-hero{
  max-width:1320px; margin:0 auto; padding:20px 44px 24px;
}
.page-hero h1{
  font-size:clamp(2.2rem, 4vw, 3rem);
  color:var(--brand-navy); margin:0;
}
.page-hero-rule{width:52px; height:1px; background:var(--brand-gold); margin-top:22px;}
.page-hero p{
  font-family:'Inter', sans-serif; color:var(--text-muted);
  margin:18px 0 0; font-size:1.05rem;
}

@media (max-width:900px){
  .page-hero{padding:56px 22px 8px;}
}