/* Shared primary navigation: one compact treatment for every page. */
:root{
  --site-nav-font-family:Oswald,'Arial Narrow',sans-serif;
  --site-nav-font-size:clamp(12px,1.25vw,18px);
  --site-nav-font-weight:700;
  --site-nav-line-height:1;
  --site-nav-letter-spacing:.02em;
  --site-nav-gap:clamp(12px,1.65vw,24px);
  --site-nav-donate:#df161d;
}

/* Canonical global header, sourced from the current Our Animals treatment. */
:root{
  --site-nav-container-gutter:clamp(16px,3vw,40px);
  --site-nav-container-gap:clamp(8px,1vw,14px);
  --site-nav-container-radius:clamp(14px,1.5vw,22px);
  --site-nav-mobile-edge-inset:12px;
  --site-nav-forest:#173c31;
}

.shared-site-header{
  position:absolute;
  z-index:10;
  top:var(--site-nav-container-gap);
  left:50%;
  width:min(calc(100% - (2 * var(--site-nav-container-gutter))),1360px);
  height:clamp(46px,5vw,72px);
  margin:0;
  transform:translateX(-50%);
  border-radius:var(--site-nav-container-radius) var(--site-nav-container-radius) 0 0;
  background:transparent;
  color:var(--site-nav-forest);
}

.shared-site-header--nested{
  top:0;
  left:0;
  width:100%;
  transform:none;
}

/* Artwork-contained pages use the same header source, filling only their
   own nav-artwork section. The artwork itself remains page-specific. */
.shared-site-header--artwork{
  top:0;
  left:0;
  width:100%;
  height:100%;
  margin:0;
  transform:none;
  border-radius:0;
  background:transparent;
}

.shared-site-header--artwork .shared-header-inner{
  width:91%;
  height:100%;
  min-height:0;
  padding:0;
}

.shared-header-inner{
  position:relative;
  display:flex;
  align-items:center;
  width:91%;
  height:100%;
  margin:0 auto;
}

.shared-logo{
  display:block;
  flex:0 0 18.5%;
  width:18.5%;
  line-height:0;
}

.shared-logo img{
  display:block;
  width:100%;
  height:auto;
  transform:scale(.6);
  transform-origin:left center;
}

.shared-primary-nav{
  display:flex;
  flex:1 1 auto;
  align-items:center;
  justify-content:flex-end;
  gap:var(--site-nav-gap);
  width:auto;
  margin-left:auto;
  padding-right:var(--site-nav-gap);
}

.shared-primary-nav a,
.shared-donate,
.shared-menu-toggle{
  position:relative;
  top:auto;
  right:auto;
  bottom:auto;
  left:auto;
  width:auto;
  height:auto;
  min-height:0;
  flex:0 0 auto;
  color:inherit;
  font-family:var(--site-nav-font-family);
  font-size:var(--site-nav-font-size);
  font-weight:var(--site-nav-font-weight);
  line-height:var(--site-nav-line-height);
  letter-spacing:var(--site-nav-letter-spacing);
  text-decoration:none;
  white-space:nowrap;
}

.shared-primary-nav a{
  padding:.7em 0;
}

.shared-primary-nav a::after{
  position:absolute;
  right:0;
  bottom:0;
  left:0;
  width:auto;
  height:2px;
  background:transparent;
  content:"";
}

.shared-primary-nav a[aria-current="page"]::after,
.shared-primary-nav a.is-active::after{
  background:#0b3e35;
}

.shared-primary-nav a:hover,
.shared-primary-nav a:focus-visible{
  background:transparent;
  color:var(--site-nav-donate);
}

.shared-primary-nav a:hover::after,
.shared-primary-nav a:focus-visible::after{
  background:transparent;
}

.shared-donate{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.55em 1.05em;
  border-radius:999px;
  background:var(--site-nav-donate);
  color:#fff;
}

.shared-primary-nav a:focus-visible,
.shared-donate:focus-visible,
.shared-menu-toggle:focus-visible{
  outline:3px solid #ffd43b;
  outline-offset:3px;
}

.shared-menu-toggle{
  display:none;
}

@media (max-width:900px){
  .shared-site-header{background:rgba(202,230,243,.84)}
}

@media (max-width:620px){
  .shared-site-header{
    top:var(--site-nav-container-gap);
    height:58px;
  }

  .shared-site-header--nested{top:0}

  .shared-header-inner{
    width:100%;
    min-height:58px;
    padding-inline:12px;
    justify-content:flex-end;
  }

  .shared-logo{
    position:absolute;
    left:0;
    width:142px;
    flex:0 0 142px;
  }

  .shared-primary-nav{
    display:none;
    position:absolute;
    z-index:12;
    top:58px;
    right:0;
    left:0;
    width:auto;
    height:auto;
    margin:0;
    padding:8px 14px 14px;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    background:#fff;
    border-top:1px solid rgba(7,30,25,.12);
    box-shadow:0 8px 15px rgba(0,0,0,.14);
  }

  .shared-primary-nav.is-open{display:flex}

  .shared-primary-nav a{
    width:auto;
    height:auto;
    padding:12px 10px;
    font-size:16px;
    line-height:1.1;
  }

  .shared-primary-nav a::after{
    right:auto;
    bottom:4px;
    left:10px;
    width:44px;
    height:2px;
  }

  .shared-menu-toggle{
    display:flex;
    position:absolute;
    top:8px;
    right:auto;
    left:var(--site-nav-mobile-edge-inset);
    bottom:8px;
    align-items:center;
    gap:8px;
    border:0;
    background:transparent;
    color:#082d26;
    font-size:14px;
    cursor:pointer;
  }

  .shared-menu-bars{
    display:block;
    position:relative;
    width:24px;
    height:3px;
    background:#082d26;
    content:"";
  }

  .shared-menu-bars::before,
  .shared-menu-bars::after{
    position:absolute;
    left:0;
    width:24px;
    height:3px;
    background:#082d26;
    content:"";
  }

  .shared-menu-bars::before{top:-7px}
  .shared-menu-bars::after{top:7px}

  .shared-donate{
    position:absolute;
    top:8px;
    right:var(--site-nav-mobile-edge-inset);
    width:auto;
    height:42px;
    min-height:42px;
    padding:.55em 1.05em;
    font-size:16px;
  }

  .shared-site-header--artwork{
    height:58px;
    min-height:58px;
  }

  .shared-site-header--artwork .shared-header-inner{
    width:91%;
    height:58px;
    min-height:58px;
    padding-inline:0;
  }

  .shared-site-header-host:has(> .shared-site-header--artwork){
    min-height:58px;
  }
}

/* Shared outer canvas: every page uses the available width through 1920px,
   then remains centered on a consistent maximum shell on ultra-wide screens. */
:root{--site-shell-max:1920px}

.site-shell{
  --max-art:var(--site-shell-max);
  --container-max:var(--site-shell-max);
  width:100%!important;
  max-width:var(--site-shell-max)!important;
  margin-inline:auto!important;
}

body.site-shell{
  position:relative;
  width:100%;
  max-width:var(--site-shell-max);
  margin-inline:auto;
  box-sizing:border-box;
}

/* Artwork pages with standalone header/main/footer elements inherit the same
   canvas instead of retaining an older 1440px inner cap. */
.site-shell .site-header,
.site-shell .shared-site-header,
.site-shell .art-section,
.site-shell .mobile-art-section,
.site-shell .animals-mobile,
.site-shell .mission-mobile,
.site-shell .site-footer,
.site-shell .homepage-artboard,
.site-shell .homepage-footer,
.site-shell .about-art-section,
.site-shell .about-final-image-section,
.site-shell .about-new-art,
.site-shell .contact-new-art,
.site-shell .randy-bio-art,
.site-shell .history-image-page,
.site-shell .history-new-art,
.site-shell .story-art-section,
.site-shell .story-final-image-section{
  width:100%;
  max-width:none;
}

.site-shell .shared-site-header{
  left:0;
  right:0;
  transform:none;
}

.site-shell .site-footer{
  left:0;
  right:0;
}

.site-header .nav-artboard,
.animals-site-header .animals-header-inner,
.preview-header .preview-header-inner{
  display:flex;
  align-items:center;
}

.site-header .nav-artboard{
  padding-inline:clamp(18px,3vw,42px);
}

.primary-nav{
  position:static;
  display:flex;
  flex:1 1 auto;
  align-items:center;
  justify-content:center;
  gap:var(--site-nav-gap);
  width:auto;
  height:100%;
  margin:0;
}

.animals-nav,
.preview-nav{
  display:flex;
  flex:1 1 auto;
  align-items:center;
  justify-content:flex-end;
  gap:var(--site-nav-gap);
  width:auto;
  margin-left:auto;
  padding-right:clamp(12px,1.65vw,24px);
}

.primary-nav a,
.animals-nav a,
.preview-nav a,
.nav-donate,
.animals-donate,
.preview-donate{
  position:relative;
  top:auto;
  left:auto;
  width:auto;
  height:auto;
  min-height:0;
  flex:0 0 auto;
  color:inherit;
  font-family:var(--site-nav-font-family);
  font-size:var(--site-nav-font-size);
  font-weight:var(--site-nav-font-weight);
  line-height:var(--site-nav-line-height);
  letter-spacing:var(--site-nav-letter-spacing);
  text-decoration:none;
  white-space:nowrap;
}

.primary-nav a,
.animals-nav a,
.preview-nav a{
  padding:.7em 0;
}

.primary-nav a::after,
.animals-nav a::after,
.preview-nav a::after{
  right:0;
  bottom:0;
  left:0;
  width:auto;
  height:2px;
}

.primary-nav a:hover,
.animals-nav a:hover,
.preview-nav a:hover,
.primary-nav a:focus-visible,
.animals-nav a:focus-visible,
.preview-nav a:focus-visible{
  background:transparent;
  color:var(--site-nav-donate);
}

.primary-nav a:hover::after,
.animals-nav a:hover::after,
.preview-nav a:hover::after,
.primary-nav a:focus-visible::after,
.animals-nav a:focus-visible::after,
.preview-nav a:focus-visible::after{
  background:transparent;
}

.nav-donate,
.animals-donate,
.preview-donate{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:0;
  padding:.55em 1.05em;
  border-radius:999px;
  background:var(--site-nav-donate);
  color:#fff;
}

.nav-donate:hover,
.nav-donate:focus-visible,
.animals-donate:hover,
.animals-donate:focus-visible,
.preview-donate:hover,
.preview-donate:focus-visible{background:#c90d16}

.primary-nav a:focus-visible,
.animals-nav a:focus-visible,
.preview-nav a:focus-visible,
.nav-donate:focus-visible,
.animals-donate:focus-visible,
.preview-donate:focus-visible,
.menu-toggle:focus-visible,
.animals-menu-toggle:focus-visible,
.preview-menu-toggle:focus-visible{outline:3px solid #ffd43b;outline-offset:3px}

@media (max-width:620px){
  .site-header,
  .animals-site-header{height:58px}

  .site-header .nav-artboard,
  .animals-site-header .animals-header-inner,
  .preview-header .preview-header-inner{
    width:100%;
    min-height:58px;
    padding-inline:12px;
  }

  .primary-nav,
  .animals-nav,
  .preview-nav{
    display:none;
    position:absolute;
    z-index:12;
    top:58px;
    right:0;
    left:0;
    width:auto;
    height:auto;
    margin:0;
    padding:8px 14px 14px;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    background:#fff;
    border-top:1px solid rgba(7,30,25,.12);
    box-shadow:0 8px 15px rgba(0,0,0,.14);
  }

  .primary-nav.is-open,
  .primary-nav.open,
  .animals-nav.is-open,
  .preview-nav.is-open{display:flex}

  .primary-nav a,
  .animals-nav a,
  .preview-nav a{
    width:auto;
    height:auto;
    padding:12px 10px;
    font-size:16px;
    line-height:1.1;
  }

  .primary-nav a::after,
  .animals-nav a::after,
  .preview-nav a::after{
    right:auto;
    bottom:4px;
    left:10px;
    width:44px;
    height:2px;
  }

  .site-header .menu-toggle,
  .site-header .preview-menu-toggle{
    display:flex;
    position:absolute;
    top:8px;
    bottom:8px;
    left:16px;
    align-items:center;
    gap:9px;
    border:0;
    background:transparent;
    color:#082d26;
    font-family:var(--site-nav-font-family);
    font-size:14px;
    font-weight:var(--site-nav-font-weight);
    cursor:pointer;
  }

  .animals-site-header .animals-menu-toggle,
  .animals-site-header .preview-menu-toggle,
  .preview-header .preview-menu-toggle{
    display:flex;
    position:absolute;
    top:8px;
    right:132px;
    bottom:8px;
    left:auto;
    align-items:center;
    gap:8px;
    border:0;
    background:transparent;
    color:#082d26;
    font-family:var(--site-nav-font-family);
    font-size:14px;
    font-weight:var(--site-nav-font-weight);
    cursor:pointer;
  }

  .nav-donate,
  .animals-donate,
  .preview-donate{
    position:absolute;
    top:8px;
    right:12px;
    width:auto;
    height:42px;
    min-height:42px;
    padding:.55em 1.05em;
    font-size:16px;
  }
}