.subpage-header {
  position: relative;
  z-index: 3;
  background: var(--deep);
  color: var(--text-on-dark);
}

.subpage-header .site-header {
  align-items: center;
  padding-block: clamp(14px, 1.7vw, 24px);
}

.subpage-header a[aria-current="page"] {
  color: var(--lilac);
  text-decoration: underline;
  text-underline-offset: .35em;
}

.case-hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: var(--deep);
  color: var(--text-on-dark);
}

.case-cover,
.case-hero::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  width: 100%;
  height: 100%;
}

.case-cover {
  object-fit: cover;
  object-position: center 40%;
}

.case-hero--morse .case-cover { object-position: center 12%; }

.case-hero::after {
  content: "";
  background: linear-gradient(90deg, #050b0ef7 5%, #050b0ec9 34%, #050b0e14 80%),
    linear-gradient(0deg, #050b0e85, transparent 65%);
}

.case-hero--right::after {
  background: linear-gradient(270deg, #050b0ef7 5%, #050b0ec9 34%, #050b0e14 80%),
    linear-gradient(0deg, #050b0e85, transparent 65%);
}

.case-hero-inner {
  display: grid;
  align-items: center;
  min-height: clamp(340px, 36vw, 500px);
  padding-block: clamp(42px, 5vw, 76px);
}

.case-hero-copy { width: min(100%, 37rem); }
.case-hero--right .case-hero-copy { justify-self: end; width: min(100%, 30rem); }
.case-hero .eyebrow { color: var(--text-on-dark); }
.case-hero h1, .support-hero h1 {
  max-width: 12ch;
  margin: .2em 0 .25em;
  font-size: clamp(43px, 6vw, 84px);
  line-height: .98;
}

.case-intro {
  max-width: 34ch;
  font-size: clamp(17px, 1.55vw, 22px);
}

.support-hero .hero-content {
  min-height: 0;
  padding-block: clamp(42px, 6vw, 83px);
}

.support-hero h1 { text-wrap: balance; }

.contact-hero-actions {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 100%;
}

.contact-hero-actions .button { width: 100%; min-width: 0; }
.contact-hero-actions .booking-note { max-width: 28ch; }

.hero-credit {
  padding-block: 9px;
  background: var(--deep);
  color: #d9d0df;
  font-size: 13px;
  line-height: 1.45;
}

.hero-art--norwalk {
  --hero-image: url("./assets/norwalk-violet.webp");
  --hero-position: 50% 7%;
  --hero-side-fade: linear-gradient(90deg, #050b0efa 0%, #050b0eeb 31%, #050b0e70 59%, #050b0e0d 100%);
}

.hero-art--norwalk-closeup {
  --hero-image: url("./assets/norwalk-camera-closeup.webp");
  --hero-position: 50% 15%;
  --hero-side-fade: linear-gradient(90deg, #050b0efa 0%, #050b0ee8 30%, #050b0e81 59%, #050b0e14 100%);
  --hero-vertical-fade: linear-gradient(180deg, #050b0e40, transparent 35%, transparent 76%, #050b0e49 100%);
}

.hero-art--library-interview {
  --hero-image: url("./assets/library-interview-hero.webp");
  --hero-position: 50% 20%;
  --hero-side-fade: linear-gradient(90deg, #050b0efa 0%, #050b0eeb 31%, #050b0e84 59%, #050b0e1a 100%);
}

.hero-art--shipwrights-daughter {
  --hero-image: url("./assets/case-studies/shipwrights-daughter-kitchen.webp");
  --hero-position: 50% 24%;
  --hero-side-fade: linear-gradient(90deg, #050b0efa 0%, #050b0ee8 30%, #050b0e71 59%, #050b0e14 100%);
  --hero-vertical-fade: linear-gradient(180deg, #050b0e40, transparent 35%, transparent 76%, #050b0e49 100%);
}

.hero-art--drawbridge-sunset {
  --hero-image: url("./assets/drawbridge-sunset.webp");
  --hero-position: 50% 44%;
  --hero-side-fade: linear-gradient(90deg, #050b0efa 0%, #050b0ee6 29%, #050b0e6e 59%, #050b0e0d 100%);
  --hero-vertical-fade: linear-gradient(180deg, #050b0e36, transparent 35%, transparent 73%, #050b0e44 100%);
}

.hero-art--isabella-barn {
  --hero-image: url("./assets/isabella-barn-lighting.webp");
  --hero-position: right 66%;
  --hero-side-fade: linear-gradient(90deg, #050b0e 0 36%, #050b0ef5 40%, #050b0ec5 48%, #050b0e39 70%, #050b0e17 100%);
  --hero-vertical-fade: linear-gradient(180deg, #050b0e40, transparent 32%, transparent 74%, #050b0e4f 100%);
  background-repeat: no-repeat;
  background-size: auto, auto, 64% auto;
}

.hero-art--decco-interview {
  --hero-image: url("./assets/decco-blue-lit-interview.webp");
  --hero-position: 50% 35%;
  --hero-side-fade: linear-gradient(90deg, #050b0efa 0%, #050b0eed 28%, #050b0e8c 52%, #050b0e21 76%, #050b0e17 100%);
  --hero-vertical-fade: linear-gradient(180deg, #050b0e40, transparent 32%, transparent 74%, #050b0e4f 100%);
}

.hero-art--morse-interview {
  --hero-image: url("./assets/morse-interview-composite.webp");
  --hero-position: center 20%;
  --hero-side-fade: linear-gradient(90deg, #050b0efa 0%, #050b0eed 28%, #050b0e8c 52%, #050b0e21 76%, #050b0e17 100%);
  --hero-vertical-fade: linear-gradient(180deg, #050b0e40, transparent 32%, transparent 74%, #050b0e4f 100%);
}

.case-overview { padding-block: clamp(38px, 6vw, 86px); }
.case-overview h2 { max-width: 26ch; }
.case-credit { margin-top: .7em; }
.detail-grid, .case-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap);
}

.detail-grid { margin-top: clamp(20px, 2.6vw, 38px); }
.detail-card, .support-capabilities .capability-grid > div {
  padding: clamp(17px, 2.2vw, 30px);
  border: 1px solid #dfd6e8;
  border-radius: 6px;
  background: #fcf8f1;
}

.detail-card h3 {
  margin-bottom: .52em;
  color: var(--plum);
  font-size: clamp(21px, 2vw, 28px);
}

.detail-card p { line-height: 1.54; }
.case-media { margin-top: clamp(25px, 4vw, 56px); }
.case-media .eyebrow {
  margin-bottom: 15px;
  font-family: Gilroy, system-ui, sans-serif;
  letter-spacing: .19em;
}

.case-gallery { padding: 0; margin: 0; list-style: none; }
.case-gallery li {
  overflow: hidden;
  border-radius: 6px;
  background: var(--sand);
  aspect-ratio: 16 / 9;
}

.case-gallery--bts li { aspect-ratio: 4 / 3; }
.case-gallery img { height: 100%; object-fit: cover; }
.support-capabilities { background: #e7dfed; }
.intake-action {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  margin-top: 24px;
}

.portfolio-grid-section, .about--profile {
  padding-block: clamp(38px, 6vw, 86px);
}

.portfolio-grid-section {
  background: var(--ink);
  color: var(--text-on-dark);
}

.portfolio-grid-section + .portfolio-grid-section { padding-top: 0; }
.portfolio-grid-section h2 { margin-bottom: .55em; }

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
}

.portfolio-grid--featured { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.portfolio-card, .journal-card {
  border: 1px solid #dfd6e8;
  border-radius: 6px;
}

.portfolio-card {
  background: var(--deep);
  border-color: #41384d;
}

.portfolio-card:hover { border-color: #ac84d9; }
.portfolio-card .work-image, .journal-card .work-image {
  aspect-ratio: 16 / 9;
  border-radius: 5px 5px 0 0;
}

.portfolio-caption, .journal-caption {
  padding: clamp(15px, 2vw, 26px);
}

.portfolio-caption {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.portfolio-caption h3 { margin: 0; font-size: clamp(25px, 2.5vw, 38px); }
.portfolio-caption p { margin-top: .4em; color: var(--text-on-dark); font-size: 1em; }
.portfolio-caption h3 + p { color: var(--lilac); font-weight: 600; }
.portfolio-caption .icon { color: var(--lilac); }
.about--profile .about-grid {
  grid-template-columns: 1.2fr 1fr .8fr;
  gap: clamp(20px, 3vw, 42px);
  padding-block: 0;
}

.about-photo {
  aspect-ratio: 1;
  height: auto;
  object-fit: cover;
  border-radius: 6px;
}

.testimonials--editorial .testimonial-grid figure, .project-testimonial {
  background: var(--ink);
  color: var(--text-on-dark);
  border: 1px solid #41384d;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.testimonials--editorial .testimonial-grid strong, .project-testimonial strong { color: var(--lilac); }
.project-testimonial { margin: 0; }
.project-testimonial blockquote { margin: 0 0 .8em; }
.project-testimonial figcaption { font-size: .88em; }
.journal-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
  margin-top: clamp(20px, 2.6vw, 38px);
}

.journal-card { background: #fcf8f1; }
.journal-card > a { display: block; height: 100%; border-radius: inherit; }
.journal-card:hover h3 { color: var(--plum); }
.journal-caption h3 { margin: 0 0 .55em; font-size: clamp(22px, 2vw, 29px); line-height: 1.08; }
.journal-caption p { font-size: .95em; }

.published-project {
  display: grid;
  gap: clamp(24px, 4vw, 56px);
}

.project-summary, .project-story--with-photo {
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(20px, 5vw, 72px);
}

.project-facts { display: grid; gap: 1.2em; margin: 0; }
.project-facts dt { color: var(--plum); font-weight: 800; }
.project-facts dd { margin: .2em 0 0; }
.project-award { width: min(100%, 110px); margin-top: 1.25em; }
.case-gallery.project-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.project-story { padding-top: clamp(16px, 2vw, 24px); border-top: 1px solid #dfd6e8; }
.project-story > img { border-radius: 6px; }
.project-crew h2 { font-size: clamp(24px, 3vw, 40px); }
.project-crew ul { margin: .85em 0 0; padding: 0; list-style: none; }
.project-crew li + li { margin-top: .3em; }
.editorial-prose a { color: var(--plum); text-decoration: underline; text-underline-offset: .2em; }

.article-header {
  padding-block: clamp(34px, 5vw, 74px);
  background: var(--deep);
  color: var(--text-on-dark);
}

.article-header h1 {
  max-width: 22ch;
  margin-block: .33em .37em;
  font-size: clamp(37px, 6vw, 81px);
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.article-return { color: var(--lilac); font-weight: 600; }
.article-return:hover { text-decoration: underline; }
.article-byline { display: flex; flex-wrap: wrap; gap: .35em 1.1em; }
.article-frame { max-width: 980px; padding-block: clamp(24px, 5vw, 65px); }
.article-cover {
  max-height: 460px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 6px;
  background: var(--sand);
}

.editorial-prose {
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.65;
  overflow-wrap: anywhere;
}

.editorial-prose > * + * { margin-top: .95em; }
.editorial-prose h2, .editorial-prose h3, .editorial-prose h4 {
  font-family: var(--serif);
  font-size: clamp(26px, 3.3vw, 40px);
  line-height: 1.08;
}

.article-prose { max-width: 70ch; margin: clamp(25px, 4vw, 48px) auto; }
.article-prose h2:not(:first-child), .article-prose h3:not(:first-child), .article-prose h4:not(:first-child) { margin-top: 1.35em; }
.article-prose > br { display: none; }
.article-prose li + li { margin-top: .4em; }
.article-prose figure, .article-prose blockquote { margin: 1.3em 0; }
.article-prose figure img, .article-prose video { display: block; border-radius: 6px; }
.article-prose video { width: min(100%, 420px); background: var(--ink); }
.article-prose figcaption { margin-top: .55em; font-size: .85em; color: #45434a; }
.article-prose blockquote { padding: .65em 1em; border-left: 3px solid var(--purple); background: var(--sand); }
.article-prose hr { border: 0; border-top: 1px solid #dfd6e8; margin-block: 1.5em; }
.article-prose table { width: 100%; border-collapse: collapse; background: #fcf8f1; }
.article-prose td, .article-prose th {
  padding: .65em;
  border: 1px solid #dfd6e8;
  text-align: left;
  vertical-align: top;
}

.article-prose th { color: var(--plum); }
.article-tags, .article-related ul { list-style: none; padding: 0; }
.article-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-block: 0 clamp(24px, 4vw, 52px); }
.article-tags a { display: block; padding: .32em .75em; border: 1px solid #dfd6e8; border-radius: 4px; color: var(--plum); }
.article-tags a:hover { background: #e7dfed; }
.article-related { border-top: 1px solid #dfd6e8; padding-top: clamp(20px, 3vw, 36px); }
.article-related > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.article-related h2 { font-size: clamp(26px, 3vw, 42px); }
.article-related > div a { display: flex; align-items: center; gap: .4em; color: var(--plum); font-weight: 800; }
.article-related ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); margin: 1em 0 0; }
.article-related li a { display: block; height: 100%; background: #fcf8f1; border: 1px solid #dfd6e8; border-radius: 6px; }
.article-related li img { aspect-ratio: 16 / 9; height: auto; object-fit: cover; border-radius: 5px 5px 0 0; }
.article-related li span { display: block; padding: .85em; font-family: var(--serif); font-size: 1.1em; line-height: 1.2; }
.article-related li a:hover { color: var(--plum); border-color: #ac84d9; }

@media (max-width: 760px) {
  .portfolio-grid--featured { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .hero-art--norwalk, .hero-art--library-interview {
    --hero-vertical-fade: linear-gradient(180deg, #050b0e59, transparent 35%, #050b0e42 73%, #050b0ec9 100%);
  }
  .hero-art--norwalk {
    --hero-position: 49% 25%;
    --hero-side-fade: linear-gradient(90deg, #050b0ef5 0%, #050b0edb 34%, #050b0e70 74%, #050b0e33 100%);
  }
  .hero-art--norwalk-closeup {
    --hero-position: 47% 30%;
    --hero-side-fade: linear-gradient(90deg, #050b0ef5 0%, #050b0ecf 35%, #050b0e92 74%, #050b0e3d 100%);
    --hero-vertical-fade: linear-gradient(180deg, #050b0e66, transparent 35%, #050b0e39 72%, #050b0ebf 100%);
  }
  .hero-art--norwalk-closeup + .hero-content h1 { max-width: 10ch; }
  .hero-art--library-interview {
    --hero-position: 68% 25%;
    --hero-side-fade: linear-gradient(90deg, #050b0ef5 0%, #050b0edb 34%, #050b0e8c 77%, #050b0e42 100%);
  }
  .hero-art--shipwrights-daughter {
    --hero-position: 53% 28%;
    --hero-side-fade: linear-gradient(90deg, #050b0ef5 0%, #050b0ecf 35%, #050b0e7d 74%, #050b0e3d 100%);
    --hero-vertical-fade: linear-gradient(180deg, #050b0e66, transparent 35%, #050b0e39 72%, #050b0ebf 100%);
  }
  .hero-art--drawbridge-sunset {
    --hero-position: 48% center;
    --hero-side-fade: linear-gradient(90deg, #050b0ef5 0%, #050b0ed3 34%, #050b0e87 74%, #050b0e35 100%);
    --hero-vertical-fade: linear-gradient(180deg, #050b0e50, transparent 30%, #050b0e30 61%, #050b0ebe 100%);
  }
  .hero-art--isabella-barn {
    --hero-position: right 72%;
    --hero-side-fade: linear-gradient(90deg, #050b0ef7 0%, #050b0ede 35%, #050b0e97 66%, #050b0e42 100%);
    --hero-vertical-fade: linear-gradient(180deg, #050b0e47, transparent 28%, #050b0e36 60%, #050b0eb2 100%);
    background-size: auto, auto, cover;
  }
  .hero-art--decco-interview {
    --hero-position: 39% 42%;
    --hero-side-fade: linear-gradient(90deg, #050b0ef8 0%, #050b0ee1 34%, #050b0e9b 69%, #050b0e42 100%);
    --hero-vertical-fade: linear-gradient(180deg, #050b0e4d, transparent 28%, #050b0e36 60%, #050b0ebd 100%);
  }
  .hero-art--morse-interview {
    bottom: auto;
    height: clamp(220px, 66vw, 325px);
    --hero-position: right 15%;
    --hero-side-fade: linear-gradient(90deg, #050b0e99, #050b0e35 48%, #050b0e05);
    --hero-vertical-fade: linear-gradient(180deg, #050b0e14, transparent 25%, #050b0e38 60%, #050b0ebf 83%, var(--deep));
  }
  .hero-art--morse-interview + .hero-content {
    padding-top: clamp(202px, 59vw, 297px);
  }
  .case-hero-copy, .case-hero--right .case-hero-copy {
    width: min(100%, 26rem);
    justify-self: start;
  }

  .detail-grid { grid-template-columns: 1fr; }
  .detail-card { font-size: 15px; }
  .journal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about--profile .about-grid { grid-template-columns: 1fr 1fr; }
  .about--profile .about-points { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
  .project-summary, .project-story--with-photo { grid-template-columns: 1fr; }
}

@media (max-width: 500px) {
  .contact-hero-actions .button {
    gap: .45em;
    min-height: 44px;
    padding-inline: .7em;
    text-align: center;
    white-space: normal;
  }

  .case-hero::after, .case-hero--right::after {
    background: linear-gradient(0deg, #050b0efa 2%, #050b0ed4 38%, #050b0e4d 100%);
  }

  .case-hero-inner { min-height: 350px; align-items: end; }
  .case-hero h1, .support-hero h1 { font-size: clamp(40px, 10vw, 50px); }
  .hero-art--decco-interview { --hero-position: left 42%; }
  .case-gallery { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .case-hero--morse { --morse-photo-height: clamp(220px, 66vw, 350px); }

  .case-hero--morse .case-cover,
  .case-hero--morse::after {
    bottom: auto;
    height: var(--morse-photo-height);
  }

  .case-hero--morse .case-cover { object-position: right 15%; }

  .case-hero--morse::after {
    background: linear-gradient(90deg, #050b0e99, #050b0e35 48%, #050b0e05),
      linear-gradient(180deg, #050b0e14, transparent 25%, #050b0e38 60%, #050b0ebf 83%, var(--deep));
  }

  .case-hero--morse .case-hero-inner {
    min-height: 0;
    padding-top: calc(var(--morse-photo-height) - 24px);
  }
}

@media (max-width: 560px) {
  .portfolio-grid, .journal-grid, .about--profile .about-grid {
    grid-template-columns: 1fr;
  }
  .case-gallery.project-gallery, .article-related ul { grid-template-columns: 1fr; }
}

@media (max-width: 350px) {
  .hero-art--norwalk-closeup { --hero-position: 57% 30%; }
}