/* ===========================================================
   LAYOUT — header / nav / footer / section scaffolding
=========================================================== */

.site-header{
  position: sticky;
  top:0;
  z-index: 500;
  background: rgba(27,26,24,.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--stone-line);
}
.site-header .wrap{
  display:flex;
  align-items:center;
  justify-content: space-between;
  height: 84px;
}
.brand{
  font-family: var(--serif);
  font-size: 19px;
  letter-spacing: .01em;
}
.brand small{
  display:block;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--stone);
  margin-top: 2px;
}

.primary-nav{ display:flex; align-items:center; gap: 40px; }
.primary-nav ul{
  display:flex; gap: 32px; list-style:none; margin:0; padding:0;
}
.primary-nav a{
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--ivory);
  position:relative;
  padding-bottom: 4px;
}
.primary-nav a::after{
  content:"";
  position:absolute; left:0; right:100%; bottom:0; height:1px;
  background: var(--oxblood-bright);
  transition: right .35s var(--ease);
}
.primary-nav a:hover::after,
.primary-nav a[aria-current="page"]::after{ right:0; }
.primary-nav a[aria-current="page"]{ color: var(--ivory); }

.nav-cta{ display:flex; align-items:center; gap:22px; }

.menu-toggle{
  display:none;
  background:none; border:0; color:var(--ivory);
  width:40px; height:40px; cursor:pointer;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.menu-toggle span{ width:22px; height:1px; background: var(--ivory); display:block; }

.mobile-nav{
  position:fixed; inset:0; z-index:600;
  background: var(--graphite);
  padding: var(--gutter);
  display:flex; flex-direction:column;
  transform: translateY(-100%);
  transition: transform .5s var(--ease);
}
.mobile-nav.open{ transform: translateY(0); }
.mobile-nav-top{ display:flex; justify-content:space-between; align-items:center; height:84px; }
.mobile-nav ul{ list-style:none; margin: 40px 0 0; padding:0; display:flex; flex-direction:column; gap:0; }
.mobile-nav li{ border-bottom:1px solid var(--stone-line); }
.mobile-nav a{ display:block; padding: 22px 0; font-family: var(--serif); font-size: 32px; }
.mobile-nav .mobile-contact{ margin-top:auto; padding-top:32px; color:var(--stone); font-size:13px; line-height:2; }

@media (max-width: 940px){
  .primary-nav{ display:none; }
  .menu-toggle{ display:flex; }
}

/* Sections ------------------------------------------------- */
.section{
  padding: clamp(72px, 11vw, 148px) 0;
}
.section + .section{ border-top: 1px solid var(--stone-line); }
.section-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap: 40px;
  margin-bottom: clamp(40px, 6vw, 76px);
}
.section-head h2{
  font-size: clamp(28px, 3.6vw, 46px);
  max-width: 16ch;
  line-height:1.08;
}
.eyebrow{ display:block; margin-bottom:18px; }

/* Footer ----------------------------------------------------*/
.site-footer{
  background: var(--graphite-soft);
  border-top: 1px solid var(--stone-line);
  padding: 96px 0 40px;
}
.footer-statement{
  font-family: var(--serif);
  font-size: clamp(26px, 4vw, 48px);
  line-height:1.15;
  max-width: 16ch;
  margin-bottom: 72px;
}
.footer-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  padding-bottom: 56px;
  border-bottom: 1px solid var(--stone-line);
}
.footer-col h4{ font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--stone); font-family:var(--sans); font-weight:600; margin-bottom:18px;}
.footer-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.footer-col a:hover{ color: var(--oxblood-bright); }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:flex-start;
  padding-top: 32px; gap: 40px; flex-wrap:wrap;
}
.footer-disclaimer{
  max-width: 640px;
  font-size: 12px;
  color: var(--stone);
  line-height:1.7;
}
.footer-copy{ font-size:12px; color:var(--stone); white-space:nowrap; }

@media (max-width: 780px){
  .footer-grid{ grid-template-columns: repeat(2,1fr); }
  .footer-bottom{ flex-direction:column-reverse; }
}

/* Reading progress -------------------------------------------*/
.reading-progress{
  position: fixed; top:0; left:0; height:2px; background: var(--oxblood-bright);
  width:0%; z-index: 700; transition: width .1s linear;
}