/* V27 — site-wide navigation and footer alignment */
html,
body {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: clip !important;
}

/* The featured Butterfly story is one direct project link on the homepage. */
.work-feature-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.work-feature-link:focus-visible {
  outline: none;
}

.work-feature-link:focus-visible .caption h3 {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}

/* Homepage Selected Work: preserve all three original compositions. */
@media (min-width: 801px) {
  .work-feature-link .work-grid {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
  }

  .work-feature-link .work-grid .mainpic {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
  }

  .work-feature-link .work-grid .sidepics {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: none !important;
    width: 100% !important;
    height: auto !important;
    gap: 18px !important;
    margin: 18px 0 0 !important;
    overflow: visible !important;
  }

  .work-feature-link .work-grid .sidepics img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
  }
}

@media (max-width: 800px) {
  .work-feature-link .work-grid .mainpic,
  .work-feature-link .work-grid .sidepics img {
    height: auto !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
  }
}

/* Editorial pause for the vertical herringbone detail in Butterfly's gallery. */
.butterfly-portrait-single {
  width: min(62%, 760px) !important;
  margin: 0 auto 30px !important;
}

@media (max-width: 800px) {
  .butterfly-portrait-single {
    width: 100% !important;
  }
}

/* Internal pages use their visible live-text navigation as the hit area. */
@media (min-width: 801px) {
  .site-shell-header,
  .site-shell-header .site-shell-inner,
  .site-shell-links {
    pointer-events: auto !important;
  }

  .site-shell-links {
    display: flex !important;
    align-items: stretch !important;
    gap: 18px !important;
    height: 54px !important;
  }

  .site-shell-links a {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 54px !important;
    padding: 0 8px !important;
    margin: 0 !important;
    border: 0 !important;
    box-sizing: border-box !important;
  }

  .site-shell-links a::after {
    content: "";
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 5px;
    height: 1px;
    background: transparent;
  }

  .site-shell-links a:hover::after,
  .site-shell-links a.is-active::after {
    background: currentColor;
  }

  .site-shell-links a.is-active {
    padding-bottom: 0 !important;
  }

  /* The homepage desktop masthead is part of the approved hero artwork.
     These transparent anchors track the exact artwork labels. */
  .nav.wrap {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    left: 0 !important;
    right: 0 !important;
    box-sizing: border-box !important;
  }

  .nav.wrap > .links {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    max-width: none !important;
    height: 82px !important;
  }

  .nav.wrap > .links > a:nth-child(1) { left: 63.60% !important; width: 4.00% !important; }
  .nav.wrap > .links > a:nth-child(2) { left: 68.99% !important; width: 6.97% !important; }
  .nav.wrap > .links > a:nth-child(3) { left: 77.28% !important; width: 4.49% !important; }
  .nav.wrap > .links > a:nth-child(4) { left: 83.63% !important; width: 5.04% !important; }
  .nav.wrap > .links > a:nth-child(5) { left: 90.68% !important; width: 5.80% !important; }

  .nav .links a {
    top: 10px !important;
    height: 46px !important;
  }
}

/* One footer grid and one content edge across every page. */
.site-shell-footer {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 34px 0 !important;
  background: #2d2b27 !important;
  color: #b8b0a4 !important;
  border: 0 !important;
  border-top: 1px solid #4b4842 !important;
  font-family: "DM Sans", Arial, sans-serif !important;
  font-size: 11px !important;
  line-height: 1.7 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.site-shell-footer .site-shell-inner,
.site-shell-footer-inner {
  width: 100% !important;
  max-width: 1320px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 56px !important;
  padding-right: 56px !important;
  box-sizing: border-box !important;
}

.site-shell-footer-inner {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: end !important;
  gap: 44px !important;
}

.site-shell-footer-identity,
.site-shell-footer-legal {
  min-width: 0 !important;
}

.site-shell-footer-legal {
  text-align: right !important;
}

.site-shell-footer a {
  color: #b8b0a4 !important;
  text-decoration: none !important;
}

.site-shell-footer a:hover {
  color: #f7f3eb !important;
}

.site-shell-footer .legal-row {
  margin-bottom: 7px !important;
}

.site-shell-footer .legal-row span {
  margin: 0 6px;
}

.site-shell-footer .eh {
  margin-top: 3px;
}

@media (max-width: 800px) {
  body,
  main,
  header,
  section,
  footer,
  .wrap,
  .contact-grid,
  .details,
  .form {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .nav .links,
  .site-shell-links {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .nav .links a,
  .site-shell-links a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 2px !important;
    box-sizing: border-box !important;
    text-align: center !important;
  }

  .site-shell-footer,
  .site-shell-footer .site-shell-inner,
  .site-shell-footer-inner {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .site-shell-footer .site-shell-inner,
  .site-shell-footer-inner {
    display: block !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .site-shell-footer-identity,
  .site-shell-footer-legal {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    text-align: left !important;
    overflow-wrap: anywhere !important;
  }

  .site-shell-footer-legal {
    margin-top: 18px !important;
  }

  .site-shell-footer .legal-row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 5px 7px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .site-shell-footer .legal-row a,
  .site-shell-footer .legal-row span {
    flex: 0 0 auto !important;
    margin: 0 !important;
  }
}