/* Drupal integration and full visible viewport sections. */
:root { --sh-admin-top: 0px; --sh-mobile-nav: 0px; }
html { scroll-padding-top: calc(var(--sh-admin-top) + var(--sh-mobile-nav)); }
.sh-portfolio { position: relative; }
.sh-main { position: relative; max-width: none; padding-top: 0; }
.sh-main > .sh-section {
  min-height: calc(100vh - var(--sh-admin-top) - var(--sh-mobile-nav));
  min-height: calc(100dvh - var(--sh-admin-top) - var(--sh-mobile-nav));
  height: auto; max-height: none; margin-bottom: 0; clip-path: none;
  align-content: center;
}
.sh-main > .hero { display: flex; flex-direction: column; justify-content: center; padding-top: 110px; padding-bottom: 110px; }
.sh-brand { position: absolute; top: 32px; left: 6%; z-index: 6; max-width: 80%; }
.sh-main .hero-copy { margin-top: 0; }
.sh-main .hero h2 { white-space: normal; }
.sh-main .sidebar { top: var(--sh-admin-top); }
.sh-portfolio > .sidebar { top: var(--sh-admin-top); }
.sh-section h1, .sh-section h2, .sh-section h3 { overflow-wrap: anywhere; }
.sh-section h1 { line-height: 1.08; }
.sh-links { display: flex; flex-wrap: wrap; gap: 15px; margin-top: 22px; }
.sh-links .button:after, .sh-section a.text-link:after { content: ' →'; }
.sh-image { overflow: hidden; }
.sh-image:not(.crop) img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sh-image.crop img { position: absolute; max-width: none; }
.hero-art, .nature-art, .contact-art { pointer-events: none; }
.sh-main .services { display: flex; flex-direction: column; justify-content: center; }
.sh-main .service-grid { width: 100%; }
.sh-main .service-grid article:nth-child(3n) { border-right: 0; }
.sh-main .service-grid { row-gap: 40px; }
.sh-main .nature-copy, .sh-main .contact-copy { max-width: 650px; }
.sh-main .nature-copy > p:not(.eyebrow), .sh-main .contact-copy > p:not(.eyebrow) { max-width: 460px; }
.sh-main .projects { align-items: center; gap: 5%; padding-bottom: 100px; }
.sh-projects { width: 61%; min-width: 0; }
.sh-project { position: relative; }
.sh-project[hidden], .sh-carousel-controls[hidden] { display: none; }
.sh-project .project-picture { width: 100%; aspect-ratio: 322 / 231; }
.sh-project .project-card { position: relative; width: 90%; max-width: none; left: -30px; bottom: auto; margin-top: -25px; padding: 18px 22px; }
.sh-project .project-card h3 { font-family: 'DM Sans', Arial, sans-serif; font-size: 18px; }
.sh-project .project-card p { font-size: 14px; }
.sh-project .project-card .text-link { margin-top: 10px; }
.sh-carousel-controls { display: flex; justify-content: center; align-items: center; gap: 20px; margin-top: 20px; }
.sh-carousel-controls .carousel-arrow { position: static; font-size: 34px; }
.sh-slide-status { font-size: 13px; }
.sh-main .project-note { bottom: 35px; }
.sh-main .about { align-items: center; }
.sh-main .portrait-wrap { width: 100%; }
.sh-main .portrait { aspect-ratio: 183 / 246; }
.sh-main .paper { bottom: -45px; }
.sh-main .interests { padding-bottom: 25px; }
.sh-main .about-copy > p:not(.eyebrow) { line-height: 1.6; }
.sh-main .contact-buttons { flex-wrap: wrap; }
.sh-main footer { flex-wrap: wrap; }
.sh-main .footer-links { flex-wrap: wrap; }
.sh-main .footer-links .text-link { margin-top: 0; }
.sh-main .button, .sh-main .text-link { overflow-wrap: anywhere; }
@media(max-width:700px) {
  :root { --sh-mobile-nav: 62px; }
  .sh-portfolio { padding-top: 62px; }
  .sh-main > .hero { padding-top: 115px; padding-bottom: 370px; }
  .sh-main .hero-art { height: 340px; }
  .sh-main .hero-copy { margin: 0; }
  .sh-brand { top: 27px; left: 7%; }
  .sh-portfolio .sidebar { overflow-x: auto; gap: 20px; }
  .sh-portfolio .sidebar nav { white-space: nowrap; gap: 18px; }
  .sh-portfolio .sidebar nav a:nth-child(2), .sh-portfolio .sidebar nav a:nth-child(4) { display: flex; }
  .sh-portfolio .sidebar .monogram { flex-shrink: 0; }
  .sh-main .projects { display: block; padding-bottom: 85px; }
  .sh-projects { width: 94%; margin: 35px auto 0; }
  .sh-project .project-card { left: -3%; width: 106%; }
  .sh-main .nature { padding-bottom: 165px; }
  .sh-main .about { padding-bottom: 115px; }
  .sh-main .service-grid article { border-right: 0; }
  .sh-main .hero h1 { font-size: clamp(60px, 16vw, 84px); }
}

/* Keep the editable greeting legible over the cropped monitor image. */
.sh-main .hero-note {
  color: var(--ink);
  background: rgba(243, 240, 235, .94);
  padding: 10px 16px;
  border-radius: 2px;
}

/* Uploaded project images retain their complete original composition. */
.sh-project .project-picture:not(.crop) { aspect-ratio: auto; }
.sh-project .project-picture:not(.crop) img { height: auto; object-fit: contain; }